asp.net中mvc使用ajax提交参数的匹配问题解决探讨

   2015-07-21 0
核心提示:本文为大家介绍下使用javaScript解决asp.net中mvc使用ajax提交参数的匹配问题,遇到类似情况的朋友可以参考下,希望对大家有所帮助
想到在asp.net的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组(或List集合)以及更复杂的对象时,服务端总是会发生取不到值的情况,当然网上也有很多解决的例子,但都是在服务端想办法来解决的(比如将json转换为字符串,再在服务端反序列化为一个对象),为何不能在客户端就把这个问题搞定。

其实问题没那么复杂,那是因为在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对象有多少复杂都没关系,他会自动转换为服务端要求的格式,服务端再也不用操心了。
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • EXT调用ASP.NET AJAX WebService
    Posted 周五, 04/11/2008 - 16:34 by admin 在asp.net ajax中,使客户端调用WebService变得非常的简单,而且非常有用(个人觉得这个功能是asp.net ajax的核心,很多与客户端的交互都需要这个功能来辅助实现)。那在EXT中,标准的客户端与服务器端交互,使用的
    02-09
  • ajax传数组后台GO语言接收
    js代码如下:function PostHandle(url,data,callback) {$.ajax({type: "Post",url:url,data:data,dataType:'json',async: false,success: callback});}var arr = new Array(); //arr是你想要传递的数组,自己定义即可 PostHandle("/getOriginalGrade",{ "arr&q
    02-09
  • ajax 报0错误 PHP Ajax 跨
    本以为在本地测试不会跨越,结果检查下来就是跨域的问题!!!!来源:https://www.cnblogs.com/xiezn/p/5651093.html 本文通过设置Access-Control-Allow-Origin来实现跨域。例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com。如果
    02-09
  • PHP解决ajax跨域的问题 ajax跨域的解决办法
    跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。同源策略:同源策略/SOP(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS
    02-09
  • asp.net 2.0 ajax中使用PopupControlExtender
     最近在著名的4guysfromrolla.com(http://www.4guysfromrolla.com)上,有篇不错的文章(http://aspnet.4guysfromrolla.com/articles/070407-1.aspx),讲的是如何使用aspajx中的controltookit中的PopupControlExtender控件来实现一些特殊的效果,比如文中举了
    02-09
  • 在asp.net中使用ajaxpro与一般页面的区别
    1.一般页面:Server.UrlEncode,Ajaxpro:HttpUtility.UrlEncode一般页面:Server.UrlDecode,Ajaxpro:HttpUtility.UrlDecode2.Server.MapPath的使用Ajaxpro:最好是从网站根目录来取 一般页面:  string strPath = Server.MapPath("../xslt/trans.xslt");-
    02-09
  • Asp.net Ajax的start和web.config配置
    微软于2006年11月9日发布了ASP.NET AJAX 1.0 Beta 2 从最初的 Atlas 到 ASP.NET AJAX 1.0 Beta 1 再到 Beta 2 ,这一个基于.NET 的 AJAX 框架已经趋于完整,越来越多的.NET开发者也开始使用这套框架所提供的强大功能建立自己的AJAX应用,在从使用Atlas到AS
    02-09
  • asp.net ajax get 调用(和post不一样,直接返回
    script type="text/javascript" $(document).ready(function () {$('#Label1').click(function () {$.ajax({type: 'GET',url: 'djb.aspx?sfzh=' + '3720510',dataType: 'json',success: function (data) { //不需
    02-09
  • ajaxFileUpload + lua-resty-upload 上传文件
    ajaxFileUpload下载地址地址:http://pan.baidu.com/s/1mgJypz6html页面!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"/titleUntitled/titlescript src=&qu
    02-08
  • ajax调用php失败如何解决 ajax请求失败处理方式
    这篇文章主要讲解了“ajax调用php失败如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ajax调用php失败如何解决”吧!ajax调用php失败是因为ajax只能发起GET请求,而不能发POST请求,否则报500错
    02-08 ajaxphp
点击排行