Ajax 发布到 ASP.net MVC 控制器 - 对象属性为空答案

【问题标题】：Ajax post to ASP.net MVC controller - object properties are nullAjax 发布到 ASP.net MVC 控制器 - 对象属性为空
【发布时间】：2013-05-14 15:43:59
【问题描述】：

我有一个像这样构建的 ajax 帖子：

var myData = [
    {
        id: "a",
        name: "Name 1"
    },
    {
        id: "b",
        name: "Name 2"
    }
];

$.ajax({
    type: 'POST',
    url: '/myurl/myAction',
    data: { items: myData },
    dataType: 'json',
    error: function (err) {
        alert("error - " + err);
    }
});

还有一个 MVC 控制器：

[HttpPost]
public JsonResult MyAction(MyClass[] items)
{

}

MyClass 只是数据的简单表示：

public class MyClass {
    public string Name {get; set; }
    public string Id {get; set; }
}

当 javascript 发出 post 请求时，控制器操作确实收到了 2 个项目，但是这些项目中的属性（id、name）为空。

在 fiddler 中检查请求，body 是这样的：

Name                 | Value
items[0][Name]       | Name 1
items[0][Id]         | a
items[1][Name]       | Name 2
items[1][Id]         | b

我错过了什么吗？

【问题讨论】：

只是猜测，可能是因为属性在javascript中是小写的，而在C#中是大写的。
不，不是这样。 JSON 序列化程序不区分大小写。
另一个属性为空的场景 - stackoverflow.com/questions/18124405/…

标签： c# javascript ajax asp.net-mvc

【解决方案1】：

我错过了什么吗？

是的，请查看following article 以了解默认模型绑定器期望用于绑定集合的正确线路格式。换句话说，要让它起作用，而不是：

items[0][Name]       | Name 1
items[0][Id]         | a
items[1][Name]       | Name 2
items[1][Id]         | b

您的有效负载应该如下所示：

items[0].Name       | Name 1
items[0].Id         | a
items[1].Name       | Name 2
items[1].Id         | b

不幸的是，使用 jQuery 实现这个有效负载可能会非常令人沮丧。因此，如果您想使用 AJAX 将复杂的对象/数组发送到您的服务器，我建议您使用 JSON 有效负载：

$.ajax({
    type: 'POST',
    url: '/myurl/myAction',
    data: JSON.stringify({ items: myData }),
    contentType: 'application/json',
    error: function (err) {
        alert("error - " + err);
    }
});

注意事项：

data: JSON.stringify({ items: myData }) 而不是 data: { items: myData }
已添加contentType: 'application/json'
摆脱了dataType: 'json'

现在您的有效载荷如下所示：

{"items":[{"id":"a","name":"Name 1"},{"id":"b","name":"Name 2"}]}

【讨论】：

我花了两个小时试图找出我的代码出了什么问题。谢谢老兄！
这可能很明显，但也请注意，您的属性服务器端的{ get; set; } 也将成败！这就是我所缺少的，但这为我指明了正确的方向。谢谢！
@Ihan - 你刚刚拯救了我所剩无几的理智。
我错过了内容类型
您如何将请求验证令牌与此请求一起传递，AFAIK 添加“内容类型”不会正确传递令牌。

【解决方案2】：

您可以使用此代码解决问题：

$.ajax({
    url: '/myurl/myAction',
    data: { '': items },
    method: "POST",
    dataType: 'json',
    success: function (xhr, status, response) {
    },
    error: function (xhr, status, response) {
    }
});

[HttpPost]
public JsonResult MyAction(IEnumerable<MyClass> items)
{

}

【讨论】：