angular access to back office properties from front end

Press Ctrl / CMD + C to copy this to your clipboard.

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

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

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

0

Boom. Have that karma!

Copy Link

David Houghton 33 posts 108 karma points

Dec 15, 2017 @ 17:58

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
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
is working on a reply...

Please Sign in or register to post replies