asp.net中mvc使用ajax提交參數(shù)的匹配問(wèn)題解決探討
其實(shí)問(wèn)題沒(méi)那么復(fù)雜,那是因?yàn)樵趈query提交Array的數(shù)據(jù)時(shí),提交的時(shí)候始終會(huì)在名稱后面加上”[]”, 問(wèn)題就出在這里。另外在服務(wù)端對(duì)數(shù)組和內(nèi)嵌的js對(duì)象進(jìn)行解析時(shí),需要像這樣的格式,比如數(shù)組(或List集合)在服務(wù)端需要這樣{'xxx[0]':'aaa','xxx[1]':'bbb'}的格式,而內(nèi)嵌對(duì)象需要像這樣{'xxx.a':'ddd','xxx.b':'hhh'},找到問(wèn)題的原因就好解決了,如果我們能將json的格式轉(zhuǎn)換為服務(wù)端了能夠識(shí)別的格式,問(wèn)題豈不迎刃而解。
說(shuō)干就干,直接上代碼
//用于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)換為對(duì)象
MvcParameterAdaptive.convertArrayToObject = function (/*數(shù)組名*/arrName, /*待轉(zhuǎn)換的數(shù)組*/array, /*轉(zhuǎn)換后存放的對(duì)象,不用輸入*/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)換對(duì)象
MvcParameterAdaptive.convertObject = function (/*對(duì)象名*/objName,/*待轉(zhuǎn)換的對(duì)象*/turnObj, /*轉(zhuǎn)換后存放的對(duì)象,不用輸入*/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("請(qǐng)傳入json對(duì)象");
if (MvcParameterAdaptive.isArray(json) && !arrName) throw new Error("請(qǐng)指定數(shù)組名,對(duì)應(yīng)Action中數(shù)組參數(shù)名稱!");
if (MvcParameterAdaptive.isArray(json)) {
return MvcParameterAdaptive.convertArrayToObject(arrName, json);
}
return MvcParameterAdaptive.convertObject("", json);
};
})();
使用方法非常簡(jiǎn)單,看下面的例子:
首先是客戶端的代碼
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對(duì)象,如果你的json對(duì)象自身就是個(gè)數(shù)組Array,
那么需要指定一個(gè)名稱,這個(gè)名稱對(duì)應(yīng)于Action中這個(gè)數(shù)組參數(shù)的名稱像這樣
data:mvcParamMatch(sendData,"Action中所對(duì)應(yīng)的參數(shù)名稱")
*/
data: mvcParamMatch(sendData),
dataType: "json",
type: "post",
success:function(result) {
alert(result.Message);
},
error:function(a,b,c) {
}
});
然后是服務(wù)端對(duì)應(yīng)客戶端json的實(shí)體類
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)
{
//在此可訪問(wèn)model
return Json(new {Message = "qqqqq"});
}
}
這樣就OK了,不管你這個(gè)json對(duì)象有多少?gòu)?fù)雜都沒(méi)關(guān)系,他會(huì)自動(dòng)轉(zhuǎn)換為服務(wù)端要求的格式,服務(wù)端再也不用操心了。
- asp.net“服務(wù)器應(yīng)用程序不可用” 解決方法
- ASP.NET MVC運(yùn)行出現(xiàn)Uncaught TypeError: Cannot set property __MVC_FormValidation of null的解決方法
- ASP.NET MVC使用Ajax的輔助的解決方法
- ASP.NET MVC中解析淘寶網(wǎng)頁(yè)出現(xiàn)亂碼問(wèn)題的解決方法
- 使用asp.net MVC4中的Bundle遇到的問(wèn)題及解決辦法分享
- ASP.NET在MVC中MaxLength特性設(shè)置無(wú)效的解決方法
- asp.net mvc3.0安裝失敗如何解決
- 解決asp.net mvc UpdateModel更新對(duì)象后出現(xiàn)null問(wèn)題的方法
- ASP.NET MVC命名空間時(shí)引起錯(cuò)誤的解決方法
- 解決Asp.net Mvc返回JsonResult中DateTime類型數(shù)據(jù)格式問(wèn)題的方法
相關(guān)文章
簡(jiǎn)述Ajax的優(yōu)點(diǎn)與缺點(diǎn)
這篇文章主要介紹了Ajax的優(yōu)點(diǎn)與缺點(diǎn)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11
基于bootstrap的上傳插件fileinput實(shí)現(xiàn)ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽)
這篇文章主要介紹了基于bootstrap的上傳插件fileinput 的ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
Ajax異步請(qǐng)求的五個(gè)步驟及實(shí)戰(zhàn)案例
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新,下面這篇文章主要給大家介紹了關(guān)于Ajax異步請(qǐng)求的五個(gè)步驟及實(shí)戰(zhàn)案例的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
[ASP.NET Ajax] ECMAScript基礎(chǔ)類以及Asp.net Ajax對(duì)類<Object&a
[ASP.NET Ajax] ECMAScript基礎(chǔ)類以及Asp.net Ajax對(duì)類<Object>的擴(kuò)展...2007-01-01
IE7下ajax之open Method New的說(shuō)明
IE7下ajax之open Method New的說(shuō)明...2007-06-06
重寫(xiě) ajax 實(shí)現(xiàn) session 超時(shí)跳轉(zhuǎn)到登錄頁(yè)面實(shí)例代碼
這篇文章主要介紹了重寫(xiě) ajax 實(shí)現(xiàn) session 超時(shí)跳轉(zhuǎn)到登錄頁(yè)面實(shí)例代碼,需要的朋友可以參考下2017-05-05
多ajax請(qǐng)求的各類解決方案(同步, 隊(duì)列, cancel請(qǐng)求)
ajax帶來(lái)很好的用戶體驗(yàn),于是一個(gè)稍微注重web系統(tǒng)使用ajax基本成為必然。當(dāng)傳統(tǒng)功能型web項(xiàng)目向用戶體驗(yàn)型項(xiàng)目轉(zhuǎn)變時(shí),層出不窮的需求就來(lái)了。正如本篇所介紹的就是一個(gè)多個(gè)AJAX請(qǐng)求的情況下,如何利用jquery來(lái)處理幾種case2012-03-03

