从Angular发布到.net WebAPI始终为null

时间:2016-06-17 12:10:07

标签: angularjs asp.net-web-api

我正在尝试将AngularJS中的对象发布到MVC 5 WebApi控制器,但值始终为null

我可以在Chrome开发工具中看到可以在请求中找到数据。

角度控制器:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>

MVC 5 API控制器:

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

如果我将对象包裹在{Data:{payload}}

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

如果我不包装它,我得到:

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

(Visual Studio 2015配置为使用IISExpress)

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

value为空的原因是因为框架的模型绑定器无法将参数与帖子正文中发送的数据相匹配。

创建一个用于存储有效负载的类

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

更新控制器

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

角度控制器

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