Angular POST to Web API doesn't pass data

Question

I\'ve been writing code against ASP.NET Web API for a while now with jQuery and I\'m starting something new in Angular (writing against the same Web API backend.)

I\

Answer 1

Check if you have included the JSON Formatter in your configuration. It should be something like :

    System.Web.Http.GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();
    config.Formatters.Insert(0, new System.Net.Http.Formatting.JsonMediaTypeFormatter());

The Content-Type=application/json only will work if you set the proper formatter.

You can also try using [FromBody] next to your parameter type.

Answer 2

Solved! Discovered this question:

AngularJs $http.post() does not send data

Pointing to this lovely article:

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Turns out Angular doesn't post data the same way jQuery does but you can override it with some tweaking.

Answer 3

I solved this by below codes:

Client Side:

     $http({
                url: me.serverPath,
                method: 'POST',
                data: data,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }).
                success(function (serverData) {
                    console.log("ServerData:", serverData);
    ......

Notice that data is an object.

On the server (ASP.NET MVC):

[AllowCrossSiteJson]
        public string Api()
        {
            var data = JsonConvert.DeserializeObject<AgentRequest>(Request.Form[0]);
            if (data == null) return "Null Request";
            var bl = Page.Bl = new Core(this);

            return data.methodName;
        }

and 'AllowCrossSiteJsonAttribute' is needed for cross domain requests:

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
            base.OnActionExecuting(filterContext);
        }
    }