zoukankan      html  css  js  c++  java
  • ASP.NET MVC 后台接收集合参数和 jquery ajax 传值

    MVC 接收参数数组(集合)
     
    示例样本:
     
    public class Person
    {
         public string FirstName { get; set; }
         public string LastName { get; set; }
         ...
    }
     
    // ASP.NET MVC 
    [HttpPost]
    public ActionResult Create(List<Person> persons)
    {
         // doSomething.
    }
     
         ASP.NET MVC 后台 "Create" Action 中要接收 "persons" 参数集合,实际上要传入参数格式为:
         "persons[0].FirstName=yang1&persons[0].LastName=gang1&persons[1].FirstName=yang2&persons[1].LastName=gang2 ..." 或是(
    "persons[0][FirstName]=yang1&persons[0][LastName]=gang1&persons[1][FirstName]=yang2&persons[1][LastName]=gang2 ..." 格式),这样 MVC 后台才能解析参数并将值正确地绑定到指定 persons 参数实体上。
     
         也可以使用 "[0].FirstName=yang1&[0].LastName=gang1&[1].FirstName=yang2&[1].LastName=gang2 ..." 或是(
    "[0][FirstName]=yang1&[0][LastName]=gang1&[1][FirstName]=yang2&[1][LastName]=gang2 ..." 格式)
    等没有前缀数组,这样 Action 中的参数名可自定义指定。在 Action 参数只要唯一一个时很好用。
     
         值得注意的是,这种以类似于数组形式传递的参数,初始基数必须为 0, 且基数值必须连续,不然后续的值会被丢失。举个例子:有参数 [0]、 [1]、 [2]、[4]、[5] ...  等一系列项数据,其中缺失 [3], 这样 Action 中参数最终值只有 [0]、[1] 和 [2] 三项,其他将被忽略。
     
         对于中 Action 中简单类型的参数集合,如 List<string>, List<int> 等,直接使用 "arg=1&arg=2&arg=3 ..." 即可。
     
    前端 form 提交
         
         form 中提交很简单,只要将 <input /> 等标签 name 参数设定为数组即可。
     
    <form action="..." method="post">
         // item1
         <input name="persons[0].FirstName" />
         <input name="persons[0].LastName" />
     
         // item2
         <input name="persons[1].FirstName" />
         <input name="persons[1].LastName" />
    </form>
     
         为了自定义 Action 中参数名(参数个数只有一个),也可以使用 [0].FirstName,[1].FirstName 等,如下:
     
    <form action="..." method="post">
         // item1
         <input name="[0].FirstName" />
         <input name="[0].LastName" />
     
         // item2
         <input name="[1].FirstName" />
         <input name="[1].LastName" />
    </form>
     
         其中,persons[0].FirstName 可设置为 persons[0][FirstName] 格式,同样 [0].FirstName 可设置为 [0][FirstName] 格式。
     
     
    前端 ajax 提交
     
    方式一
     
    var _list = {};
     
    for (var i = 0; i < length; i++) {
         _list["persons[" + i + "].FirstName"] = '..';
         _list["persons[" + i + "].LastName"] = '..';
    }
     
    $.ajax({
         url: '...',
         data: _list,
         dataType: "json",
         type: "POST",
         success: function (data) {
             // your logic
         }
    });
     
    方式二
     
    var _list = [];
     
    for (var i = 0; i < length; i++) {
         _list.push({ FirstName: "", LastName: "" });
    }
     
    $.ajax({
         url: '...',
         data: { "persons": _list },
         dataType: "json",
         type: "POST",
         success: function (data) {
             // your logic
         }
    });
     
         ajax 中都会对参数进行转换(jQuery.param() 方法),方式一中是直接将对象 key 和 value 串联起来,方式二中将对象中 value 的数组转换后拼接起来,最终效果如下。这两种方式生成的参数格式都满足 MVC 接收参数的数据格式。
     
     jQuery.post()
         jQuery.post()  是 jQuery.ajax()  post 方式的一种简便方式,使用上与调用底层 ajax 相同。
     
    jQuery.param() 方法
     
    var params = {
                    persons: [
                        { FirstName: "yang1", LastName: "gang1" },
                        { FirstName: "yang2", LastName: "gang2" }
                    ]
                };
    jQuery.param(params, false);
     
     
    输出结果为:
    persons%5B0%5D%5BFirstName%5D=yang1&persons%5B0%5D%5BLastName%5D=gang1&persons%5B1%5D%5BFirstName%5D=yang2&persons%5B1%5D%5BLastName%5D=gang2
     
    使用 decodeURIComponent 解析后为:
    persons[0][FirstName]=yang1&persons[0][LastName]=gang1&persons[1][FirstName]=yang2&persons[1][LastName]=gang2
     
    可以看出,js 对象经过 jQuery.param() 方法转换后,满足上述 MVC 接收参数的数据格式。
     
    参考文章:
     
  • 相关阅读:
    JavaScript学习总结(三)——闭包、IIFE、原型、函数与对象
    JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
    CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
    CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
    CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
    CSS3与页面布局学习总结(四)——页面布局大全
    CSS3与页面布局学习总结(五)——Web Font与Sprite
    CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
    CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
    HTML5 学习总结(四)——canvas绘图、WebGL、SVG
  • 原文地址:https://www.cnblogs.com/god--love-you/p/6028235.html
Copyright © 2011-2022 走看看