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实现兼容IE6与IE7的DIV高度
May 13 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
js键盘事件的keyCode
Jul 29 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
微信小程序 页面跳转传参详解
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会员系统的登陆即权限判断实现代码
2011/09/23 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PDO::commit讲解
2019/01/27 PHP
JavaScript prototype属性深入介绍
2012/11/27 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
基于 Node.js 实现前后端分离
2016/04/23 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
js变量提升深入理解
2016/09/16 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
python迭代器与生成器详解
2016/03/10 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python socket实现简单聊天室
2018/04/01 Python
Django学习之文件上传与下载
2019/10/06 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
家长会演讲稿范文
2014/01/10 职场文书
银行批评与自我批评
2014/02/10 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
迁户口计划生育证明
2014/10/19 职场文书
鲁迅故里导游词
2015/02/05 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
python对文档中元素删除,替换操作
2022/04/02 Python
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python