Angular $http.post() to C# Web API Controller

Question

I can get $http.get() working just fine with calling my Web API Controller function but when I try to do a post() it gives 404.

Angular:

// call API to update
$http.post("api/Store/UpdateField", $httpParamSerializer({ ID: rowEntity.ID, columnName: colDef.name, value: newValue}))
     .then(function (response) {

     },
     function (error, status) {
     });

C#:

[RoutePrefix("api/Store")]
public class StoreController : ApiController

    [Route("UpdateField")]
    [HttpPost]
    public async Task<bool> UpdateField(int ID, string columnName, string value)
    { // stuff here }
}


// routes
        public static void Register(HttpConfiguration config)
        {
            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "API1",
                routeTemplate: "api/{controller}",
                defaults: new { id = RouteParameter.Optional }
            );

            config.Routes.MapHttpRoute(
                name: "API2",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            // Remove the XML formatter so json is returned instead
            config.Formatters.Remove(config.Formatters.XmlFormatter);
            config.Formatters.Add(config.Formatters.JsonFormatter);
        }

This can be an issue with the accepted verbs by the server, check your web.config file. — dlcardozo, Feb 20 '17 at 18:36
Found an answer. Seems you have to make the C# function take an option vs multiple primitive types. Then stringify the data on the javascript side: http://stackoverflow.com/questions/39904610/angular2-post-web-api-404-not-found — user441521, Feb 20 '17 at 18:38

score 1 · Answer 1 · answered Feb 20 '17 at 18:41

In the adress make sure you write the whole address http://localhost:56493/api/Store/UpdateField

Also I recommend postman for testing your api : Postman You can install it or either use the chrome extension.

One more thing, i recommend building your own json in angular like this:

var json = {
      "Id": $scope.id,
      "columnName": $scope.columnName,
      "value":$scope.value
    };

And call it like this:

$http.post("http://localhost:YOURPORT/api/Store/UpdateField", json)
     .then(function (response) {

     },
     function (error, status) {
     });

Hope it works :D

Artur Fernandes · Accepted Answer · 2017-02-20T22:52:52.340

What i do and always work for me is:

    [HttpPost]
    [Route("MyRoute")]
    public HttpResponseMessage SaveEntity(MyModelOrCommand model)
    {
        try
        {
            object objReturned = bus.SendWithReturn(model);
            if (objReturned.GetType() == typeof(Validation))
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest,                  ((Validation)objReturned).Messages);
            }
            return Request.CreateResponse(HttpStatusCode.OK, objReturned);
        }
        catch (Exception ex)
        {
            return Request.CreateResponse(HttpStatusCode.InternalServerError, ex);
        }
    }

   angular.module('MyModule').service('Module', ['envService', '$http', paService])
   function paService(envService, $http) {
   MyMethod: function (data, callback) {
            $http({
                method: 'POST',
                url: envService.read('apiUrl') + '/MyRoute',
                data: data,
            }).then(function (result) {
                callback(result);
            })
            .catch(function (result) {
                callback(result);
            })
        }
    }

And for send the object i use a javascript object in the request

   var obj = new Object();
   obj.MyProperty1 = $scope.data;
   obj.MyProperty2 = $scope.data2;
   myService.MyMethod(JSON.stringfy(obj),function(result){
      if(result.status == 200){
          //do stuff
      }
   });

Angular $http.post() to C# Web API Controller

2 Answers2