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 接收参数的数据格式。

 

参考文章：

通过实例模拟ASP.NET MVC的Model绑定机制：数组

通过实例模拟ASP.NET MVC的Model绑定的机制：集合+字典