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 接收参数的数据格式。
 
参考文章:
 
原文地址:https://www.cnblogs.com/god--love-you/p/6028235.html