禁止一个按钮在服务器事件处理完成前连续点击按钮

改变文件上传控件的默认风格本来那控件是实现了业务的要求，不过测试人员对于这个控件发现了一个严重度比较高的bug:当用户连续点击按钮后（还未等服务器执行事件完毕）就会出现上传多个文件的问题。

通过思考抽取该bug的实质，得出的问题是：如何在一个按钮在服务器端执行完成之前禁止按钮。这样的话就防止在发送到服务器执行过程中禁止继续点击。

这当然是用脚本来实现了。因为脚本是客户端执行，是在发送到服务器端的任何事件之前，也是最快的。只要点击按钮后设置那按钮的disabled就行了。不过这需要一些技巧：

下面是一个错误解决方案：

  <asp:Button ID="Button4" runat="server" OnClick="Button4_Click" Text="Button"  OnClientClick="EnableControl(this)"/></form>
<script>
     function EnableControl(obj)
     {
        obj.disabled=true;
        return true;
     }
</script>
向上面这样设置当用户点击按钮后是不会发送到服务器端的。因为在客户端已经通过javascript把按钮禁用了。可见上面的方法不可行。

正确的解决方案：

在页面上放置一个Hidden Button，通过上面那按钮来触发这Hidden Button隐藏按钮的Click事件来执行服务器的事件。并且在点击该按钮后立即把当前点击的按钮disabled。这样就能解决了这个问题：下面是代码简单演示：

<asp:Button ID="Button4" runat="server"  Text="Button"  OnClientClick="EnableControl(this)"/>
<asp:Button ID="hiddenButton" runat="server" style="display:none;" OnClick="Button4_Click" />
<script>
     function EnableControl(obj)
     {
        obj.disabled=true;
        var hidden=document.getElementById("<%=hiddenButton.ClientID %>");
        hidden.click();
        return false;
     }
</script>
通过Button4点击后设置Button4禁用（避免用户连续点击）,来触发HiddenButton的Click时间来触发服务器的事件。相当于点击Button4执行Button4 的服务器端事件。这样的话就解决了 禁止一个按钮在服务器事件处理完成前连续点击按钮（当用户点击按钮后立即被javaScript禁用，直到服务器端吧事件出来函数执行完毕后重新发送到客户端后就取消了禁用）这样就比较好的解决了这类问题。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!