jquery配合.NET实现点击指定绑定数据并且能够一键下载


Posted in Javascript onOctober 28, 2016

最近在做培训管理系统中遇到一个问题,需求需点击绑定的数据,将指定的附件下载下来,并且是批量下载(绑定的数据非datagrid,后台拼接的绑定)。

效果图如下:

jquery配合.NET实现点击指定绑定数据并且能够一键下载

大体思路:

1.jquery得到选中的绑定数据的id,将这个id赋值到数组中,最后将这个数组的值赋值给页面中创建的隐藏变量

2.后台获取到隐藏变量的值,并将它循环数组取值,得到绑定值的下载地址,最后打包下载

首先html中div根据后台绑定

<div id="downloadInfo" runat="server"></div>

 其次是下载附件的选择,利用jquery实现,并且将值赋值给页面中的隐藏变量,代码如下:
 

// 下载附件的选择
  $attach = $("#download-list");
  var arr = []
  $attach.on('click', '.no', function () {
    $(this).toggleClass('checked');//设置和移除,选中与不选中
    if ($(this).hasClass('checked')) {
      var guid = $(this).children("#hidAttachGuid").val();
      arr.push(guid);//将guid添加到arr数组中
      
    }
    else
    {//取消选中时
      var guid = $(this).children("#hidAttachGuid").val();
      var n = arr.indexOf(guid);
      if (n != -1)
      arr.splice(n, 1);//将指定不选中的guid移除arr数组
    }
    $("[id$='arrayGuid']").val(arr);
  });

因为是后台拼接的,把button也拼接在了后台,后台button 调用js

<button type='button' class='one-download' onclick='download()'>一键下载</button>
function download() {
      $("#btnDownload").click();
    }

js触发隐藏button事件

<span style="display: none">
   <asp:Button ID="btnDownload" OnClick="btnDownload_Click" Text="确定" runat="server" />
    <input type="text" id="arrayGuid" runat="server" />
</span>

后台一键打包下载代码:

protected void btnDownload_Click(object sender, EventArgs e)
    {
      //ZipFileByCode();
      string attachGuid = arrayGuid.Value;
      string[] sArray = attachGuid.Split(',');

     
      List<string> list = new List<string>();
      foreach (string i in sArray)
      {
        //这里是循环得到指定需要下载的所有id
 
      }

      Download(list, ""+lblCourseName.Text+"相关附件材料.rar");
    }
public void ZipFileByCode()
    {
      MemoryStream ms = new MemoryStream();
      byte[] buffer = null;

      using (ZipFile file = ZipFile.Create(ms))
      {
        file.BeginUpdate();
        file.NameTransform = new MyNameTransfom();//通过这个名称格式化器,可以将里面的文件名进行一些处理。默认情况下,会自动根据文件的路径在zip中创建有关的文件夹。

        file.Add(Server.MapPath("/Content/images/img01.jpg"));
        file.CommitUpdate();

        buffer = new byte[ms.Length];
        ms.Position = 0;
        ms.Read(buffer, 0, buffer.Length);
      }


      Response.AddHeader("content-disposition", "attachment;filename=test.zip");
      Response.BinaryWrite(buffer);
      Response.Flush();
      Response.End();

    }
private void Download(IEnumerable<string> files, string zipFileName)
    {
      //根据所选文件打包下载 
      MemoryStream ms = new MemoryStream();
      byte[] buffer = null;
      using (ZipFile file = ZipFile.Create(ms))
      {
        file.BeginUpdate();
        file.NameTransform = new MyNameTransfom();//通过这个名称格式化器,可以将里面的文件名进行一些处理。默认情况下,会自动根据文件的路径在zip中创建有关的文件夹。 

        foreach (var item in files)
        {
          file.Add(item);
        }
        //file.Add(Server.MapPath("../../BigFileUpLoadStorage/1.png"));
        file.CommitUpdate();
        buffer = new byte[ms.Length];
        ms.Position = 0;
        ms.Read(buffer, 0, buffer.Length);
      }
      Response.AddHeader("content-disposition", "attachment;filename=" + zipFileName);
      Response.BinaryWrite(buffer);
      Response.Flush();
      Response.End();
    }

和pageload同层代码

public class MyNameTransfom : ICSharpCode.SharpZipLib.Core.INameTransform
  {

    #region INameTransform 成员

    public string TransformDirectory(string name)
    {
      return null;
    }

    public string TransformFile(string name)
    {
      return Path.GetFileName(name);
    }

    #endregion
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
微信小程序 页面跳转传参详解
Oct 28 #Javascript
微信小程序 wx:key详细介绍
Oct 28 #Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 #Javascript
基于Layer+jQuery的自定义弹框
May 26 #Javascript
微信开发 js实现tabs选项卡效果
Oct 28 #Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 #Javascript
Easyui的组合框的取值与赋值
Oct 28 #Javascript
You might like
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php算法实例分享
2015/07/14 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
jquery foreach使用示例
2013/09/12 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python遍历路径破解表单的示例
2020/11/21 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
大学专科生推荐信范文
2013/11/23 职场文书
社团活动策划书范文
2014/01/09 职场文书
军训自我鉴定100字
2014/02/13 职场文书
小学母亲节活动方案
2014/03/14 职场文书
就职演讲稿范文
2014/05/19 职场文书
开幕式邀请函
2015/01/31 职场文书
绵山导游词
2015/02/05 职场文书
地球一小时活动总结
2015/02/27 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
任命书格式模板
2015/09/22 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python