如何使用jQuery将整数列表发送到ASP.net MVC默认模型绑定器

Question

当我使用jQuery发送像这样的int列表：

$.ajax('@Url.Action("Execute")', {
    type: 'POST',
    data: {
        pkList: [1,2,3]
    }
});

然后 jQuery 将转换 pkList 对象并像这样通过 post 发送：

pkList[]:1
pkList[]:2
pkList[]:3

如果服务器使用PHP，那么这会很好。但是我使用Asp.NET MVC3，并尝试使用默认模型绑定器获取这些值：

public ActionResult Execute(ICollection<int> pkList)

但是pkList始终为null，似乎默认的模型绑定程序无法绑定它。

我该如何正确解决这个问题？

---

添加解决方案

我使用了Darin Dimitrov的解决方案，并在jQuery中设置了traditional选项：

$.ajax('@Url.Action("Execute")', {
    type: 'POST',
    traditional: true,
    data: {
        pkList: [1,2,3]
    }
});

现在 jQuery 不再向参数添加 []，它们会像这样被发送：

pkList:1
pkList:2
pkList:3

而且MVC默认的模型绑定器可以正确获取这些值。

希望能对某些人有所帮助。

- Marc

Answer 1

您可以使用 JSON 请求，因为它允许您发送任何复杂对象：

$.ajax({
    url: '@Url.Action("Execute")',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ pkList: [1, 2, 3] }), // you could throw any javascript object you like here
    success: function(result) {
        // process the results
    }
});

JSON.stringify 方法是现代浏览器内置的，如果你想支持旧版浏览器，可以将 json2.js 脚本包含在你的网站中。

回答你的问题，你可以使用设置 traditional: true 选项来告诉 jQuery 回退到传统的参数序列化方式，因为这在 jQuery 1.4 中已经改变了。如果你正在使用更高版本，你有可能切换回参数序列化的方法:

$.ajax({ 
    url: '@Url.Action("Execute")',
    type: 'POST',
    data: {
        pkList: [1, 2, 3]
    },
    traditional: true
});

- Darin Dimitrov

---

默认的模型绑定器也能处理表单编码数据中的逗号分隔列表，例如 data: { pkList: '1,2,3' } 吗？但对于所有模型序列化，我都使用这种方法，对于 JS 中更复杂的对象来说是最好的选择。 - Paul Tyng

@PaulT.，不，默認的模型繫結器不會接受 data: { pkList: '1,2,3' }。如果您想處理這樣的請求，則需要使用自定義模型繫結器，在其中需要拆分條目，然後將每個條目解析回整數。如果目標是將整數數組發送到控制器操作，則無需經歷此痛苦。 - Darin Dimitrov

啊，我现在明白你的意思了，刚刚测试过了。不过有点奇怪，因为如果你有两个拥有同样名称的输入框，它会将其反序列化为列表。只是 jQuery 的表单数据序列化没有处理好这一点（例如 pkList=1&pkList=2 就可以正常工作）。 - Paul Tyng

@PaulT：你说得很对，（新的）默认jQuery JSON列表序列化与默认的MVC 3默认模型绑定器JSON反序列化不匹配。这难道不有点奇怪吗？仅仅因为MVC是与jQuery一起发布的吗？ - Marc

@DarinDimitrov：非常感谢，我从未知道jQuery中的“traditional”选项。我将其设置为我的默认ajax选项，再也不用在我的项目中担心它了，效果很好！另外，了解“JSON.stringify”方法也是很好的。我不知道为什么jQuery没有包含它（并回退到旧版浏览器），我认为它应该被包含进去？ - Marc

Answer 2

因为 @Darin 漏掉了控制器操作，所以添加此内容。

JavaScript 代码：

function sendArray() {
    var list = ["a", "b"];

    $.ajax({
        url: '@Url.Action("ActionName")',
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ list }),
        dataType: "json",
        success: function (response) {},
        error: function (response) {}
    });
}

C# 代码

[HttpPost]
public ActionResult ActionName(List<string> list)
{
    return View();
}

- Vasil Valchev

---

我正在经历相同的方法。但是，在服务器上收到了null。 - Amrendra

Answer 3

Phil Haack在他的博客上有一篇很棒的文章，应该能指引你正确的方向。

将模型绑定到列表

- Erik Philips

---

谢谢，伙计。我之前看过那个，但是对我没有帮助，问题更多出在 jQuery 方面 :) - Marc