如何处理：下载文件的按钮在事件未完成之前防止多次点击，事件完成之后又能继续点击提交

这几天真的非常不容易，搞定了一个很困难的问题。

问题：一个导出文件的按钮，在点击之后且事件未完成之前，不能再点击第二次，就算点击第二次，后台也不能响应两次。但是当这个事件处理完后，又可以再次点击。

由于一般的导出功能在.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万+

私信关注

如何处理：下载文件的按钮在事件未完成之前防止多次点击，事件完成之后又能继续点击提交

vue项目获取富文本编辑器wangEditor内容导出为word（html转word格式并下载）

dotnet C# 创建 X11 应用时设置窗口背景颜色

Navicat安装与激活教程

TDengine docker安装方法

vue3组件通信与props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的发布时间

工作中用到的脚本合集

合并代码时Beyond Compare设置

動態添加JS 事件

來自微軟的純CSS下拉菜單

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

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

autoNumeric alt用法

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

linux以太網驅動總結