【ASP.NET】 【防止连续多次点击提交按钮 导致页面重复提交】
最近做项目遇到了这样的情况:
公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手贱点多了几次,当提交完成后发现数据库语句执行异常。
两种验证方式:
第1种:
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="提交" οnclick="this.disabled=true;__doPostBack('btnSumbit','');" />
- 或
- <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):
- <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>
第2种:
aspx页面按钮:
- <asp:Button ID="btnSumbit" runat="server" Text="提交" UseSubmitBehavior="false" OnClientClick="this.value='正在提交';this.disabled=true;" οnclick="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;" οnclick="btnSumbit_Click" />
后台不用为该Button添加什么代码
提交按钮 btnSumbit 对应的客户端Html代码如下:
- <span style="font-size:14px;color:#3366ff;"><input type="button" name="btnSumbit" value="提交" οnclick="this.value='正在提交';this.disabled=true;__doPostBack('btnSumbit','');" />
- 或
- <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:未点击
- <asp:Button ID="btnSumbit" runat="server" Text="提交" OnClientClick="if (IsClick==false) { IsClick=true; return true;} else { return false;}" οnclick="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;}" ο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】 【防止连续多次点击提交按钮 导致页面重复提交】相关推荐
- 点击按钮出现图片_坪山电动车上牌丨部分手机点击拍摄按钮,页面没有反应,无法拍摄人脸图片或上传照片,为什么?...
戳蓝字关注,骑行要备案,安全常相伴大家好!我是「帮你电动车轻松上牌的」小易今天继续解答广大深圳电动车车主,在操作"易骑行"小程序进行电动车备案,以及深圳电动车上牌骑行过程中遇到的常 ...
- 通过js点击事件处理防止表单重复提交
当用户单击"提交"按钮后,该按钮将变为灰色不可用状态 上面的例子中使用OnClick事件检测用户的提交状态,如果单击了"提交"按钮,该按钮立即置为失效状态,用户 ...
- 表单防止页面重复提交方法
用户在操作表单数据时往往会出现表单数据重复提交的问题,尤其实在Web开发中此类问题比较常见.刷新页面,后退操作以前的页面,单机多次按钮都会导致数据重复提交.此类问题是因为浏览器重复提交HTTP请求导致 ...
- 防止刷新或后退页面重复提交表单
刷新或后退页面会引起重复提交表单,为了避免这个头疼的问题发生,有几种方法可以实现.网上已经有很多实现的方式的思路,比如提交后禁用按钮.重定向和令牌,但前两种方式有时候不起作用或者说没有"安全 ...
- JAVA--利用Filter和session防止页面重复提交
JAVA–利用Filter和session防止页面重复提交 解决思路: 1 用户访问表单页面,先经过过滤器,过滤器设置一个随机id作为token令牌, 并将该token放入表单隐藏域中. 2 表单响应 ...
- 高薪程序员面试题精讲系列77之如何防止前端页面重复提交请求?
一. 面试题及剖析 1. 今日面试题 如何防止前端页面重复提交请求? 如何防止重复提交请求? 2. 题目剖析 今天的面试问题,属于在考察我们应对具体问题时的解决思路和解决办法.这种针对具体业务.寻求解 ...
- js或者jQuery模拟点击提交按钮button,触发提交操作
一般情况下提交form表单,都是手动点击提交按钮,但是为了简化用户操作,有时候需要自动提交表单,或者做了其他某一个操作(非提交操作)之后自动提交表单,可以使用js或者jQuery模拟点击提交按钮,然后 ...
- [iOS-UI]点击清空按钮,却会有提交的感觉
一,问题分析 1.感觉像是点击清空按钮时调用了添加按钮的事件. 2.插入断电后,还真是这样. 3.仔细想想,才发现,原来是我复制了添加按钮,变成为添加按钮,进而点击清空时,不仅清空了所有内容,还把最新 ...
- html中加长提交按钮,HTML input submit提交按钮简介说明
摘要: 下文讲述html代码中input type='submit'时的相关属性简介说明,如下所示: input type='submit' 简介 当input标签中 type='submit'时,代 ...
最新文章
- 做程序员10年了,复制粘贴是我最牛逼的技能,从菜鸟兑变成大牛,直到看了这些大佬的公众号...
- 简单的form表单操作的几种写法
- 详解Linux2.6内核中基于platform机制的驱动模型 (经典)
- oracle中的柱状图,详解Oracle中XMI开发UML图表技术
- SharePoint 2013 InfoPath 无法保存下列表单
- easyui datagrid local pager 表格本地分页
- 常用有话帧检测技术(VAD)
- java如何输出线程的标识符_Java多线程面试题
- 程序逻辑上多一些提示
- 3.1	采购管理规划
- perl数组硬引用_Perl 继续前行,Perl 7 将是下一代(硬核老王点评版)
- 视频质量,分辨率,码率之间的关系 2
- C++ 内存分配 学习笔记
- SpringBoot 集成ElasticSearch(二)分页查询
- c语言编木马程序,5分钟教会!C语言远程控制木马:“控制端”制作,附送源码!...
- Openbravo3.0 客户端代码开发与API
- 条件与循环Phython
- 光滑的圆环(glossy torus)
- android入门之系统架构和环境搭建
- 导数的四则运算法则_导数、微分、积分之间的区别与联系
热门文章
- leetcode算法题--回文链表
- OVS sflow(二十六)
- NAPI技术--原理和实现(一)
- js mysql java_Java、mysql、html、css、js 注释大小写
- 整活插件 炉石传说_炉石传说:一顿操作猛如虎,定睛一看原地杵,会长整活被死人抬走...
- 线程和进程 linux,Linux查看进程的所有子进程和线程
- 一款Octopress插件用于同步博客到其他站点
- HDU-1051 Wooden Sticks
- ASP.net 2.0 Migrating系列 - Master Pages 感触
- python编程怎么建立工程_教你如何用Python脚本快速创建项目