表单里只能点击一次的按钮

今天在一个ASP.NET项目中，有个页面提交时，因为数据量比较大，页面刷新比较慢，有的用户多次点击提交按钮。导致有多条记录插入到数据。

就想把按钮做成只能点击一次，不能再次点击的效果。在网上查找按钮的onclientclick 和验证控件的冲突的问题（唉~~，以前看过没有记住o(╯□╰)o）时，无意看到有人写过这样的只能点击一次的按钮。

有两个假设前提：

• Button必须是button类型，不能使submit类型
• 如果我们使用验证，javascript可以使用。

 

.aspx 页面：

         <asp:TextBox ID="TextBox1" runat="server" ValidationGroup="SubgurimTest"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ErrorMessage="*" ControlToValidate="TextBox1" ValidationGroup="SubgurimTest">
        </asp:RequiredFieldValidator>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="OnceClickMe" ValidationGroup="SubgurimTest"
            UseSubmitBehavior="false" OnClientClick="clickOnce(this, 'Cargando...')" />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

 

注意黑体字噢

.aspx.cs

     protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000);
        Label1.Text = DateTime.Now.ToString();
    }

 

.js
         function clickOnce(btn, msg)
        {
            // Test if we are doing a validation
            if (typeof(Page_ClientValidate) == 'function')
            {
                // if we are doing a validation, return if it's false
                if (Page_ClientValidate() == false) { return false; }
            }  
            // Ensure that the button is not of type "submit"
            if (btn.getAttribute('type') == 'button')
            {
                // The msg attibute is absolutely optional
                // msg will be the text of the button while it's disabled
                if (!msg || (msg='undefined')) { msg = 'Loading...'; }   
                btn.value = msg;
                // The magic :D
                btn.disabled = true;
            }
            return true;
        }