1. 程式人生 > >輸入型頁面儲存時遮罩效果避免再次提交的方法

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

其實本人的目的是想試驗一個這樣的功能,前臺的按鈕在後臺事件中能給其他伺服器控制元件賦值,特別是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('請稍等');" 
            onclick="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,因此就將遮罩給去掉了