ASP.NET MVC 后台接收集合参数和 jquery ajax 传值
MVC 接收参数数组(集合)
示例样本:
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
...
}
// ASP.NET MVC
[HttpPost]
public ActionResult Create(List<Person> persons)
{
// doSomething.
}
ASP.NET MVC 后台 "Create" Action 中要接收 "persons" 参数集合,实际上要传入参数格式为:
"persons[0].FirstName=yang1&persons[0].LastName=gang1&persons[1].FirstName=yang2&persons[1].LastName=gang2 ..." 或是(
"persons[0][FirstName]=yang1&persons[0][LastName]=gang1&persons[1][FirstName]=yang2&persons[1][LastName]=gang2 ..." 格式),这样 MVC 后台才能解析参数并将值正确地绑定到指定 persons 参数实体上。
也可以使用 "[0].FirstName=yang1&[0].LastName=gang1&[1].FirstName=yang2&[1].LastName=gang2 ..." 或是(
"[0][FirstName]=yang1&[0][LastName]=gang1&[1][FirstName]=yang2&[1][LastName]=gang2 ..." 格式)
等没有前缀数组,这样 Action 中的参数名可自定义指定。在 Action 参数只要唯一一个时很好用。
值得注意的是,这种以类似于数组形式传递的参数,初始基数必须为 0, 且基数值必须连续,不然后续的值会被丢失。举个例子:有参数 [0]、 [1]、 [2]、[4]、[5] ... 等一系列项数据,其中缺失 [3], 这样 Action 中参数最终值只有 [0]、[1] 和 [2] 三项,其他将被忽略。
对于中 Action 中简单类型的参数集合,如 List<string>, List<int> 等,直接使用 "arg=1&arg=2&arg=3 ..." 即可。
前端 form 提交
form 中提交很简单,只要将 <input /> 等标签 name 参数设定为数组即可。
<form action="..." method="post">
// item1
<input name="persons[0].FirstName" />
<input name="persons[0].LastName" />
// item2
<input name="persons[1].FirstName" />
<input name="persons[1].LastName" />
</form>
为了自定义 Action 中参数名(参数个数只有一个),也可以使用 [0].FirstName,[1].FirstName 等,如下:
<form action="..." method="post">
// item1
<input name="[0].FirstName" />
<input name="[0].LastName" />
// item2
<input name="[1].FirstName" />
<input name="[1].LastName" />
</form>
其中,persons[0].FirstName 可设置为 persons[0][FirstName] 格式,同样 [0].FirstName 可设置为 [0][FirstName] 格式。
前端 ajax 提交
方式一
var _list = {};
for (var i = 0; i < length; i++) {
_list["persons[" + i + "].FirstName"] = '..';
_list["persons[" + i + "].LastName"] = '..';
}
$.ajax({
url: '...',
data: _list,
dataType: "json",
type: "POST",
success: function (data) {
// your logic
}
});
方式二
var _list = [];
for (var i = 0; i < length; i++) {
_list.push({ FirstName: "", LastName: "" });
}
$.ajax({
url: '...',
data: { "persons": _list },
dataType: "json",
type: "POST",
success: function (data) {
// your logic
}
});
ajax 中都会对参数进行转换(jQuery.param() 方法),方式一中是直接将对象 key 和 value 串联起来,方式二中将对象中 value 的数组转换后拼接起来,最终效果如下。这两种方式生成的参数格式都满足 MVC 接收参数的数据格式。
jQuery.post()
jQuery.post() 是 jQuery.ajax() post 方式的一种简便方式,使用上与调用底层 ajax 相同。
jQuery.param() 方法
var params = {
persons: [
{ FirstName: "yang1", LastName: "gang1" },
{ FirstName: "yang2", LastName: "gang2" }
]
};
jQuery.param(params, false);
输出结果为:
persons%5B0%5D%5BFirstName%5D=yang1&persons%5B0%5D%5BLastName%5D=gang1&persons%5B1%5D%5BFirstName%5D=yang2&persons%5B1%5D%5BLastName%5D=gang2
使用 decodeURIComponent 解析后为:
persons[0][FirstName]=yang1&persons[0][LastName]=gang1&persons[1][FirstName]=yang2&persons[1][LastName]=gang2
可以看出,js 对象经过 jQuery.param() 方法转换后,满足上述 MVC 接收参数的数据格式。
参考文章: