设置按钮不可用避免重复提交

设置按钮不可用，避免重复提交

编写人：CC阿爸

2015-1-29

今天在这里，我想与大家一起分享如何处理项目中经常出现用户重复提交的情况，为了防止这种情况，最常用的方法就是在用户点击按钮后将该按钮设为不可用，笔者在实际开发当中遇到了多种不同的情况，在此做个小结，以供参考。有兴趣的同学，可以一同探讨与学习一下，否则就略过吧。

由于刚开始进行的web开发，很多时候使用的为html控件，因此处理起来相当简单

如：先前开发的报销系统，在提交单据审批时，时常会出现重复审批下一流程的bug。

aspx前台<tdalign="left"colspan="7"><buttonclass="button"id="btnSubmit"onmouSEOver="this.style.backgroundColor='#ffffff'"onfocus="blur();"onclick="btnSubmit2_onclick();"onmouseout="this.style.backgroundColor='#eeeeee'"type="button"runat="server"></button></td>functionbtnSubmit2_onclick(){document.getElementById("btnSubmit").disabled=true;//使不可用}C#this.btnSubmit.ServerClick+=newSystem.EventHandler(this.btnSubmit_ServerClick);

今天在开发另一个项目中，用到的是webcontrol ，本想也使得这种方式来处理，

<asp:ButtonID="btnSubmit"runat="server"OnClientClick="btnSubmit2_onclick();"OnClick="btnSubmit_Click"></asp:Button>

但发现在客户端利用js处理为不可用后，按钮是为不可用状态，但按钮事件不会执行了。这是什么问题?

碰到问题，当然要搞清楚原因。经过在网上查询资料发现原来是：

按钮的服务端事件其实是.net框架利用按钮的客户端事件onclick来实现的，所以你在服务端重置onclick属性，会覆盖框架处理服务端事件的过程。 上面已经提供了客户端脚本，你在button上加btnSubmit2_onclick()就可以，

注意只可用HtmlInputButton控件来实现，不可用WebControls的Button。

以下是其它网友总结的文章，写得很全面，现摘抄下来供大家参考，我本次也是采用了第二种方法解决了我碰到的问题。

欢迎加入技术分享群

（转）原文地址如下：

http://blog.itpub.net/28699126/viewspace-775581/

第一种情况是非submit类型的按钮 这种情况比较简单，只要在客户端添加事件，将按钮设为不可用就可以了。看下面的代码： asp.net-Code:<form.id="form1"runat="server"><asp:LabelID="lbl"runat="server"></asp:Label><asp:ButtonID="btn"runat="server"Text="Test"nClick="btn_Click"nClientClick="this.disabled=true"UseSubmitBehavior="false"/></form>C#-Code:PRotectedvoidbtn_Click(objectsender,EventArgse){System.Threading.Thread.Sleep(1000);lbl.Text=DateTime.Now.ToString();}

第二种情况是submit类型的按钮

此时第一种方法就不行了，按钮被设为DISABLED之后就无法完成提交，我们可以适当修改代码：

ASP.NET-Code:

<form.id="form1"runat="server"><asp:LabelID="lbl"runat="server"></asp:Label><asp:ButtonID="btn"runat="server"Text="Test"nClick="btn_Click"/></form>C#-Code:protectedvoidPage_Load(objectsender,EventArgse){if(!Page.IsPostBack){btn.OnClientClick="this.disabled=true;"+GetPostBackEventReference(btn);}}

与第一种方法不同的是我们在Page_Load中给按钮添加客户端事件，并附加了GetPostBackEventReference。但这样做还有个缺 陷，在第一提交回发完成以后，再点击按钮就会失败，因此我们需要去掉if (!Page.IsPostBack)这句，也就是每次回发都要重复绑定客户端事件。

第三种情况跟第一种类似，只是多了个UpdatePanel ASP.NET-Code:<asp:UpdatePanelID="up1"runat="server"><ContentTemplate><asp:LabelID="lbl"runat="server"></asp:Label><asp:ButtonID="btn"runat="server"Text="Test"nClick="btn_Click"nClientClick="this.disabled=true;"UseSubmitBehavior="false"/></ContentTemplate></asp:UpdatePanel>

第四种情况也是在UpdatePanel里面，不过和第二种情况一样，也是Submit类型的按钮 和第二种情况不同的是，我们只需要在第一次加载的时候绑定客户端事件就可以了，即在 if (!Page.IsPostBack){}中绑定事件。 第五种和第四种不同的是，按钮在UpdatePanel外面，通过触发器来刷新指定的UpdatePanel 如果按第四种的方法，可以在点击按钮后设为不可用，但回发完成以后该按钮不会恢复可用状态：

ASP.NET-Code:

<asp:UpdatePanelID="up1"runat="server"><ContentTemplate><asp:LabelID="lbl"runat="server"></asp:Label></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="btn"EventName="Click"/></Triggers></asp:UpdatePanel><asp:ButtonID="btn"runat="server"Text="Test"nClick="btn_Click"/>C#-Code:protectedvoidPage_Load(objectsender,EventArgse){if(!Page.IsPostBack){btn.OnClientClick="this.disabled=true;"+GetPostBackEventReference(btn);}}protectedvoidbtn_Click(objectsender,EventArgse){System.Threading.Thread.Sleep(1000);lbl.Text=DateTime.Now.ToString();}

为了解决这个问题，最简单的方法就是将该按钮放在另一个UpdatePanel里面，这样每次都可以恢复原状态了。另外还可以根据Atlas的页面周期，在提交完成以后显式将该按钮设为可用。

注：在Asp.Net中所有默认的按钮都是Submit类型，如果要是有button类型则，需要设置UseSubmitBehavior="false"；

Submit是专门用于提交表单的Button，与Button的区别主要有两点： 　　type=button 就单纯是按钮功能 　　type=submit 是发送表单 　　 (1)Submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此 　　 (2)表单提交时，所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交，除了Submit对象。Submit对象只有在自己被单击后的提交中才会作为键值对被提交。 　　但是对于从事WEB UI的人应该要注意到，使用submit来提高页面易用性： 　　使用submit后，页面支持键盘enter键操作，而很多WEB软件设计师，可能没有注意到submit统一. 　　用button后往往页面不支持enter键了。所以需要支持enter键，必须要设置个submit，默认enter键对页面第一个submit进行操作。 　　 　　执行完onClick，转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。 　　执行完onClick，跳转文件在 js文件里控制。提交需要onClick。 　　比如： 　　onclick="form1.action='a.jsp';form1.submit();" 这样就实现了submit的功能了。 　　讲白一些，就是submit会有一个跳转，页面会刷新；而button不会刷新，就是一个button；可以用<button type="submit/button/reset"></button>来生成按钮，更加灵活，样式更好控制。(如果客户端禁用JS，则使用Submit时，前台验证就会失效，后台就可能获取到非法的数据)