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 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
jQuery DOM操作实例
Mar 05 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
webpack4.0打包优化策略整理小结
Mar 30 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
各种战术和打法的原创者
2020/03/04 星际争霸
php使用递归计算文件夹大小
2014/12/24 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
php实现URL加密解密的方法
2016/11/17 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python字典操作简明总结
2015/04/13 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
什么是Python包的循环导入
2020/09/08 Python
艺术用品:Arteza
2018/11/25 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
Java编程面试题
2016/04/04 面试题
JPA的优势都有哪些
2013/07/04 面试题
大学生先进事迹材料
2014/02/16 职场文书
爱情寄语大全
2014/04/09 职场文书
初中生期末评语大全
2014/04/24 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
民间个人借款协议书
2014/09/30 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python