在 ASP.NET 使用 jQuery BlockUI 插件
生活随笔
收集整理的這篇文章主要介紹了
在 ASP.NET 使用 jQuery BlockUI 插件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
BlockUI 是一個相當不錯的jQuery插件，它可以輕易設定頁面指定區域顯示執行中文字(如 Loading...)并鎖定該區域限制輸入。簡單的說，若我們希望網頁在執行PostBack 或 Ajax 更新的過程中，希望能限制輸入或重復按鈕并顯示處理中訊息的話，那 BlockUI 是相當不錯的選擇，接下來我們就來示范如何在 ASP.NET 中使用 BlockUI。
BlockUI 是 jQuery 的插入，所以要下載 jQuery 及 BlockUI 插入的 js 檔 (jquery.js 及 jquery.blockUI.js)，相關檔案可由下列連結下載
jquery.js：http://jquery.com/
jquery.blockUI.js：http://malsup.com/jquery/block/ (該網站有 BlockUI 使用的詳細說明)
在 VS2005 新增一個 ASP.NET AJAX 網站專案，將 jquery.js 及 jquery.blockUI.js 檔案復制至網站 js 數據夾，并在頁面中的 head 區塊加入引用
1: <head runat="server"> 2: <title>jQuery BlockUI Plugin</title> 3: <script src="js/jquery.js" type="text/javascript"></script> 4: <script src="js/jquery.blockUI.js" type="text/javascript"></script> 5: </head> ? 在頁面中加入 UpdatePanel 控件，并在 UpdatePanel 中置入一個 Button，aspx 程序代碼如下 ? 1: <form id="form1" runat="server"> 2: <asp:ScriptManager ID="ScriptManager1" runat="server" /> 3: <div> 4: <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 5: <ContentTemplate> 6: <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> 7: </ContentTemplate> 8: </asp:UpdatePanel> 9: </div> 10: </form>在 Button 的 Click 事件中撰寫等待 3 秒的程序代碼，這是為了呈現 BlockUI 的效果。
1: Protected Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) 2: Dim N1 As Integer 3: For N1 = 1 To 3 4: System.Threading.Thread.Sleep(1000) 5: Next 6: End Sub ? 使用 BlockUI 插件相當容易，只要頁面 submit 時呼叫 $.blockUI() 就會顯示 BlockUI，而頁面載入時呼叫 $.unblockUI() 隱藏 BlockUI。 所以在頁面 Page Load 事件中撰寫如下程序代碼。 ? 1: Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 2: Dim sScript As String 3: ? 4: '頁面執行 Submit 時顯示 blockUI 5: sScript = "$.blockUI();" 6: ScriptManager.RegisterOnSubmitStatement(Me, Me.GetType(), "blockUI", sScript) 7: ? 8: '頁面載入時隱藏 blockUI 9: sScript = "$.unblockUI();" 10: ScriptManager.RegisterStartupScript(Me, Me.GetType(), "unblockUI", sScript, True) 11: End Sub ? 執行結果如下，因為 $.blockUI() 未指定區域，所以會將整個頁面 Lock 并顯示 "Please wait..." 的訊息。當執行結束時，就會呼叫 $.unblockUI() 來隱藏 BlockUI。 ? ? 若我們希望將顯示的文字改為「數據加載中...」并加入等待圖示的話，可以在 $.blockUI() 傳入 message 參數，程序代碼修改如下 ? 1: '頁面執行 Submit 時顯示 blockUI 2: sScript = "$.blockUI({" & _ 3: "message: '<h3></br><img src=""busy.gif"" /> 數據加載中...</h3>'" & _ 4: "});" 5: ScriptManager.RegisterOnSubmitStatement(Me, Me.GetType(), "blockUI", sScript) ? 執行結果如下 ? ? ? 超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的在 ASP.NET 使用 jQuery BlockUI 插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MS08-025 win32k.sys
- 下一篇： 设计演化与设计