輸入型頁面保存時遮罩效果避免再次提交的方法

其實本人的目的是想試驗一個這樣的功能，前臺的按鈕在後臺事件中能給其他服務器控件賦值，特別是GridView綁定數據這種，但是由於數據量多，這個過程會比較慢，又想在前臺加一個等待的遮罩提示，直到數據完全綁定到GridView上，遮罩層才消失。這就必須用Ajax。

剛發現了一種不需要Ajax的方法，但是刷新了整個頁面，悲劇。若按鈕事件執行完後，就跳轉去其他頁面，就不用介意是否刷新本頁面了，最好是輸入型頁面，不適合數據查詢類頁面。先見代碼,

頁面代碼:

  <asp:Label ID="lblName" runat="server">abc</asp:Label>
 <asp:Button ID="btnNone" runat="server" Text="None"  
OnClientClick="javascript: bsl_showLoadingDialog('請稍等');" 
            οnclick="btnNone_Click" />

JS代碼：

 <script language="javascript" type="text/javascript" src="JScripts/jquery-1.8.3.js"></script>
    <script language="javascript" type="text/javascript" src="JScripts/jquery-ui-1.9.2.custom.min.js"></script>
    <link type="text/css" rel="Stylesheet" href="Css/jquery-ui-1.9.2.custom.min.css" />
    <script language="javascript" type="text/javascript">
        var loadingDialog = $('<div id="dialog" title="" width="100%"><p class="center"><img src="Images/loading.gif"/></p><br/><p class="center">Please wait for a little while.</p></div>');
        function bsl_showLoadingDialog(title) {   //此處是一個遮罩效果
            loadingDialog.dialog({
                modal: true,
                title: title,
                width: 400,
                height: 300,
                closeOnEscape: false,
                resizable: false
            });
            loadingDialog.parent().find('.ui-dialog-titlebar-close').hide();
        }
    </script>

C#後臺代碼：

  protected void btnNone_Click(object sender, EventArgs e)
        {
            Thread.Sleep(3000);    //此處睡眠3秒，模擬等待時間
            lblName.Text = DateTime.Now.ToString();
        }

原理分析：按鈕的客戶端Click事件添加了一個遮罩層，服務端的Click事件執行完後，由於Asp.net頁面會重新呈現Render，因此就將遮罩給去掉了