在 ASP.NET 使用 jQuery BlockUI 插件
BlockUI 是一个相当不错的jQuery插件，它可以轻易设定页面指定区域显示执行中文字(如 Loading...)并锁定该区域限制输入。简单的说，若我们希望网页在执行PostBack 或 Ajax 更新的过程中，希望能限制输入或重复按钮并显示处理中讯息的话，那 BlockUI 是相当不错的选择，接下来我们就来示范如何在 ASP.NET 中使用 BlockUI。
BlockUI 是 jQuery 的插入，所以要下载 jQuery 及 BlockUI 插入的 js 檔 (jquery.js 及 jquery.blockUI.js)，相关档案可由下列连结下载
在 VS2005 新增一个 ASP.NET AJAX 网站专案，将 jquery.js 及 jquery.blockUI.js 档案复制至网站 js 数据夹，并在页面中的 head 区块加入引用
所以在页面 Page Load 事件中撰写如下程序代码。
BlockUI 是 jQuery 的插入，所以要下载 jQuery 及 BlockUI 插入的 js 檔 (jquery.js 及 jquery.blockUI.js)，相关档案可由下列连结下载
在 VS2005 新增一个 ASP.NET AJAX 网站专案，将 jquery.js 及 jquery.blockUI.js 档案复制至网站 js 数据夹，并在页面中的 head 区块加入引用
在页面中加入 UpdatePanel 控件，并在 UpdatePanel 中置入一个 Button，aspx 程序代码如下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>
在 Button 的 Click 事件中撰写等待 3 秒的程序代码，这是为了呈现 BlockUI 的效果。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>
使用 BlockUI 插件相当容易，只要页面 submit 时呼叫 $.blockUI() 就会显示 BlockUI，而页面载入时呼叫 $.unblockUI() 隐藏 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
所以在页面 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
