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

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

两种验证方式:

第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="提交" οnclick="this.disabled=true;__doPostBack('btnSumbit','');" />
  2. <input type="submit" name="btnSumbit" value="提交" οnclick="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;" οnclick="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;" οnclick="btnSumbit_Click" />

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

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

  1. <span style="font-size:14px;color:#3366ff;"><input type="button" name="btnSumbit" value="提交" οnclick="this.value='正在提交';this.disabled=true;__doPostBack('btnSumbit','');" />
  2. <input type="button" name="btnSumbit" value="提交" οnclick="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;}" οnclick="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;}" οnclick="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

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

  1. 点击按钮出现图片_坪山电动车上牌丨部分手机点击拍摄按钮,页面没有反应,无法拍摄人脸图片或上传照片,为什么?...

    戳蓝字关注,骑行要备案,安全常相伴大家好!我是「帮你电动车轻松上牌的」小易今天继续解答广大深圳电动车车主,在操作"易骑行"小程序进行电动车备案,以及深圳电动车上牌骑行过程中遇到的常 ...

  2. 通过js点击事件处理防止表单重复提交

    当用户单击"提交"按钮后,该按钮将变为灰色不可用状态 上面的例子中使用OnClick事件检测用户的提交状态,如果单击了"提交"按钮,该按钮立即置为失效状态,用户 ...

  3. 表单防止页面重复提交方法

    用户在操作表单数据时往往会出现表单数据重复提交的问题,尤其实在Web开发中此类问题比较常见.刷新页面,后退操作以前的页面,单机多次按钮都会导致数据重复提交.此类问题是因为浏览器重复提交HTTP请求导致 ...

  4. 防止刷新或后退页面重复提交表单

    刷新或后退页面会引起重复提交表单,为了避免这个头疼的问题发生,有几种方法可以实现.网上已经有很多实现的方式的思路,比如提交后禁用按钮.重定向和令牌,但前两种方式有时候不起作用或者说没有"安全 ...

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

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

  6. 高薪程序员面试题精讲系列77之如何防止前端页面重复提交请求?

    一. 面试题及剖析 1. 今日面试题 如何防止前端页面重复提交请求? 如何防止重复提交请求? 2. 题目剖析 今天的面试问题,属于在考察我们应对具体问题时的解决思路和解决办法.这种针对具体业务.寻求解 ...

  7. js或者jQuery模拟点击提交按钮button,触发提交操作

    一般情况下提交form表单,都是手动点击提交按钮,但是为了简化用户操作,有时候需要自动提交表单,或者做了其他某一个操作(非提交操作)之后自动提交表单,可以使用js或者jQuery模拟点击提交按钮,然后 ...

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

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

  9. html中加长提交按钮,HTML input submit提交按钮简介说明

    摘要: 下文讲述html代码中input type='submit'时的相关属性简介说明,如下所示: input type='submit' 简介 当input标签中 type='submit'时,代 ...

最新文章

  1. 做程序员10年了,复制粘贴是我最牛逼的技能,从菜鸟兑变成大牛,直到看了这些大佬的公众号...
  2. 简单的form表单操作的几种写法
  3. 详解Linux2.6内核中基于platform机制的驱动模型 (经典)
  4. oracle中的柱状图,详解Oracle中XMI开发UML图表技术
  5. SharePoint 2013 InfoPath 无法保存下列表单
  6. easyui datagrid local pager 表格本地分页
  7. 常用有话帧检测技术(VAD)
  8. java如何输出线程的标识符_Java多线程面试题
  9. 程序逻辑上多一些提示
  10. 3.1 采购管理规划
  11. perl数组硬引用_Perl 继续前行,Perl 7 将是下一代(硬核老王点评版)
  12. 视频质量,分辨率,码率之间的关系 2
  13. C++ 内存分配 学习笔记
  14. SpringBoot 集成ElasticSearch(二)分页查询
  15. c语言编木马程序,5分钟教会!C语言远程控制木马:“控制端”制作,附送源码!...
  16. Openbravo3.0 客户端代码开发与API
  17. 条件与循环Phython
  18. 光滑的圆环(glossy torus)
  19. android入门之系统架构和环境搭建
  20. 导数的四则运算法则_导数、微分、积分之间的区别与联系

热门文章

  1. leetcode算法题--回文链表
  2. OVS sflow(二十六)
  3. NAPI技术--原理和实现(一)
  4. js mysql java_Java、mysql、html、css、js 注释大小写
  5. 整活插件 炉石传说_炉石传说:一顿操作猛如虎,定睛一看原地杵,会长整活被死人抬走...
  6. 线程和进程 linux,Linux查看进程的所有子进程和线程
  7. 一款Octopress插件用于同步博客到其他站点
  8. HDU-1051 Wooden Sticks
  9. ASP.net 2.0 Migrating系列 - Master Pages 感触
  10. python编程怎么建立工程_教你如何用Python脚本快速创建项目