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 模拟气泡屏保效果代码
Jul 10 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
vue 自定义组件的写法与用法详解
Mar 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
解析zend Framework如何自动加载类
2013/06/28 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php生成gif动画的方法
2015/11/05 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
python实现百度关键词排名查询
2014/03/30 Python
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
TensorFlow实现Logistic回归
2018/09/07 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
iPython pylab模式启动方式
2020/04/24 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
python 如何在测试中使用 Mock
2021/03/01 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
入团者的自我评价分享
2013/12/02 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
大学生创业计划书
2019/06/24 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers