[ASP.NET]UpdatePanel+驗證功能(Validate)+頁面遮罩(jQuery BlockUI Plugin)

2014-06-28

1793
0
2017-07-19

摘要:UpdatePanel+驗證功能(Validate)+頁面遮罩(jQuery BlockUI Plugin)

本次範例主題

當頁面使用UpdatePanel和驗證功能情況下，如何使在驗證成功後Postback時，能有全頁面遮罩遮住頁面，避免使用者重複按下送出動作(Submit)。

下面為程式碼與註解

範例為:
當使用者按下Button1控件時，便會先觸發blockUIAndValid function 進行驗證與(如果驗證通過)開啟頁面遮罩，
至到PostBack完後會自動執行closeBlockUI function來關閉頁面遮罩。

相關參考:
jQuery: http://jquery.com/
jQuery BlockUI Plugin: http://malsup.com/jquery/block/

Default.aspx 檔案內容:


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="Scripts/jquery-2.1.1.min.js"></script>//必須載入jQuery
    <script src="Scripts/jquery.blockUI.min.js"></script>//必須載入jQuery BlockUI Plugin
    <title></title>
</head>
<body>
    <script>
        //驗證通過時，開啟 Block UI 遮罩
        function blockUIAndValid() {
            var result = false;

            if (typeof(Page_ClientValidate) == "function") {

                result = Page_ClientValidate();//執行驗證。true, 驗證通過; false, 驗證失敗
                if (result === true) {
                    $.blockUI({ message: '<div>Server 處理中...(全頁遮罩)</div>' });//開啟 Block UI 遮罩
                }

                //由於 Page_ClientValidate 驗證失敗時，Page_BlockSubmit變數會為true，造成下次觸發PostBack無效，只有在下下次觸發PostBack才有效果，因此手動呼叫Page_ClientValidate function時，必須手動將Page_BlockSubmit變數賦值false。
                Page_BlockSubmit = false;
            }

            return result;
        }
    </script>

    <script>
        function closeBlockUI(sender, args) {
            $.unblockUI(); //關閉 Block UI 遮罩
        }

        
        $(document).ready(function(){

         //在每次UpdatePanel完，執行closeBlockUI function(關閉 Block UI 遮罩)
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(closeBlockUI);
        });
    </script>

    <form id="form1" runat="server">
    <div>   
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="Dynamic" ErrorMessage="驗證失敗:不可空白" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
                <br />                
                <asp:Button ID="Button1" runat="server" Text="Go PostBack" OnClick="Button1_Click" OnClientClick="return blockUIAndValid();"/>
            </ContentTemplate>
        </asp:UpdatePanel>
    
    </div>
    </form>
</body>
</html>

Default.aspx.cs 檔案內容:


    //Button1按鈕Click觸發事件
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);//模擬處理事情(停2秒)
    }

執行結果

※在此感謝所有的幫助者，感謝~

ASP.NET

回首頁