只能點擊一次的按鈕

今天在一個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
                btn.disabled = true;
            }
            return true;
        }

代碼中的注釋都是比較簡單的英文，就沒有翻譯(*^__^*) ……

代碼引用自：http://weblogs.asp.net/javinavarro/archive/2007/11/15/clickonce-button.aspx