使用javaScript解决asp.net中mvc使用ajax提交数组参数的匹配问题

本文转载：http://blog.csdn.net/sq111433/article/details/9360111

想到在asp.net的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组（或List集合）以及更复杂的对象时，服务端总是会发生取不到值的情况，当然网上也有很多解决的例子，但都是在服务端想办法来解决的（比如将json转换为字符串，再在服务端反序列化为一个对象），为何不能在客户端就把这个问题搞定。

其实问题没那么复杂，那是因为在jquery提交Array的数据时，提交的时候始终会在名称后面加上”[]”， 问题就出在这里。另外在服务端对数组和内嵌的js对象进行解析时，需要像这样的格式，比如数组（或List集合）在服务端需要这样{'xxx[0]':'aaa','xxx[1]':'bbb'}的格式，而内嵌对象需要像这样{'xxx.a':'ddd','xxx.b':'hhh'}，找到问题的原因就好解决了，如果我们能将json的格式转换为服务端了能够识别的格式，问题岂不迎刃而解。

说干就干，直接上代码

[javascript]  view plain copy

1. //用于MVC参数适配JavaScript闭包函数  
2. /* 
3. 使用方式如下： 
4.                 $.ajax({ 
5.                     url: "@Url.Action("AjaxTest")", 
6.                     data: mvcParamMatch(sendData),//在此转换json格式，用于mvc参数提交 
7.                     dataType: "json", 
8.                     type: "post", 
9.                     success:function(result) { 
10.                         alert(result.Message); 
11.                     } 
12.                 }); 
13. */  
14. var mvcParamMatch = (function () {  
15.     var MvcParameterAdaptive = {};  
16.     //验证是否为数组  
17.     MvcParameterAdaptive.isArray = Function.isArray || function (o) {  
18.         return typeof o === "object" &&  
19.                 Object.prototype.toString.call(o) === "[object Array]";  
20.     };  
21.   
22.     //将数组转换为对象  
23.     MvcParameterAdaptive.convertArrayToObject = function (/*数组名*/arrName, /*待转换的数组*/array, /*转换后存放的对象，不用输入*/saveOjb) {  
24.         var obj = saveOjb || {};  
25.   
26.         function func(name, arr) {  
27.             for (var i in arr) {  
28.                 if (!MvcParameterAdaptive.isArray(arr[i]) && typeof arr[i] === "object") {  
29.                     for (var j in arr[i]) {  
30.                         if (MvcParameterAdaptive.isArray(arr[i][j])) {  
31.                             func(name + "[" + i + "]." + j, arr[i][j]);  
32.                         } else if (typeof arr[i][j] === "object") {  
33.                             MvcParameterAdaptive.convertObject(name + "[" + i + "]." + j + ".", arr[i][j], obj);  
34.                         } else {  
35.                             obj[name + "[" + i + "]." + j] = arr[i][j];  
36.                         }  
37.                     }  
38.                 } else {  
39.                     obj[name + "[" + i + "]"] = arr[i];  
40.                 }  
41.             }  
42.         }  
43.   
44.         func(arrName, array);  
45.   
46.         return obj;  
47.     };  
48.   
49.     //转换对象  
50.     MvcParameterAdaptive.convertObject = function (/*对象名*/objName,/*待转换的对象*/turnObj, /*转换后存放的对象，不用输入*/saveOjb) {  
51.         var obj = saveOjb || {};  
52.   
53.         function func(name, tobj) {  
54.             for (var i in tobj) {  
55.                 if (MvcParameterAdaptive.isArray(tobj[i])) {  
56.                     MvcParameterAdaptive.convertArrayToObject(i, tobj[i], obj);  
57.                 } else if (typeof tobj[i] === "object") {  
58.                     func(name + i + ".", tobj[i]);  
59.                 } else {  
60.                     obj[name + i] = tobj[i];  
61.                 }  
62.             }  
63.         }  
64.   
65.         func(objName, turnObj);  
66.         return obj;  
67.     };  
68.   
69.     return function (json, arrName) {  
70.         arrName = arrName || "";  
71.         if (typeof json !== "object") throw new Error("请传入json对象");  
72.         if (MvcParameterAdaptive.isArray(json) && !arrName) throw new Error("请指定数组名，对应Action中数组参数名称！");  
73.   
74.         if (MvcParameterAdaptive.isArray(json)) {  
75.             return MvcParameterAdaptive.convertArrayToObject(arrName, json);  
76.         }  
77.         return MvcParameterAdaptive.convertObject("", json);  
78.     };  
79. })();  

使用方法非常简单，看下面的例子：

首先是客户端的代码

[javascript]  view plain copy

1. var sendData = {  
2.                     "Comment": "qqq",  
3.                     "Ajax1": { "Name": "sq", "Age": 55, "Ajax3S": { "Ajax3Num": 234 } },  
4.                     "Ajax2S": [{ "Note": "aaa", "Num": 12, "Ajax1S": [{ "Name": "sq1", "Age": 22, "Ajax3S": { "Ajax3Num": 456 } }, { "Name": "sq2", "Age": 33, "Ajax3S": { "Ajax3Num": 789 } }] },  
5.                         { "Note": "bbb", "Num": 34, "Ajax1S": [{ "Name": "sq3", "Age": 44, "Ajax3S": { "Ajax3Num": 654 } }, { "Name": "sq4", "Age": 987 }] }]  
6.                 };  
7.                   
8.                   
9.                   
10.   
11.                 $.ajax({  
12.                     url: "@Url.Action("AjaxTest")",  
13.                     /* 
14.                     在此使用闭包函数转换json对象，如果你的json对象自身就是个数组Array， 
15.                     那么需要指定一个名称，这个名称对应于Action中这个数组参数的名称像这样 
16. 　　　　　　　　　　　　data:mvcParamMatch(sendData,"Action中所对应的参数名称") 
17.                     */  
18.                     data: mvcParamMatch(sendData),  
19.                     dataType: "json",  
20.                     type: "post",  
21.                     success:function(result) {  
22.                         alert(result.Message);  
23.                     },  
24.                     error:function(a,b,c) {  
25.                           
26.                     }  
27.                 });  

然后是服务端对应客户端json的实体类

[csharp]  view plain copy

1. public class AjaxParamModels  
2.     {  
3.         public string Comment { set; get; }  
4.   
5.         public Ajax1 Ajax1 { set; get; }  
6.   
7.         public List<Ajax2> Ajax2S { set; get; }  
8.     }  
9.   
10.     public class Ajax1  
11.     {  
12.         public string Name { set; get; }  
13.   
14.         public int Age { set; get; }  
15.   
16.         public Ajax3 Ajax3S { set; get; }  
17.     }  
18.   
19.     public class Ajax2  
20.     {  
21.         public string Note { set; get; }  
22.   
23.         public int Num { set; get; }  
24.   
25.         public List<Ajax1> Ajax1S { set; get; }  
26.     }  
27.   
28.     public class Ajax3  
29.     {  
30.         public int Ajax3Num { set; get; }  
31.     }  

然后是 controller中的action代码

[csharp]  view plain copy

1. public class TestController : Controller  
2.     {  
3.         //  
4.         // GET: /Test/  
5.   
6.         public ActionResult Index()  
7.         {  
8.             return View();  
9.         }  
10.   
11.         public ActionResult AjaxTest(Models.AjaxParamModels model)  
12.         {  
13.             //在此可访问model  
14.             return Json(new {Message = "qqqqq"});  
15.         }  
16.     }  

这样就OK了，不管你这个json对象有多少复杂都没关系，他会自动转换为服务端要求的格式，服务端再也不用操心了。