如何處理：下載文件的按鈕在事件未完成之前防止多次點擊，事件完成之後又能繼續點擊提交

這幾天真的非常不容易，搞定了一個很困難的問題。

問題：一個導出文件的按鈕，在點擊之後且事件未完成之前，不能再點擊第二次，就算點擊第二次，後臺也不能響應兩次。但是當這個事件處理完後，又可以再次點擊。

由於一般的導出功能在.net 中都是用Response，它是直接將數據輸出在客戶端頁面上了，也就是說此頁面不會再重新生成（不繼續原來的生命週期），導致點擊的事件完成之後，按鈕的樣式和事件有些就無法回到最初的狀態，這是個非常嚴重的問題。有的時候是點擊的事件完成過程中雖防止多次點擊提交，但是完成後，卻無法再點擊按鈕；有的時候按鈕完成事件能多次點擊，可是卻無法防止多次提交。

最後還是選擇在點擊按鈕之後加一個層來達到防止多次提交的目的。

頁面代碼：其中Button1是實現該效果的

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestBlock.aspx.cs" Inherits="WebSample.TestBlock" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <mce:style></mce:style><style mce_bogus="1"> #msgDiv { z-index:10001; width:500px; height:400px; background:white; border:#336699 1px solid; position:absolute; left:50%; top:20%; font-size:12px; margin-left:-225px; display: none; } #bgDiv { display: none; position: absolute; top: 0px; left: 0px; right:0px; background-color: #777; filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75) opacity: 0.6; } </style> <mce:script language="javascript" type="text/javascript" src="JavaScript/jquery-1.4.2.min.js" mce_src="JavaScript/jquery-1.4.2.min.js"></mce:script> <mce:script language="javascript" type="text/javascript" src="JavaScript/jquery.blockUI.js" mce_src="JavaScript/jquery.blockUI.js"></mce:script> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <div id="msgDiv"> <div id="msgShut">關閉</div> <div id="msgDetail"></div> </div> <div id="bgDiv"></div> <div id="div1"> <asp:Button ID="Button1" runat="server" Text="Button" οnclick="Button1_Click" /> <asp:TextBox ID="tbxFileName" runat="server"></asp:TextBox> <asp:Button ID="tbxExport" runat="server" Text="Export" οnclick="tbxExport_Click" /> </div> <div id="divTest">aa</div> </form> </body> </html>

注：曾經選擇用BlockUI.js來實現（被註釋掉的），發現其是在彈出下載文件的窗口之後才起反應，這就無法防止多次提交的目的，被拋棄了，一個多好的JS插件啊

WriteFileHandler.ashx:

public void ProcessRequest(HttpContext context) { string responseText = string.Empty; int fairId = int.Parse(context.Request["FairId"]); string fileName = Guid.NewGuid().ToString() + ".txt"; try { if (fairId != 4) { FileInfo fi = new FileInfo(context.Server.MapPath("DownLoad") + "//" + fileName); if (!fi.Exists) { using (StreamWriter sw = fi.CreateText()) { sw.WriteLine("abcdisgeg"); sw.Close(); } } responseText = fileName; } else { responseText = "N"; } } catch (Exception ex) { Console.WriteLine(ex.Message); responseText = "Error"; } finally { context.Response.Clear(); context.Response.ContentType = "application/json"; context.Response.ContentEncoding = System.Text.Encoding.UTF8; //Response.Expires = -1; // context.Response.Write("{fileName:'" + responseText + "'}"); context.Response.Write(responseText); } }

頁面的後臺代碼：（我測試的是Button1這個按鈕，其他的按鈕我就沒測了）

protected void Button1_Click(object sender, EventArgs e) { string fileName = "asd.txt"; string filePath = Server.MapPath("DownLoad") + "//" + tbxFileName.Text; // string filePath = Server.MapPath("DownLoad") + "//6c6fdc6c-e67d-4230-8891-85f3b95f4771.txt"; FileInfo fileInfo = new FileInfo(filePath); Response.Clear(); Response.ClearContent(); Response.ClearHeaders(); Response.AddHeader("Content-Disposition", "attachment;filename=" + fileName); Response.AddHeader("Content-Length", fileInfo.Length.ToString()); Response.AddHeader("Content-Transfer-Encoding", "binary"); Response.ContentType = "application/octet-stream"; Response.ContentEncoding = System.Text.Encoding.GetEncoding("gb2312"); Response.WriteFile(fileInfo.FullName); Response.Flush(); Response.End(); // tbxFileName.Text = "1324"; } protected void tbxExport_Click(object sender, EventArgs e) { string fileName = "asd.txt"; string filePath = Server.MapPath("DownLoad") + "//6c6fdc6c-e67d-4230-8891-85f3b95f4771.txt"; FileInfo fileInfo = new FileInfo(filePath); Response.Clear(); Response.ClearContent(); Response.ClearHeaders(); Response.AddHeader("Content-Disposition", "attachment;filename=" + fileName); Response.AddHeader("Content-Length", fileInfo.Length.ToString()); Response.AddHeader("Content-Transfer-Encoding", "binary"); Response.ContentType = "application/octet-stream"; Response.ContentEncoding = System.Text.Encoding.GetEncoding("gb2312"); Response.WriteFile(fileInfo.FullName); // Response.Flush(); Response.End(); }

這個層的設計好的地方就是不僅能禁止用戶點擊，而且還能再反應完後點關閉回到原來的頁面狀態

莫疏

發佈了34 篇原創文章 · 獲贊 1 · 訪問量 15萬+

私信關注

如何處理：下載文件的按鈕在事件未完成之前防止多次點擊，事件完成之後又能繼續點擊提交

10分鐘搞定Mysql主從部署配置

如何使用 JS 判斷用戶是否處於活躍狀態

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

lightdb數據庫超時相關控制參數

lightdb秒級增加列和刪除列（not null帶默認值）

Java ThreadPoolShutdown

動態添加JS 事件

來自微軟的純CSS下拉菜單

輸入型頁面保存時遮罩效果避免再次提交的方法

C#中4種方式讀取配置項

autoNumeric alt用法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結