ASP.NET防止连续多次点击提交按钮导致页面重复提交

2022-10-29 20:14:04

PS：实际使用中发现，第①种方法在火狐浏览中有时候有问题。第2种方法，在各个浏览器中都没问题

近做项目遇到了这样的情况：

公司网络比平常慢了不少，在点击保存按钮提交页面后需等待挺长的一段时间，忍不住手贱点多了几次，当提交完成后发现数据库竟多出了几条相同的数据！也就是说相同的内容提交了多次。

经测试，当网络很顺畅的时，快速连续不断点击提交按钮，也会造成页面重复提交！点击多少次就会提交多少次，也就会录入多少条数据！

当然，若录入的数据中有唯一值的判断处理或者数据表字段有唯一性约束,就不会出现录入重复数据的情况！

在网上找了一下，找到了两个经验证可行的方法。

第①种：

aspx页面按钮：

<asp:Button ID="btnSumbit" runat="server" Text="提交" onclick="btnSumbit_Click" />

Page_Load 事件：

btnSumbit.Attributes.Add("onclick", "this.disabled=true;" +this.ClientScript.GetPostBackEventReference(btnSumbit, ""));
//若使用了 ASP.NET验证控件则要保证客户端验证函数 Page_ClientValidate() 的执行，代码如下
//Page_ClientValidate() 函数用于在包含微软验证控件的aspx页面中（客户端js脚本），根据用户输入操作是否合法,返回True或者False
btnSumbit.Attributes.Add("onclick", "if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};this.disabled=true;" +this.ClientScript.GetPostBackEventReference(btnSumbit, ""));

提交按钮 btnSumbit 对应的客户端Html代码如下：

解析：

this.ClientScript.GetPostBackEventReference(btnSumbit, "")的作用就是在客户端页面生成调用 js 方法 __doPostBack(eventTarget, eventArgument) 的脚本，提交表单

客户端js 方法__doPostBack(eventTarget, eventArgument)（ASP.NET页面Render时自动生成）如下（深入理解__doPostBack）：

第②种：

aspx页面按钮：

<asp:Button ID="btnSumbit" runat="server" Text="提交" UseSubmitBehavior="false" OnClientClick="this.value='正在提交';this.disabled=true;" onclick="btnSumbit_Click" />
//若使用了 ASP.NET验证控件则要保证客户端验证函数 Page_ClientValidate() 的执行，代码如下
//Page_ClientValidate() 函数用于在包含微软验证控件的aspx页面中（客户端js脚本），根据用户输入操作是否合法,返回True或者False
<asp:Button ID="btnSumbit" runat="server" Text="提交" UseSubmitBehavior="false" OnClientClick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};this.value='正在提交';this.disabled=true;" onclick="btnSumbit_Click" />

后台不用为该Button添加什么代码

提交按钮 btnSumbit 对应的客户端Html代码如下：

与方法①比较可知，提交按钮在客户端生成的Html代码几乎是一样的，虽然 type 不同，但都是使用客户端方法 __doPostBack('btnSumbit','') 提交表单
UserSubmitBehavior = true 按钮控件和（<asp:Button/>和<asp:ImageButton/>)使用浏览器的提交功能，默认值

UserSubmitBehavior = false 按钮控件（同上） ASP.NET 的 postback 提交机制，此时 ASP.NET 会添加一段客户端脚本来回传该表单，也就是 __doPostBack(eventTarget, eventArgument) 方法

（注意：ASP.NET 服务器控件除了<asp:Button/>和<asp:ImageButton/> 其它的所有可回发控件都是通过 __doPostBack 方法触发页面的 PostBack 提交）

=========================================================================================

除了上面两种方法，自己还摸索出了一个简单可用方法，也可防止多次点击重复提交：

定义一个 js 全局变量 var IsClick=false 是否已点击提交，true：已点击提交；false：未点击

<asp:Button ID="btnSumbit" runat="server" Text="提交" OnClientClick="if (IsClick==false) { IsClick=true; return true;} else { return false;}" onclick="btnSumbit_Click" />
//若使用了 ASP.NET验证控件则要保证客户端验证函数 Page_ClientValidate() 的执行，代码如下
//Page_ClientValidate() 函数用于在包含微软验证控件的aspx页面中（客户端js脚本），根据用户输入操作是否合法,返回True或者False
<asp:Button ID="btnSumbit" runat="server" Text="提交" OnClientClick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};if (IsClick==false) { IsClick=true; return true;} else { return false;}" onclick="btnSumbit_Click" />

（注意：如果页面说用了UpdatePanel 且<asp:Button/> 包含在 UpdatePanel 里面，在异步回发之后（页面局部刷新之后）必须将 IsClick 的值重置为 false，可用如下方法：

$(document).ready(function () {
//endRequest 事件：在异步回发完成，并且控制权返回到浏览器之后引发
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
//updatepanel 异步回发局部刷新后处理函数
function EndRequestHandler(sender, args) {
IsClick = false;
}

）

---------------------
作者：蜉蝣撼天
来源：CSDN
原文：https://blog.csdn.net/u011261785/article/details/49102039
版权声明：本文为博主原创文章，转载请附上博文链接！

码农公寓

相关文章