提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

NetASPAJAXMVC 问题 使用 解决 参数
2023-06-13 09:15:03 时间
想到在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);
}
});
*/
varmvcParamMatch=(function(){
varMvcParameterAdaptive={};
//验证是否为数组
MvcParameterAdaptive.isArray=Function.isArray||function(o){
returntypeofo==="object"&&
Object.prototype.toString.call(o)==="[objectArray]";
};
//将数组转换为对象
MvcParameterAdaptive.convertArrayToObject=function(/*数组名*/arrName,/*待转换的数组*/array,/*转换后存放的对象，不用输入*/saveOjb){
varobj=saveOjb||{};
functionfunc(name,arr){
for(variinarr){
if(!MvcParameterAdaptive.isArray(arr[i])&&typeofarr[i]==="object"){
for(varjinarr[i]){
if(MvcParameterAdaptive.isArray(arr[i][j])){
func(name+"["+i+"]."+j,arr[i][j]);
}elseif(typeofarr[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);
returnobj;
};
//转换对象
MvcParameterAdaptive.convertObject=function(/*对象名*/objName,/*待转换的对象*/turnObj,/*转换后存放的对象，不用输入*/saveOjb){
varobj=saveOjb||{};
functionfunc(name,tobj){
for(variintobj){
if(MvcParameterAdaptive.isArray(tobj[i])){
MvcParameterAdaptive.convertArrayToObject(i,tobj[i],obj);
}elseif(typeoftobj[i]==="object"){
func(name+i+".",tobj[i]);
}else{
obj[name+i]=tobj[i];
}
}
}
func(objName,turnObj);
returnobj;
};
returnfunction(json,arrName){
arrName=arrName||"";
if(typeofjson!=="object")thrownewError("请传入json对象");
if(MvcParameterAdaptive.isArray(json)&&!arrName)thrownewError("请指定数组名，对应Action中数组参数名称！");
if(MvcParameterAdaptive.isArray(json)){
returnMvcParameterAdaptive.convertArrayToObject(arrName,json);
}
returnMvcParameterAdaptive.convertObject("",json);
};
})();

使用方法非常简单，看下面的例子：
首先是客户端的代码
复制代码代码如下:

varsendData={
"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")",
/*
在此使用闭包函数转换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的实体类
复制代码代码如下:
publicclassAjaxParamModels
{
publicstringComment{set;get;}
publicAjax1Ajax1{set;get;}
publicList<Ajax2>Ajax2S{set;get;}
}
publicclassAjax1
{
publicstringName{set;get;}
publicintAge{set;get;}
publicAjax3Ajax3S{set;get;}
}
publicclassAjax2
{
publicstringNote{set;get;}
publicintNum{set;get;}
publicList<Ajax1>Ajax1S{set;get;}
}
publicclassAjax3
{
publicintAjax3Num{set;get;}
}

然后是controller中的action代码
复制代码代码如下:
publicclassTestController:Controller
{
//
//GET:/Test/
publicActionResultIndex()
{
returnView();
}
publicActionResultAjaxTest(Models.AjaxParamModelsmodel)
{
//在此可访问model
returnJson(new{Message="qqqqq"});
}
}

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

相关文章