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對象有多少復雜都沒關系他會自動轉換為服務端要求的格式服務端再也不用操心了  
From:http://tw.wingwit.com/Article/program/net/201311/14186.html