http.post Simple object from angularJS to c# Web api either null or all properties are 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.

Why appending the data to URI? Have you tried this one? http://stackoverflow.com/a/20226220/5724584 — Vahid, Mar 09 '17 at 16:39
have you tried `$http.post(apiUrl + "PostSimpleObject", simpleObject, { headers: { 'Content-Type': 'application/json' }`? — Emin Laletovic, Mar 09 '17 at 16:39
Is there a reason you're passing your data as a parameter (named `item`)? — lealceldeiro, Mar 09 '17 at 16:40

David L · Accepted Answer · 2017-03-09T16:58:14.947

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);

edited Mar 09 '17 at 16:58

answered Mar 09 '17 at 16:41

David L

32,885
8
62
93

Thanks very much. I'm not sure why I was using the querystring - in actual fact I wasn't aware you could pass the body directly like that. – Aeptitude Mar 09 '17 at 16:52
@Aeptitude You are welcome! Either will technically work the majority of the time but the body is typically the expected mechanism for data for posts and puts. – David L Mar 09 '17 at 16:53

score 1 · Answer 2 · answered Mar 09 '17 at 16:43

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);
}

http.post Simple object from angularJS to c# Web api either null or all properties are null

2 Answers2