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

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

I agree, but in doing this also needs to simply post $scope.user as-is rather converting it to a json string.
@jbrown, I just checked $http.post and you are correct. good catch and thanks.
I had an error in my original answer and have since updated it.
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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related