Angular Xhr post requests to Asp.Net Web API results in parameter is null

Question

I’ve created an ASP.Net API Controller to which I’m trying to make a POST request with Angular. The request reaches my controller method, but the parameter value is null.

My Angular code:

$http({ method: 'POST', url: '/api/Contents', data: "value=foobar", headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).
    success(function(data) {
                }).
    error(function(data, status, headers, config) {

    });

I’ve also tried with json (Json is what I want in the end):

$http({ method: 'POST', url: '/api/Contents', data: { "foo": "bar", "foo2": "bar2" }, headers: { 'Content-Type': 'application/json'} }).
    success(function(data) {
                }).
    error(function(data, status, headers, config) {

    });

My (very simple) Controller method looks like this:

public void Post([FromBody]string value)
{
    //But Value is NULL!!!!!!
}

Below are some values from my request headers cut out from Chrome (the ones I thought could be interesting:

Request Method: POST
Status Code: 204 No Content
Accept: application/json, text/plain, /
Content-Type: application/x-www-form-urlencoded
X-Requested-With: XMLHttpRequest
Form Dataview sourceview URL encoded
value: foobar
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319

What am I missing?

Darin Dimitrov · Accepted Answer · 2013-04-22 16:13:52Z

6

Like this:

$http({ 
    method: 'POST', 
    url: '/api/Contents', 
    data: "=foobar", 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function(data) {

}).error(function(data, status, headers, config) {

});

Notice the =foobar data parameter. You should not specify a parameter name in this case. Yeah, I know, don't ask.

You can read more about how model binding in the Web API works. And if you are like me and find this absolutely insane, you might consider using ServiceStack instead.

Alternatively you could use a view model:

public class ContentsModel
{
    public string Value { get; set; }
}

and then have your controller action take the view model as parameter:

public void Post(ContentsModel model)
{
}

Now you can send a normal JSON request:

$http({ 
    method: 'POST', 
    url: '/api/Contents', 
    data: JSON.stringify({ "value": "the value" }), 
    headers: { 'Content-Type': 'application/json' } 
}).success(function(data) {

}).error(function(data, status, headers, config) {

});

Also notice how if you want to send JSON you need to use the JSON.stringify method to transform the javascript object into a JSON string.

edited Apr 22, 2013 at 16:13

answered Apr 22, 2013 at 16:08

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rex_C Over a year ago

I'm using the view model method above, but my request data is an array of view model objects, which Web Api is set to accept as a List<Object>. When the content headers are set to form-urlencoded and the data hits the service from Angular, I get an empty object with Count=0. If content headers are set to app/json, I get OPTIONS method not allowed error. If I send the data from Fiddler, content type is set to Content-Type: text/json; charset=utf-8 automatically and the service accepts it just fine. Any idea how to deal with that?

Collectives™ on Stack Overflow

Angular Xhr post requests to Asp.Net Web API results in parameter is null

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related