Angular Xhr发布对Asp.Net Web API的请求结果参数为null

时间:2013-04-22 16:03:35

标签: ajax angularjs asp.net-web-api http-post

我已经创建了一个ASP.Net API控制器,我正在尝试使用Angular发出POST请求。请求到达我的控制器方法,但参数值为null。

My Angular code:

$http({ method: 'POST', url: '/api/Contents', data: "value=foobar", headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).
    success(function(data) {
                }).
    error(function(data, status, headers, config) {

    });

我也尝试过json(Json是我最想要的):

$http({ method: 'POST', url: '/api/Contents', data: { "foo": "bar", "foo2": "bar2" }, headers: { 'Content-Type': 'application/json'} }).
    success(function(data) {
                }).
    error(function(data, status, headers, config) {

    });

我的(非常简单)控制器方法如下所示:

public void Post([FromBody]string value)
{
    //But Value is NULL!!!!!!
}

以下是我从Chrome中删除的请求标题中的一些值(我认为这些值可能很有趣:

  • 请求方法:POST
  • 状态代码:204无内容
  • 接受:application / json,text / plain, /
  • 内容类型:application / x-www-form-urlencoded
  • X-Requested-With:XMLHttpRequest
  • 表单数据视图源视图URL编码
  • 值:foobar
  • 服务器:Microsoft-IIS / 8.0
  • X-AspNet-Version:4.0.30319

我错过了什么?

1 个答案:

答案 0 :(得分:6)

像这样:

$http({ 
    method: 'POST', 
    url: '/api/Contents', 
    data: "=foobar", 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function(data) {

}).error(function(data, status, headers, config) {

});

注意=foobar数据参数。在这种情况下,您不应指定参数名称。是的,我知道,不要问。

您可以阅读有关how model binding in the Web API works的更多信息。如果你像我一样发现这绝对是疯了,你可以考虑改用ServiceStack

或者您可以使用视图模型:

public class ContentsModel
{
    public string Value { get; set; }
}

然后让控制器操作将视图模型作为参数:

public void Post(ContentsModel model)
{
}

现在您可以发送正常的JSON请求:

$http({ 
    method: 'POST', 
    url: '/api/Contents', 
    data: JSON.stringify({ "value": "the value" }), 
    headers: { 'Content-Type': 'application/json' } 
}).success(function(data) {

}).error(function(data, status, headers, config) {

});

另请注意,如果要发送JSON,需要使用JSON.stringify方法将javascript对象转换为JSON字符串。