视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
asp.net中mvc使用ajax提交参数的匹配问题解决探讨
2020-11-27 22:52:20 责编:小采
文档

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

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

说干就干,直接上代码
代码如下:


//用于MVC参数适配JavaScript闭包函数
/*
使用方式如下:
$.ajax({
url: "@Url.Action("AjaxTest")",
data: mvcParamMatch("", sendData),//在此转换json格式,用于mvc参数提交
dataType: "json",
type: "post",
success:function(result) {
alert(result.Message);
}
});
*/
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": 7 } }] },
{ "Note": "bbb", "Num": 34, "Ajax1S": [{ "Name": "sq3", "Age": 44, "Ajax3S": { "Ajax3Num": 654 } }, { "Name": "sq4", "Age": 987 }] }]
};


$.ajax({
url: "@Url.Action("AjaxTest")",
/*
在此使用闭包函数转换json对象,如果你的json对象自身就是个数组Array,
那么需要指定一个名称,这个名称对应于Action中这个数组参数的名称像这样
            data:mvcParamMatch(sendData,"Action中所对应的参数名称")
*/
data: mvcParamMatch(sendData),
dataType: "json",
type: "post",
success:function(result) {
alert(result.Message);
},
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
{
//
// GET: /Test/
public ActionResult Index()
{
return View();
}
public ActionResult AjaxTest(Models.AjaxParamModels model)
{
//在此可访问model
return Json(new {Message = "qqqqq"});
}
}

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

下载本文
显示全文
专题