http.post从angularJS到c＃Web api的简单对象为null或所有属性为null

Question

First off, I'll acknowledge there are lots of questions close to my one here, but having tried every solution I can find on SO I'm still stuck.

My Service method within my service.js is as follows, with comments;

postSimpleObject: function () {

    // Have tried this first, and have passed
    // as JSON.stringify(simpleObject)
    var simpleObject = {
        name: "J Doe",
        colour: "Red"
    };

    // tried to pass this next
    var simplerObject = '{ "Name": "J Done", "Colour":"Red"}';

    // escaped the quotations and tried this next
    var simplerObject2 = '{ \"Name\": \"J Done\", \"Colour\":\"Red\"}';

    return $http.post(apiUrl + "PostSimpleObject?item=" + JSON.stringify(simpleObject), {
        headers: {
            'Content-Type': 'application/json'
        }
    });
}

Here is my API controller function on the API side;

public class CrudUserApiController : ApiController
{

    [System.Web.Http.HttpPost]
    public void PostSimpleObject(SimpleObject item)
    {
        var itemReceived = item;
    }    
}

my simple object class, on the api side;

public class SimpleObject
{
    public string Name { get; set; }
    public string Colour { get; set; }

}

Now, what happens is;

• The API method is triggered, the routing can locate the controller and method
• The model / object received is a new SimpleObject with null properties for both members

As per the comments in the service, I've tried passing a stringified object, a json string and an escaped json string.

Also on the API side I've tried using the [FromBody] attribute in front of the SimpleObject argument in the signature. The same thing happens.

I'm totally lost, some help would be much appreciated. Thanks.

Answer 1

It would be advisable to post the content on the body instead of on the the querystring for a number of reasons, such as querystring length limitations.

That said, if you insist on using the querystring, you need to tell WebAPI to look to the querystring for the data using the FromUri attribute, since the default is the body:

[System.Web.Http.HttpPost]
public void PostSimpleObject([FromUri]SimpleObject item)
{
    var itemReceived = item;
}    

Alternatively, you can post the content on the body directly as called out by ex0dm3nt:

$http.post(apiUrl + "PostSimpleObject", simpleObject);

Answer 2

You just need to pass your simpleObject as second parameter in the $post request like this:

postSimpleObject: function () {
    var simpleObject = {
        name: "J Doe",
        colour: "Red"
    };

    return $http.post(apiUrl + "PostSimpleObject", simpleObject);
}