jquery配合.NET實(shí)現(xiàn)點(diǎn)擊指定綁定數(shù)據(jù)并且能夠一鍵下載
最近在做培訓(xùn)管理系統(tǒng)中遇到一個(gè)問題,需求需點(diǎn)擊綁定的數(shù)據(jù),將指定的附件下載下來,并且是批量下載(綁定的數(shù)據(jù)非datagrid,后臺(tái)拼接的綁定)。
效果圖如下:
大體思路:
1.jquery得到選中的綁定數(shù)據(jù)的id,將這個(gè)id賦值到數(shù)組中,最后將這個(gè)數(shù)組的值賦值給頁面中創(chuàng)建的隱藏變量
2.后臺(tái)獲取到隱藏變量的值,并將它循環(huán)數(shù)組取值,得到綁定值的下載地址,最后打包下載
首先html中div根據(jù)后臺(tái)綁定
<div id="downloadInfo" runat="server"></div>
其次是下載附件的選擇,利用jquery實(shí)現(xiàn),并且將值賦值給頁面中的隱藏變量,代碼如下:
// 下載附件的選擇 $attach = $("#download-list"); var arr = [] $attach.on('click', '.no', function () { $(this).toggleClass('checked');//設(shè)置和移除,選中與不選中 if ($(this).hasClass('checked')) { var guid = $(this).children("#hidAttachGuid").val(); arr.push(guid);//將guid添加到arr數(shù)組中 } else {//取消選中時(shí) var guid = $(this).children("#hidAttachGuid").val(); var n = arr.indexOf(guid); if (n != -1) arr.splice(n, 1);//將指定不選中的guid移除arr數(shù)組 } $("[id$='arrayGuid']").val(arr); });
因?yàn)槭呛笈_(tái)拼接的,把button也拼接在了后臺(tái),后臺(tái)button 調(diào)用js
<button type='button' class='one-download' onclick='download()'>一鍵下載</button> function download() { $("#btnDownload").click(); }
js觸發(fā)隱藏button事件
<span style="display: none"> <asp:Button ID="btnDownload" OnClick="btnDownload_Click" Text="確定" runat="server" /> <input type="text" id="arrayGuid" runat="server" /> </span>
后臺(tái)一鍵打包下載代碼:
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) { //這里是循環(huán)得到指定需要下載的所有id } Download(list, ""+lblCourseName.Text+"相關(guān)附件材料.rar"); }
public void ZipFileByCode() { MemoryStream ms = new MemoryStream(); byte[] buffer = null; using (ZipFile file = ZipFile.Create(ms)) { file.BeginUpdate(); file.NameTransform = new MyNameTransfom();//通過這個(gè)名稱格式化器,可以將里面的文件名進(jìn)行一些處理。默認(rèn)情況下,會(huì)自動(dòng)根據(jù)文件的路徑在zip中創(chuàng)建有關(guān)的文件夾。 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) { //根據(jù)所選文件打包下載 MemoryStream ms = new MemoryStream(); byte[] buffer = null; using (ZipFile file = ZipFile.Create(ms)) { file.BeginUpdate(); file.NameTransform = new MyNameTransfom();//通過這個(gè)名稱格式化器,可以將里面的文件名進(jìn)行一些處理。默認(rèn)情況下,會(huì)自動(dòng)根據(jù)文件的路徑在zip中創(chuàng)建有關(guān)的文件夾。 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 }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
利用JQuery操作iframe父頁面、子頁面的元素和方法匯總
這篇文章主要給大家介紹了關(guān)于利用JQuery操作iframe父頁面、子頁面的元素和方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09jquery實(shí)現(xiàn)智能感知連接外網(wǎng)搜索
注意引用的插件及順序;搜索獲取選擇的值,智能感知連接外網(wǎng)搜索,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對(duì)你大家有所幫助2013-05-05基于jQuery的遍歷同id元素 并響應(yīng)事件的代碼
寫網(wǎng)頁的時(shí)候,腳本循環(huán)的時(shí)候有很多時(shí)候都會(huì)循環(huán)出來同id的網(wǎng)頁元素,下面貼出來代碼,如何利用jQuery對(duì)這些元素進(jìn)行逐一遍歷并可響應(yīng)消息2012-06-06JQuery里面的幾種選擇器 查找滿足條件的元素$("#控件ID")
JQuery里面的幾種選擇器 查找滿足條件的元素$("#控件ID"),使用jquery的朋友可以參考下。2011-08-08Jquery實(shí)現(xiàn)兼容各大瀏覽器的Enter回車切換輸入焦點(diǎn)的方法
本文主要講解的是在做項(xiàng)目中遇到需要Enter回車切換輸入焦點(diǎn)的解決思路以及最終解決方案,很簡(jiǎn)單,需要的朋友可以參考下2014-09-09jQuery遮罩層實(shí)現(xiàn)方法實(shí)例詳解(附遮罩層插件)
這篇文章主要介紹了jQuery遮罩層實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery遮罩層樣式及功能實(shí)現(xiàn)技巧,并附帶分析了一個(gè)簡(jiǎn)單jQuery遮罩層插件實(shí)現(xiàn)方法,需要的朋友可以參考下2015-12-12webpack中引用jquery的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄獁ebpack中引用jquery的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06jquery之別踩白塊游戲的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨query之別踩白塊游戲的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2016-07-07