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实现ASP分页函数 HTML分页函数
Sep 22 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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里得到前天和昨天的日期的代码
2007/08/16 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
windows下python安装小白入门教程
2018/09/18 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
python的slice notation的特殊用法详解
2019/12/27 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
高一地理教学反思
2014/01/18 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
五年级语文教学反思
2014/01/30 职场文书
实习报告评语
2014/04/26 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
会议通知
2015/04/15 职场文书
企业计划生育责任书
2015/05/09 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书