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文件中如何获取basePath处理js路径问题
Jul 10 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
vue实现表单录入小案例
Sep 27 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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里面的抽象类
2010/01/28 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
python抓取网页内容示例分享
2014/02/24 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python书籍信息爬虫实例
2018/03/19 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python函数定义和调用过程详解
2020/02/09 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
《日月潭》教学反思
2014/02/28 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
股指期货心得体会
2014/09/10 职场文书
六一儿童节标语
2014/10/08 职场文书
基层工作经验证明样本
2014/11/16 职场文书
自我检讨报告
2015/01/28 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python