在 ASP.NET 使用 jQuery BlockUI 外掛程式

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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)

執行結果如下

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More