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

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

公司网络比平常慢了不少，在点击保存按钮提交页面后需等待挺长的一段时间，忍不住手贱点多了几次，当提交完成后发现数据库语句执行异常。

两种验证方式：

第1种：

aspx页面按钮：

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

Page_Load 事件：

  1. btnSumbit.Attributes.Add("onclick", "this.disabled=true;" +this.ClientScript.GetPostBackEventReference(btnSumbit, ""));

  2.  

    //若使用了 ASP.NET验证控件 则要保证客户端验证函数 Page_ClientValidate() 的执行，代码如下

  3.  

    //Page_ClientValidate() 函数用于在包含微软验证控件的aspx页面中（客户端js脚本），根据用户输入操作是否合法,返回True或者False

  4.  

    btnSumbit.Attributes.Add("onclick", "if (typeof(Page_ClientValidate) == ‘function‘) { if (Page_ClientValidate() == false) { return false; }};this.disabled=true;" +this.ClientScript.GetPostBackEventReference(btnSumbit, ""));

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

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

  2.  

    或

  3.  

    <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）：

  1. <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

  2.  

    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

  3.  

    <script type="text/javascript">

  4.  

    //<![CDATA[

  5.  

    var theForm = document.forms[‘form1‘];

  6.  

    if (!theForm) {

  7.  

    theForm = document.form1;

  8.  

    }

  9.  

    function __doPostBack(eventTarget, eventArgument) {

  10.  

    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

  11.  

    theForm.__EVENTTARGET.value = eventTarget;

  12.  

    theForm.__EVENTARGUMENT.value = eventArgument;

  13.  

    theForm.submit();

  14.  

    }

  15.  

    }

  16.  

    //]]>

  17.  

    </script>

第2种：

aspx页面按钮：

  1. <asp:Button ID="btnSumbit" runat="server" Text="提交" UseSubmitBehavior="false" OnClientClick="this.value=‘正在提交‘;this.disabled=true;" onclick="btnSumbit_Click" />

  2.  

    //若使用了 ASP.NET验证控件 则要保证客户端验证函数 Page_ClientValidate() 的执行，代码如下

  3.  

    //Page_ClientValidate() 函数用于在包含微软验证控件的aspx页面中（客户端js脚本），根据用户输入操作是否合法,返回True或者False

  4.  

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

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

  2.  

    或

  3.  

    <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：未点击

  1. <asp:Button ID="btnSumbit" runat="server" Text="提交" OnClientClick="if (IsClick==false) { IsClick=true; return true;} else { return false;}" onclick="btnSumbit_Click" />

  2.  

    //若使用了 ASP.NET验证控件 则要保证客户端验证函数 Page_ClientValidate() 的执行，代码如下

  3.  

    //Page_ClientValidate() 函数用于在包含微软验证控件的aspx页面中（客户端js脚本），根据用户输入操作是否合法,返回True或者False

  4.  

    <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;
 }

）

原文地址：https://www.cnblogs.com/zyh-C/p/9561306.html

时间： 2024-10-06 00:07:53

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

【layui】一个简单的防止页面重复提交的方法

基本思路是:点击提交按钮后弹出遮罩层,防止多次点击导致的重复提交. 1 <div class="layui-form-item"> 2 <div class="layui-input-block t-c" > 3 <input id="file-submit" class="layui-btn" lay-submit lay-filter="demo1" value="

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

JAVA–利用Filter和session防止页面重复提交解决思路:1 用户访问表单页面,先经过过滤器,过滤器设置一个随机id作为token令牌, 并将该token放入表单隐藏域中.2 表单响应到浏览器,用户填充数据后提交请求;3 请求经过过滤器,过滤器获取表单中的令牌进行验证,如果和之前生成的令牌一致,则将请求放行,并且清空令牌;4 如果用户重复提交表单,请求经过过滤器,过滤器进行验证.因为第一次放行后令牌已经清空失效,令牌不一致,不放行.跳转到提醒界面. 需用知识:1 过滤器基础知识2 se

！！a标签和button按钮只允许点击一次，防止重复提交

button 方法:加上属性disabled = “disabled” 或者 disabled = “true” <button id="btn" disabled="disabled">确定</button> 2>Javascript里 <script> $("#btn").attr("disabled","true"); $("#btn").

【转】防止页面重复提交

//sb保存的是JavaScript脚本代码,点击提交按钮时执行该脚本        StringBuilder sb = new StringBuilder();        //保证验证函数的执行         sb.Append("if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }};");        //点击提交按钮后

点击分页按钮使页面置顶

<!DOCTYPE html> <title>点击页面置顶</title> <meta  charset ="UTF-8"> <script src="../js/jquery-3.4.1.min.js"></script> <body> <html> <div class="hidden" id="pageInfo">

页面弹窗按钮导致页面被调用

目录 我不知道这个题目咋说,上个图就明白了 我的页面是这样的 看到没,中间有一个新增,点击之后出来一个弹窗,如图 然后我点击弹窗的查询按钮之后,立马调到了我的页面了,还报错 我不明白为什么我点击的弹窗的按钮,会回到页面上去,找了很久,结果发现.... 我弹窗里面的按钮是submit..... <button type="submit" id="btn"> 查询</button> 如果是submit的话,会提交表单到页面的,所以把submit换

防止页面重复提交

当页面Get的时候: 生成一个Token(如GUID .MD5等字符串),存入页面一个隐藏域 ,且存入Session 当页面提交的时候 获取隐藏域的值,和服务器Session进行校验 校验成功 清除Session Over 接下来就是EF CodeFirst+MVC3的B2C电商设计

解决jquery使用ajax提交button标签时重复提交了。

这几天遇到一个jquery的ajax问题.相关代码是 <form action="xxx" method="post"> <button type="submit" class="tijiao">提交</button> </form> js为 $(".tijiao").click(function(){ $.post(xxx, $('.alert-form')

1.7 提交按钮

1.7 提交按钮提交按钮用于将form提交到后台服务器端,一个form中可以存在多个,它的形制可以有三种选择. 1.7.1 基本形制1.7.1.1 基本形制-input形式<form action="Verify">    Name:<input type="text" name="name"/><br/>    Password:<input type="password" name