使用javaScript解决asp.net中mvc使用ajax提交数组参数的匹配问题
2014-04-14 09:37
726 查看
本文转载:http://blog.csdn.net/sq111433/article/details/9360111
想到在asp.net的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组(或List集合)以及更复杂的对象时,服务端总是会发生取不到值的情况,当然网上也有很多解决的例子,但都是在服务端想办法来解决的(比如将json转换为字符串,再在服务端反序列化为一个对象),为何不能在客户端就把这个问题搞定。
其实问题没那么复杂,那是因为在jquery提交Array的数据时,提交的时候始终会在名称后面加上”[]”, 问题就出在这里。另外在服务端对数组和内嵌的js对象进行解析时,需要像这样的格式,比如数组(或List集合)在服务端需要这样{'xxx[0]':'aaa','xxx[1]':'bbb'}的格式,而内嵌对象需要像这样{'xxx.a':'ddd','xxx.b':'hhh'},找到问题的原因就好解决了,如果我们能将json的格式转换为服务端了能够识别的格式,问题岂不迎刃而解。
说干就干,直接上代码
[javascript] view
plaincopy
//用于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);
};
})();
使用方法非常简单,看下面的例子:
首先是客户端的代码
[javascript] view
plaincopy
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的实体类
[csharp] view
plaincopy
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代码
[csharp] view
plaincopy
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对象有多少复杂都没关系,他会自动转换为服务端要求的格式,服务端再也不用操心了。
想到在asp.net的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组(或List集合)以及更复杂的对象时,服务端总是会发生取不到值的情况,当然网上也有很多解决的例子,但都是在服务端想办法来解决的(比如将json转换为字符串,再在服务端反序列化为一个对象),为何不能在客户端就把这个问题搞定。
其实问题没那么复杂,那是因为在jquery提交Array的数据时,提交的时候始终会在名称后面加上”[]”, 问题就出在这里。另外在服务端对数组和内嵌的js对象进行解析时,需要像这样的格式,比如数组(或List集合)在服务端需要这样{'xxx[0]':'aaa','xxx[1]':'bbb'}的格式,而内嵌对象需要像这样{'xxx.a':'ddd','xxx.b':'hhh'},找到问题的原因就好解决了,如果我们能将json的格式转换为服务端了能够识别的格式,问题岂不迎刃而解。
说干就干,直接上代码
[javascript] view
plaincopy
//用于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);
};
})();
使用方法非常简单,看下面的例子:
首先是客户端的代码
[javascript] view
plaincopy
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的实体类
[csharp] view
plaincopy
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代码
[csharp] view
plaincopy
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对象有多少复杂都没关系,他会自动转换为服务端要求的格式,服务端再也不用操心了。
相关文章推荐
- 使用javaScript解决asp.net中mvc使用ajax提交数组参数的匹配问题
- 使用javaScript解决asp.net中mvc使用ajax提交数组参数的匹配问题
- asp.net中mvc使用ajax提交参数的匹配问题解决探讨
- 解决JavaScript中使用$.ajax方式提交数组参数
- 解决JavaScript中使用$.ajax方式提交数组参数
- 关于Microsoft ASP.NET 2.0 AJAX Extensions UpdatePanel 中使用 javascript 产生错误的问题
- asp.net MVC 使用Ajax.BeginForm 无刷新提交from表单
- ASP.NET AJAX Advance Tips & Tricks (10) 解决使用AJAX Extender时的页面导出(Word/Excel)问题(Extender control 'XXX' is not a registered extender control)
- ASP.Net MVC——DotNetZip简单使用,解决文件压缩问题。
- 使用Newtonsoft.json 解决 Asp.Net MVC DateTime类型数据Json格式化问题
- ASP.Net MVC_DotNetZip简单使用方法,解决文件压缩的问题
- ASP.NET中TextBox使用Ajax控件显示日期不全的问题解决方法
- Asp.Net Mvc 4 使用Ajax 遇到的问题
- ASP.Net MVC_DotNetZip简单使用方法,解决文件压缩的问题
- 关于AJAX调用ASP.NET MVC 或者WEBAPI项目提示I跨域问题的解决办法
- Asp.net MVC 3 Razor 视图引擎 中使用@输出的内容都会被自动进行HTML编码 问题的解决办法
- 如何解决Asp.Net Ajax 1.0跨域名框架情况下javascript“访问拒绝”的问题[翻译]
- ASP.NET AJAX Advance Tips & Tricks (10) 解决使用AJAX Extender时的页面导出(Word/Excel)问题(Extender control 'XXX'
- asp.net mvc使用的心得和问题的解决方法(陆续更新ing)