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 相关文章推荐
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
Vue分页组件实例代码
Apr 17 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
js判断鼠标移入移出方向的方法
Jun 24 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
SSI指令
2006/11/25 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php use和include区别总结
2019/10/13 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
Vue发布项目实例讲解
2019/07/17 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
python if not in 多条件判断代码
2016/09/21 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
探亲假请假条
2014/04/11 职场文书
党员带头倡议书
2015/04/29 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js