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綁定的機制：集合+字典