• js代码生成form,解决mvc的url参数过长问题


      在MVC项目中,通常下载的文件的简单方式是直接采用 location.href+查询参数方式。

    1 var searchParams = {
    2                     studentName: $("#StudentName").val(),
    3                     birthDate: $("#BirthDate").val()
    4                 };
    5  var baseurl = "@Url.Action("ExportData", "Student")";
    6 location.href = baseurl + "?" + $.param(searchParams);
    View Code

    但是对于查询参数过长时url就会出错,因为IE浏览器对URL的最大限制为2083个字符,如果超过这个数字,提交按钮没有任何反应。对于Firefox浏览器URL的长度限制为65,536个字符,但当我测试时,最大只能处理8182个字符,这是因为url的长度除了浏览器限制外,还会受Web服务器的限制。注:可能有些朋友会想当然的认为,如果最大长度限制为2038字符,是不是参数差不多可以传递1000个左右的汉字。这样认为其实是不对的,对于中文的传 递,最终会为urlencode后的编码形式进行传递,如果浏览器的编码为UTF8的话,一个汉字最终编码后的字符长度为9个字符。(此段话引用URL最大长度问题,非常感谢)

    所有楼主改用form提交,由于系统有多个页面存在导出文件功能,并且一个页面也存在导出存在多个Excel的情况,故写了个插件,有啥意见和建议欢迎批评改正。

    原始的方式:提前在界面先定义好form,当用户点击时提及。

    //原生写法
    <form method="POST" action="@Url.Action("ExportData", "Student")" id="exportForm">
        <input type="hidden" id="studentName" name="studentName" />
        <input type="hidden" id="birthDate" name="birthDate" />
    </form>
     //MVC封装好的方法
    @Html.BeginForm("ExportData", "Student", FormMethod.Post, new { id = "exportForm" }) {
        <input type="hidden" id="stationCodes" name="stationCodes" />
            <input type="hidden" id="studentName" name="studentName" />
            <input type="hidden" id="birthDate" name="birthDate" />
            }
    View Code

    封装好的插件: var

     1 /* 导出excel
     2 11.13.2014 - LQZ - 全选站点url过长ie超过2083个字符将报错,将所有url整合成form提交
     3 */
     4 ;(function() {
     5     var instance;
     6     window.GridExportOperate = function () {
     7         if (instance) {
     8             return instance;
     9         }
    10         instance = this;
    11         this.gridexport = function(formPara, formId, formUrl) {
    12             if (!$("#" + formId).length) {
    13                 var form = document.createElement("form");
    14                 form.type = "post";
    15                 //form.style.display = "none";
    16                 document.body.appendChild(form);
    17                 form.action = formUrl;
    18                 for (item in formPara)
    19                     createInput(form, "hidden", item, formPara[item]);
    20                 form.submit();
    21             } else {
    22                 for (item in formPara)
    23                     changeInput(item, formPara[item]);
    24                 $("#" + formId).submit();
    25             }
    26         };
    27         
    28         function createInput(form, type, name, value) {
    29             var tmpInput = document.createElement("input");
    30             tmpInput.type = type;
    31             tmpInput.name = name;
    32             tmpInput.value = value;
    33             form.appendChild(tmpInput);
    34         }
    35         function changeInput(name, value) {
    36             $('#' + name).val(value);
    37         }
    38     };
    39 })(jQuery);
    View Code

    调用方法创建类的实例后调用。

      var gridxportOperate = new GridExportOperate();
    
    gridxportOperate.gridexport(formPara, formId, baseurl);
    View Code
  • 相关阅读:
    vuex
    koa2+node+vue自启服务运行本地脚本
    重新认识js(一)
    JQuery图片左右无缝滚动
    javascript兼容性很好的省市区联动,易修改
    JQuery超级简单的TAB选项卡
    ViewState的原理分析
    JQuery图片切换特效
    asp.net验证控件详解【转】
    时间线 制作
  • 原文地址:https://www.cnblogs.com/YEKEYISHUO/p/4095621.html
Copyright © 2020-2023  润新知