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

本文为大家介绍下使用javaScript解决aspnet中mvc使用ajax提交参数的匹配问题遇到类似情况的朋友可以参考下希望对大家有所帮助想到在aspnet的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组（或List集合）以及更复杂的对象时服务端总是会发 生取不到值的情况当然网上也有很多解决的例子但都是在服务端想办法来解决的（比如将json转换为字符串再在服务端反序列化为一个对象）为何不能 在客户端就把这个问题搞定

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

说干就干直接上代码
复制代码 代码如下:
//用于MVC参数适配JavaScript闭包函数
/*
使用方式如下
$ajax({
url: "@UrlAction("AjaxTest")"
data: mvcParamMatch("" sendData)//在此转换json格式用于mvc参数提交
dataType: "json"
type: "post"
success:function(result) {
alert(resultMessage);
}
});
*/
var mvcParamMatch = (function () {
var MvcParameterAdaptive = {};
//验证是否为数组
MvcParameterAdaptiveisArray = FunctionisArray || function (o) {
return typeof o === "object" &&
ObjectprototypetoStringcall(o) === "[object Array]";
};
//将数组转换为对象
MvcParameterAdaptiveconvertArrayToObject = function (/*数组名*/arrName /*待转换的数组*/array /*转换后存放的对象不用输入*/saveOjb) {
var obj = saveOjb || {};
function func(name arr) {
for (var i in arr) {
if (!MvcParameterAdaptiveisArray(arr[i]) && typeof arr[i] === "object") {
for (var j in arr[i]) {
if (MvcParameterAdaptiveisArray(arr[i][j])) {
func(name + "[" + i + "]" + j arr[i][j]);
} else if (typeof arr[i][j] === "object") {
MvcParameterAdaptiveconvertObject(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;
};
//转换对象
MvcParameterAdaptiveconvertObject = function (/*对象名*/objName/*待转换的对象*/turnObj /*转换后存放的对象不用输入*/saveOjb) {
var obj = saveOjb || {};
function func(name tobj) {
for (var i in tobj) {
if (MvcParameterAdaptiveisArray(tobj[i])) {
MvcParameterAdaptiveconvertArrayToObject(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 (MvcParameterAdaptiveisArray(json) && !arrName) throw new Error("请指定数组名对应Action中数组参数名称！");
if (MvcParameterAdaptiveisArray(json)) {
return MvcParameterAdaptiveconvertArrayToObject(arrName json);
}
return MvcParameterAdaptiveconvertObject("" json);
};
})();
使用方法非常简单看下面的例子
首先是客户端的代码
复制代码 代码如下:
var sendData = {
"Comment": "qqq"
"Ajax": { "Name": "sq" "Age": "AjaxS": { "AjaxNum": } }
"AjaxS":  [{ "Note": "aaa" "Num": "AjaxS": [{ "Name": "sq" "Age":   "AjaxS": { "AjaxNum": } } { "Name": "sq" "Age": "AjaxS": {  "AjaxNum": } }] }
{ "Note": "bbb" "Num": "AjaxS": [{  "Name": "sq" "Age": "AjaxS": { "AjaxNum": } } { "Name":  "sq" "Age": }] }]
};


$ajax({
url: "@UrlAction("AjaxTest")"
/*
在此使用闭包函数转换json对象如果你的json对象自身就是个数组Array
那么需要指定一个名称这个名称对应于Action中这个数组参数的名称像这样
data:mvcParamMatch(sendData"Action中所对应的参数名称")
*/
data: mvcParamMatch(sendData)
dataType: "json"
type: "post"
success:function(result) {
alert(resultMessage);
}
error:function(abc) {
}
});
然后是服务端对应客户端json的实体类
复制代码 代码如下:
public class AjaxParamModels
{
public string Comment { set; get; }
public Ajax Ajax { set; get; }
public List<Ajax> AjaxS { set; get; }
}
public class Ajax
{
public string Name { set; get; }
public int Age { set; get; }
public Ajax AjaxS { set; get; }
}
public class Ajax
{
public string Note { set; get; }
public int Num { set; get; }
public List<Ajax> AjaxS { set; get; }
}
public class Ajax
{
public int AjaxNum { set; get; }
}
然后是controller中的action代码
复制代码 代码如下:
public class TestController : Controller
{
//
// GET: /Test/
public ActionResult Index()
{
return View();
}
public ActionResult AjaxTest(ModelsAjaxParamModels model)
{
//在此可访问model
return Json(new {Message = "qqqqq"});
}
}
这样就OK了不管你这个json对象有多少复杂都没关系他会自动转换为服务端要求的格式服务端再也不用操心了