Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • David Houghton 33 posts 108 karma points
    Dec 15, 2017 @ 15:53
    David Houghton
    0

    Angular access to back office properties from front end

    Hey guys, need a little assistance using Angular on the front end, and having this angular talk to the umbraco back office.

    I have a custom form, on this form an input for a promo code is added with a button to apply the code.

    <button class="submit" type="button" ng-click="applyPromoCode()" >Apply</button>

//js
$scope.applyPromoCode = function () { functionToCheckPromoCode() }

    What I want to happen here is angular goes off, hits a custom controller which talks to the umbraco back office to determine whether or not the promo code exists and is valid. Either way this controller will return a json object which contains info about whether or not the promo code is valid, something like: 

    {
    promoCode: "1234",
    isValid: true, 
    discount: 10
}

    All will be held as either individual nodes in the back office, or as nested content sections on one node, either way I need to hit the controller first.

    I did set this up using angular $http, like: 

    $scope.applyPromoCode = function () {
     $http({
          method: 'GET',
          url: '/Controllers/CheckPromoCode'
     }).then(function successCallback(response) {
          console.log(response);
     },
     function errorCallback(response) {
          console.log(response);
     });
}

    The start of the controller is like the following: 

    using System;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using xxx.web.Models;
using Skybrud.WebApi.Json;
using Skybrud.WebApi.Json.Meta;
using Umbraco.Core.Logging;
using Umbraco.Web;
using Umbraco.Web.WebApi;

namespace xxx.web.Controllers
{
    [JsonOnlyConfiguration]
    public class CheckPromoCodeController : UmbracoApiController
    {
        private UmbracoHelper _helper = new UmbracoHelper(UmbracoContext.Current);

        public object CheckPromoCode()
        {

            var a = "something"; // breakpoint attached here purely to see if angular hits this

    No joy, all im getting is a 404. Now I havnt touched routing at all as im not really sure how to use it yet.

    Thanks in advance for any help, and if any more info is required just ask.

    Copy Link
  • Steven Harland 78 posts 518 karma points c-trib
    Dec 15, 2017 @ 16:10
    Steven Harland
    1

    Hi Dave,

    As discussed on Slack the URL of your AJAX call is wrong. Instead of '/Controllers/CheckPromoCode' it should be '/Umbraco/Api/CheckPromoCode/CheckPromoCode'. Umbraco API controllers are automatically routed as described here: https://our.umbraco.org/documentation/reference/routing/webapi/routing

    Copy Link
  • David Houghton 33 posts 108 karma points
    Dec 15, 2017 @ 17:36
    David Houghton
    0

    Boom. Have that karma!

    Copy Link
  • David Houghton 33 posts 108 karma points
    Dec 15, 2017 @ 17:58
    David Houghton
    0

    I am having trouble posting data to this controller however, my code: 

    $http({
     method: 'POST',
     url: '/Umbraco/Api/CheckPromoCode/CheckPromoCode',
     data: "test"
}).then(function successCallback(response) {
     console.log(response.data);
},
function errorCallback(response) {
     console.log(response);
     $scope.hidePromoFields();
});

    and the controller:

    [HttpPost]
public int CheckPromoCode(string something)
{

    When this is added the $http request returns a 404, isnt even getting there...weird right, or am I missing something?

    Copy Link
  • David Houghton 33 posts 108 karma points
    Dec 15, 2017 @ 18:29
    David Houghton
    0

    Ok, got it, after a little faffing I had to do the following:

    In the angular $http method: 

    $http({
     method: 'POST',
     url: '/Umbraco/Api/CheckPromoCode/CheckPromoCode',
     data: JSON.stringify("something here")
})

    (notice the JSON.Stringify method)... and then in the C# controller

    public int CheckPromoCode([FromBody]string something)
{

    (notice the [fromBody] attribute in the method arguments)

    I cannot take total credit though: check out this - http://jasonwatmore.com/post/2014/04/18/post-a-simple-string-value-from-angularjs-to-net-web-api thats where I found my answer.

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies