MVC中使用ajax提交json数组和复杂对象时参数的匹配问题

仅适用于Asp.Net MVC4及以下，Asp.Net MVC5已对json对象做了处理，无需进行转换

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

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

//用于MVC参数适配JavaScript闭包函数   
var mvcParamMatch = (function () {  
var MvcParameterAdaptive = {};  

//验证是否为数组  
MvcParameterAdaptive.isArray = Function.isArray || function (o) {  
    return typeof o === "object" &&  
            Object.prototype.toString.call(o) === "[object Array]";  
};  
  
//将数组转换为对象  
MvcParameterAdaptive.convertArrayToObject = function (/*数组名*/arrName, /*待转换的数组*/array, /*转换后存放的对象，不用输入*/saveOjb) {  
    var obj = saveOjb || {};  

    function func(name, arr) {  
        for (var i in arr) {  
            if (!MvcParameterAdaptive.isArray(arr[i]) && typeof arr[i] === "object") {  
                for (var j in arr[i]) {  
                    if (MvcParameterAdaptive.isArray(arr[i][j])) {  
                        func(name + "[" + i + "]." + j, arr[i][j]);  
                    } else if (typeof arr[i][j] === "object") {  
                        MvcParameterAdaptive.convertObject(name + "[" + i + "]." + j + ".", arr[i][j], obj);  
                    } else {  
                        obj[name + "[" + i + "]." + j] = arr[i][j];  
                    }  
                }  
            } else {  
                obj[name + "[" + i + "]"] = arr[i];  
            }  
        }  
    }  

    func(arrName, array);  

    return obj;  
};  
  
//转换对象  
MvcParameterAdaptive.convertObject = function (/*对象名*/objName,/*待转换的对象*/turnObj, /*转换后存放的对象，不用输入*/saveOjb) {  
    var obj = saveOjb || {};  

    function func(name, tobj) {  
        for (var i in tobj) {  
            if (MvcParameterAdaptive.isArray(tobj[i])) {  
                MvcParameterAdaptive.convertArrayToObject(i, tobj[i], obj);  
            } else if (typeof tobj[i] === "object") {  
                func(name + i + ".", tobj[i]);  
            } else {  
                obj[name + i] = tobj[i];  
            }  
        }  
    }  

    func(objName, turnObj);  
    return obj;  
};  
  
return function (json, arrName) {  
    arrName = arrName || "";  
    if (typeof json !== "object") throw new Error("请传入json对象");  
    if (MvcParameterAdaptive.isArray(json) && !arrName) throw new Error("请指定数组名，对应Action中数组参数名称！");  

    if (MvcParameterAdaptive.isArray(json)) {  
        return MvcParameterAdaptive.convertArrayToObject(arrName, json);  
    }  
    return MvcParameterAdaptive.convertObject("", json);  
};  
})();  

使用方法：

var sendData = {  
                    "Comment": "qqq",  
                    "Ajax1": { "Name": "sq", "Age": 55, "Ajax3S": { "Ajax3Num": 234 } },  
                    "Ajax2S": [{ "Note": "aaa", "Num": 12, "Ajax1S": [{ "Name": "sq1", "Age": 22, "Ajax3S": { "Ajax3Num": 456 } }, { "Name": "sq2", "Age": 33, "Ajax3S": { "Ajax3Num": 789 } }] },  
                        { "Note": "bbb", "Num": 34, "Ajax1S": [{ "Name": "sq3", "Age": 44, "Ajax3S": { "Ajax3Num": 654 } }, { "Name": "sq4", "Age": 987 }] }]  
                };  

$.ajax({  
    url: "@Url.Action("AjaxTest","Test")",  
    /* 
    在此使用闭包函数转换json对象，如果你的json对象自身就是个数组Array， 
    那么需要指定一个名称，这个名称对应于Action中这个数组参数的名称像这样 
　　　　　　　　　　　　data:mvcParamMatch(sendData,"Action中所对应的参数名称") 
    */  
    data: mvcParamMatch(sendData),  
    dataType: "json",  
    type: "post",  
    success:function(result) {  
        console.log(result); 
    },  
    error:function(a,b,c) {  
            
    }  
});  

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

public class AjaxParamModels  
{  
    public string Comment { set; get; }  

    public Ajax1 Ajax1 { set; get; }  

    public List<Ajax2> Ajax2S { set; get; }  
}  
  
public class Ajax1  
{  
    public string Name { set; get; }  

    public int Age { set; get; }  

    public Ajax3 Ajax3S { set; get; }  
}  

public class Ajax2  
{  
    public string Note { set; get; }  

    public int Num { set; get; }  

    public List<Ajax1> Ajax1S { set; get; }  
}  

public class Ajax3  
{  
    public int Ajax3Num { set; get; }  
}  

controller中action代码

public class TestController : Controller  
{
    [HttpPost]
    public ActionResult AjaxTest(AjaxParamModels model)  
    {  
        return Json(model);  
    }  
}