CODEWITHSUNDEEP
angularjsasp.net-web-api
Tony
Tony

Reputation: 1664

POSTing from Angular to .net WebAPI is always null

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?

Upvotes: 2

Views: 3944

Answers (1)

Nkosi
Nkosi

Reputation: 247591

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

Upvotes: 1

Related Questions