快捷導(dǎo)航

asp.net中mvc使用ajax提交參數(shù)的匹配問題解決探討

更新時(shí)間：2013年07月28日 15:52:48 作者：

本文為大家介紹下使用javaScript解決asp.net中mvc使用ajax提交參數(shù)的匹配問題，遇到類似情況的朋友可以參考下，希望對大家有所幫助

想到在asp.net的mvc中如果使用ajax向服務(wù)端傳遞參數(shù)時(shí)如果參數(shù)是一個(gè)類或者是個(gè)數(shù)組（或List集合）以及更復(fù)雜的對象時(shí)，服務(wù)端總是會(huì)發(fā)生取不到值的情況，當(dāng)然網(wǎng)上也有很多解決的例子，但都是在服務(wù)端想辦法來解決的（比如將json轉(zhuǎn)換為字符串，再在服務(wù)端反序列化為一個(gè)對象），為何不能在客戶端就把這個(gè)問題搞定。

其實(shí)問題沒那么復(fù)雜，那是因?yàn)樵趈query提交Array的數(shù)據(jù)時(shí)，提交的時(shí)候始終會(huì)在名稱后面加上”[]”，問題就出在這里。另外在服務(wù)端對數(shù)組和內(nèi)嵌的js對象進(jìn)行解析時(shí)，需要像這樣的格式，比如數(shù)組（或List集合）在服務(wù)端需要這樣{'xxx[0]':'aaa','xxx[1]':'bbb'}的格式，而內(nèi)嵌對象需要像這樣{'xxx.a':'ddd','xxx.b':'hhh'}，找到問題的原因就好解決了，如果我們能將json的格式轉(zhuǎn)換為服務(wù)端了能夠識(shí)別的格式，問題豈不迎刃而解。

說干就干，直接上代碼

復(fù)制代碼代碼如下:

 
//用于MVC參數(shù)適配JavaScript閉包函數(shù) 
/* 
使用方式如下： 
$.ajax({ 
url: "@Url.Action("AjaxTest")", 
data: mvcParamMatch("", sendData),//在此轉(zhuǎn)換json格式，用于mvc參數(shù)提交 
dataType: "json", 
type: "post", 
success:function(result) { 
alert(result.Message); 
} 
}); 
*/ 
var mvcParamMatch = (function () { 
var MvcParameterAdaptive = {}; 
//驗(yàn)證是否為數(shù)組 
MvcParameterAdaptive.isArray = Function.isArray || function (o) { 
return typeof o === "object" && 
Object.prototype.toString.call(o) === "[object Array]"; 
}; 
//將數(shù)組轉(zhuǎn)換為對象 
MvcParameterAdaptive.convertArrayToObject = function (/*數(shù)組名*/arrName, /*待轉(zhuǎn)換的數(shù)組*/array, /*轉(zhuǎn)換后存放的對象，不用輸入*/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; 
}; 
//轉(zhuǎn)換對象 
MvcParameterAdaptive.convertObject = function (/*對象名*/objName,/*待轉(zhuǎn)換的對象*/turnObj, /*轉(zhuǎn)換后存放的對象，不用輸入*/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("請指定數(shù)組名，對應(yīng)Action中數(shù)組參數(shù)名稱！"); 
if (MvcParameterAdaptive.isArray(json)) { 
return MvcParameterAdaptive.convertArrayToObject(arrName, json); 
} 
return MvcParameterAdaptive.convertObject("", json); 
}; 
})(); 

使用方法非常簡單，看下面的例子：
首先是客戶端的代碼

復(fù)制代碼代碼如下:

 
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")", 
/* 
在此使用閉包函數(shù)轉(zhuǎn)換json對象，如果你的json對象自身就是個(gè)數(shù)組Array， 
那么需要指定一個(gè)名稱，這個(gè)名稱對應(yīng)于Action中這個(gè)數(shù)組參數(shù)的名稱像這樣 
　　　　　　　　　　　　data:mvcParamMatch(sendData,"Action中所對應(yīng)的參數(shù)名稱") 
*/ 
data: mvcParamMatch(sendData), 
dataType: "json", 
type: "post", 
success:function(result) { 
alert(result.Message); 
}, 
error:function(a,b,c) { 
} 
}); 

然后是服務(wù)端對應(yīng)客戶端json的實(shí)體類

復(fù)制代碼代碼如下:

 
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代碼

復(fù)制代碼代碼如下:

 
public class TestController : Controller 
{ 
// 
// GET: /Test/ 
public ActionResult Index() 
{ 
return View(); 
} 
public ActionResult AjaxTest(Models.AjaxParamModels model) 
{ 
//在此可訪問model 
return Json(new {Message = "qqqqq"}); 
} 
} 

這樣就OK了，不管你這個(gè)json對象有多少復(fù)雜都沒關(guān)系，他會(huì)自動(dòng)轉(zhuǎn)換為服務(wù)端要求的格式，服務(wù)端再也不用操心了。

您可能感興趣的文章: