• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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 ListAjax2> 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 ListAjax1> 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对象有多少复杂都没关系,他会自动转换为服务端要求的格式,服务端再也不用操心了。
    您可能感兴趣的文章:
    • asp.net“服务器应用程序不可用” 解决方法
    • ASP.NET MVC运行出现Uncaught TypeError: Cannot set property __MVC_FormValidation of null的解决方法
    • ASP.NET MVC使用Ajax的辅助的解决方法
    • ASP.NET MVC中解析淘宝网页出现乱码问题的解决方法
    • 使用asp.net MVC4中的Bundle遇到的问题及解决办法分享
    • ASP.NET在MVC中MaxLength特性设置无效的解决方法
    • asp.net mvc3.0安装失败如何解决
    • 解决asp.net mvc UpdateModel更新对象后出现null问题的方法
    • ASP.NET MVC命名空间时引起错误的解决方法
    • 解决Asp.net Mvc返回JsonResult中DateTime类型数据格式问题的方法
    上一篇:ajax 防止用户反复提交的2种解决方案
    下一篇:AJAX在不同浏览器中XMLHttpRequest对象的生成示例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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