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 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 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 Session机制简介及用法
2014/08/19 PHP
Django 中 cookie的使用
2017/08/17 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
angular.bind使用心得
2015/10/26 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
numpy.where() 用法详解
2019/05/27 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
建筑文秘专业个人求职信范文
2013/12/28 职场文书
司机职责范本
2014/03/08 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
2014年测量员工作总结
2014/12/12 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
nginx设置资源请求目录的方式详解
2022/05/30 Servers