POSTing from Angular to .net WebAPI is always null

Question

I am trying to Post an object from AngularJS to a MVC 5 WebApi Controller, but the value is always null

I can see in Chrome dev tools that the data can be found on the request.

Angular Controller:

$scope.join = function () {
    if (!$scope.joinForm.$valid) return;

    // Writing it to the server
    var payload = $scope.user;

    var res = $http.post('/api/some', JSON.stringify( { Data: { payload }  }), { header: { 'Content-Type': 'application/json' } });
    res.success(function (data, status, headers, config) {
        $scope.message = data;            
    });
    res.error(function (data, status, headers, config) {
        alert("failure message: " + JSON.stringify({ data: data }));
    });
}

MVC 5 API Controller:

public class SomeController : ApiController
{        
    // POST api/values 
    public void Post([FromBody]string value)
    {           
        Trace.Write(value);
    }
}

If I wrap my object in {Data: {payload}}

{"Data":{"payload":{"symbol":"xxx","amount":12000,"startdate":"2014-05-23T14:26:54.106Z","enddate":"2015-05-23T14:26:54.106Z","interval":"7 minutes"}}}

if I dont wrap it I get:

{"symbol":"xxx","amount":12000,"startdate":"2014-05-23T14:26:54.106Z","enddate":"2015-05-23T14:26:54.106Z","interval":"7 minutes"}

(Visual Studio 2015 is configured to use IISExpress)

Any ideas?

Well, for one, the url in your script is pointing at a different url to one you've provided for the controller/action combo here — Dan
– Dan, Commented Jun 17, 2016 at 12:17

Nkosi · Accepted Answer · 2016-06-17 12:33:39Z

1

The reason value was null is because the framework's model binder was unable to match the parameter to the data that was sent in the body of the post.

Create a class to store your payload

public class User
{
    public string symbol { get; set; }
    public int amount { get; set; }
    public DateTime startdate { get; set; }
    public DateTime enddate { get; set; }
    public string interval { get; set; }
}

update controller

public class SomeController : ApiController
{        
    // POST api/post
    public void Post(User user)
    {           
        //consume data
    }
}

Angular controller

$scope.join = function () {
    if (!$scope.joinForm.$valid) return;

    // Writing it to the server        
    var res = $http.post('/api/some', $scope.user, { header: { 'Content-Type': 'application/json' } });
    res.success(function (data, status, headers, config) {
        $scope.message = data;            
    });
    res.error(function (data, status, headers, config) {
        alert("failure message: " + JSON.stringify({ data: data }));
    });
}

edited Jun 17, 2016 at 12:33

answered Jun 17, 2016 at 12:17

Nkosi

249k38 gold badges472 silver badges506 bronze badges

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

6 Comments

jbrown Over a year ago

I agree, but in doing this also needs to simply post $scope.user as-is rather converting it to a json string.

Nkosi Over a year ago

I'm not familiar enough with angular to confirm that.

Nkosi Over a year ago

@jbrown, I just checked $http.post and you are correct. good catch and thanks.

Nkosi Over a year ago

I had an error in my original answer and have since updated it.

Tony Over a year ago

creating a class plus posting $scope.user instead of a payload object worked :-)

|

Collectives™ on Stack Overflow

POSTing from Angular to .net WebAPI is always null

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related