English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

jQuery with .NET Implementation of Click Binding Data and One-click Download

Recently, while working on a training management system, I encountered a problem. The requirement is to click the bound data to download the specified attachment, and it is a batch download (the bound data is not a datagrid, and it is bound by the backend).

The effect diagram is as follows:

Overall idea:

1.jQuery gets the id of the selected binding data, assigns this id to the array, and finally assigns the value of this array to the hidden variable created on the page

2.The backend gets the value of the hidden variable and loops through the array to get the binding value of the download address, and finally packages it for download

First, the div in html is bound by the backend

 <div id="downloadInfo" runat="server"></div>

 The next step is to select the download of attachments, implemented using jQuery, and the value is assigned to the hidden variable on the page, as follows:
 

// Selection of downloading attachments
  $attach = $("#download-list");
  var arr = []
  $attach.on('click', '.no', function () {
    $(this).toggleClass('checked');//Set and remove, select and deselect
    if ($(this).hasClass('checked')) {
      var guid = $(this).children("#hidAttachGuid").val();
      arr.push(guid);//Add guid to the arr array
    }
    else
    {//When deselecting
      var guid = $(this).children("#hidAttachGuid").val();
      var n = arr.indexOf(guid);
      if (n != -1)
      arr.splice(n, 1);//Remove the specified unselected guid from the arr array
    }
    $("[id$='arrayGuid']").val(arr);
  });

Since it is concatenated on the backend, the button is also concatenated on the backend, and the backend button calls js

<button type='button' class='one-download' onclick='download()'>One-click Download</button>
function download() {
      $("#btnDownload").click();
    }

js triggers the event to hide the button

<span style="display: none">
   <asp:Button ID="btnDownload" OnClick="btnDownload_Click" Text="确定" runat="server"> />
    <input type="text" id="arrayGuid" runat="server"}} />
</span>

Background one-click packing and downloading code:

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)
      {
        //This is the loop to get all the specified download IDs
      }
      Download(list, ""+lblCourseName.Text+"Related attachment materials.rar");
    }
public void ZipFileByCode()
    {
      MemoryStream ms = new MemoryStream();
      byte[] buffer = null;
      using (ZipFile file = ZipFile.Create(ms))
      {
        file.BeginUpdate();
        file.NameTransform = new MyNameTransfom();//Through this name formatter, some processing can be performed on the filenames inside. By default, it will automatically create related folders in the zip according to the file path.
        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)
    {
      //Pack and download according to the selected files 
      MemoryStream ms = new MemoryStream();
      byte[] buffer = null;
      using (ZipFile file = ZipFile.Create(ms))
      {
        file.BeginUpdate();
        file.NameTransform = new MyNameTransfom();//Through this name formatter, some processing can be performed on the filenames inside. By default, it will automatically create related folders in the zip according to the file path. 
        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();
    }

Same level code as pageload

public class MyNameTransfom : ICSharpCode.SharpZipLib.Core.INameTransform
  {
    #region INameTransform Member
    public string TransformDirectory(string name)
    {
      return null;
    }
    public string TransformFile(string name)
    {
      return Path.GetFileName(name);
    }
    #endregion
  }

That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Yelling Tutorial more.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report any violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.

You May Also Like