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

其實問題沒那么復雜，那是因為在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": 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的實體類 
 代碼如下:

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對象有多少復雜都沒關系，他會自動轉換為服務端要求的格式，服務端再也不用操心了。
 
 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com