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代码如下:

<input type="submit" name="btnSumbit" value="提交" onclick="this.disabled=true;__doPostBack('btnSumbit','');" />

<input type="submit" name="btnSumbit" value="提交" onclick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};this.disabled=true;__doPostBack('btnSumbit','');" />

解析:

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

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

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>

第②种:

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代码如下:

<span style="font-size:14px;color:#3366ff;"><input type="button" name="btnSumbit" value="提交" onclick="this.value='正在提交';this.disabled=true;__doPostBack('btnSumbit','');" />

<input type="button" name="btnSumbit" value="提交" onclick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};this.value='正在提交';this.disabled=true;__doPostBack('btnSumbit','');" /></span>

与方法①比较可知,提交按钮在客户端生成的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
版权声明:本文为博主原创文章,转载请附上博文链接!

ASP.NET防止连续多次点击提交按钮 导致页面重复提交的更多相关文章

  1. ASP.NET 使用Session,避免用户F5刷新时重复提交(转)

    1.使用Session,避免用户重复提交(F5刷新时) 0.起因         当用户上传文件后F5刷新浏览器会导致文件的重复提交和相关程序的重复执行.   1.实现原理         由于刷新提 ...

  2. WebForm中如何防止页面刷新,后退导致的重复提交

    当用户按下浏览器中的 F5 键刷新当前页面时,对这一过程进行检测所需的操作步骤.页面刷新是浏览器对特定用户操作(按 F5 键或单击"刷新"工具栏按钮)的响应.页面刷新操作是浏览器内 ...

  3. PHP避免刷新页面重复提交

    PHP避免刷新页面重复提交 2013-07-09 15:27 匿名 | 浏览 3567 次 编程语言 情景:从html提交数据到x.php 在x.php中$_POST数据写库并且显示,当x.php刷新 ...

  4. asp.net Mvc 模型绑定项目过多会导致页面运行时间卡

    asp.net Mvc 模型绑定项目过多会导致页面运行时间卡的问题. 解决方式就是采用ModelView方式进行精简,已减少模型绑定及验证的时间.

  5. JAVA–利用Filter和session防止页面重复提交

    JAVA–利用Filter和session防止页面重复提交解决思路:1 用户访问表单页面,先经过过滤器,过滤器设置一个随机id作为token令牌, 并将该token放入表单隐藏域中.2 表单响应到浏览 ...

  6. [iOS-UI]点击清空按钮,却会有提交的感觉

    一,问题分析 1.感觉像是点击清空按钮时调用了添加按钮的事件. 2.插入断电后,还真是这样. 3.仔细想想,才发现,原来是我复制了添加按钮,变成为添加按钮,进而点击清空时,不仅清空了所有内容,还把最新 ...

  7. !!a标签和button按钮只允许点击一次,防止重复提交

    button 方法:加上属性disabled = “disabled” 或者 disabled = “true” <button id="btn" disabled=&quo ...

  8. 点击Button按钮实现页面跳转

    1.首先我们新建一个带有button按钮的页面 <button type="submit" class="form-contrpl">注册</ ...

  9. Token机制,防止web页面重复提交

    1.业务要求:页面的数据只能被点击提交一次 2.发生原因: 由于重复点击或者网络重发,或者nginx重发等情况会导致数据被重复提交 3.解决办法: 集群环境:采用token加redis(redis单线 ...

随机推荐

  1. POJ - 3279 Fliptile(反转---开关问题)

    题意:有一个M*N的网格,有黑有白,反转使全部变为白色,求最小反转步数情况下的每个格子的反转次数,若最小步数有多个,则输出字典序最小的情况.解不存在,输出IMPOSSIBLE. 分析: 1.枚举第一行 ...

  2. 基于图灵api的Python机器人

    一.注册图灵机器人 先注册并登录图灵机器人官网: 点击创建机器人 复制机器人的key 二.搭建Python机器人 Python版本:3.6 注意替换第三行代码的apikey import reques ...

  3. python导出oracle中的表内容,并生成excel文件

    export NLS_LANG=AMERICAN_AMERICA.ZHS16GBK; ### 如果oracle表中有中文输出,为防止乱码,执行脚本前,需要先制定字符集: #!/usr/bin/pyth ...

  4. h5-切割轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 循环(while,break,continue),转义字符

    01. 程序的三大流程 在程序开发中,一共有三种流程方式: 顺序 -- 从上向下,顺序执行代码 分支 -- 根据条件判断,决定执行代码的 分支 循环 -- 让 特定代码 重复 执行 02. while ...

  6. 吴裕雄--天生自然MySQL学习笔记:MySQL 连接的使用

    使用 MySQL 的 JOIN 在两个或多个表中查询数据. 可以在 SELECT, UPDATE 和 DELETE 语句中使用 Mysql 的 JOIN 来联合多表查询. JOIN 按照功能大致分为如 ...

  7. maven解决大项目打包慢的问题

    裁剪反应堆 -am, --also-make 同时构建所列模块的依赖模块.必须和-pl同时使用.如 mvn -pl test  install -am ,将同时构建test的依赖模块. -amd, - ...

  8. 寒假day08

    今天爬了部分与人才动态相关的数据,还刷了剑指offer的部分算法题

  9. MySQL空洞问题解决

    原因:Mysql对于BLOB/TEXT值在执行大量删除操作时可能会引起空洞.空洞就是数据虽然删除了,但是依然占用服务器物理空间,会导致性能底下. 解决办法:定期使用OPTIMIZE TABLE进行碎片 ...

  10. [CISCN2019 华北赛区 Day1 Web1]Dropbox-phar文件能够上传到服务器端实现任意文件读取

    0x00知识点 phar是什么: 我们先来了解一下流包装 大多数PHP文件操作允许使用各种URL协议去访问文件路径:如data://,zlib://或php://.例如常见的 include('php ...