码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-08-30 18:18:38      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:局部刷新   reference   else   nbsp   name   项目   cli   ble   ===   

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

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

 

两种验证方式:

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

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

标签:局部刷新   reference   else   nbsp   name   项目   cli   ble   ===   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!