移动项目开发笔记(禁止一个按钮在服务器事件处理完成前连续点击按钮)

      现在已经是8月31号晚上22：30了。里9月1号,新一个月只有不到1个半小时了。感觉这个月时间过得真快。博客园内容这个月一直都没来得及更新了。主要是由于在项目中比较忙。时间不多。不过趁月底还是需要在博客园上发表自己在项目中一些心得和相关及技巧。

   简单实用是我一贯在软件开发中追求的目标。   

    下面切入正题.在移动项目开发笔记中谈到  移动项目开发笔记(改变文件上传控件的默认风格)  本来那控件是实现了业务的要求，不过测试人员对于这个控件发现了一个严重度比较高的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禁用，直到服务器端吧事件出来函数执行完毕后重新发送到客户端后就取消了禁用）这样就比较好的解决了这类问题。

希望这篇文章能够朋友们一些帮助。 最后希望朋友们提出宝贵意见，如果有什么更好的解决方案请提出来。我们共同分享。谢谢。

 

 

CharlesChen

Email:Charles.C.chen@newegg.com

MSN:Charles.C.Chen@newegg.net