每个Asp.net回发中的JQuery BlockUI进度指示器

Question

我想实现一个jquery blockUI弹出窗口并在回发期间显示一个进度指示器(加载圆圈)Asp.Net.我该如何实现呢？我正在使用masterpages所以我想知道我是否可以在一个地方实现此代码以保持简单.这甚至可能吗？期待听到您对此的看法.

提前致谢.

---

我能够发展这个.我在答案中包含了这些步骤.如果您有疑问,请告诉我.

Answer 1

我自己想出来了。

1. 创建一个新的 Asp.net Web 项目。

2. 在 Site.Master 标记中包含以下内容：

   <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
   <script type="text/javascript" src="../Scripts/jquery.blockUI.js"></script>
   <script language="javascript" src="../Scripts/General.js" type="text/javascript"></script>
   
   <style>
     div.blockOverlay {
       background-color: #666;
       filter: alpha(opacity=50) !important;
       -moz-opacity:.50;
       opacity:.50;
       z-index: 200000 !important;
     }
     div.blockPage {
       z-index: 200001 !important;
       position: fixed;
       padding: 10px;
       margin: -38px 0 0 -45px;
       width: 70px;
       height: 56px;
       top: 50%;
       left: 50%;
       text-align: center;
       cursor: wait;
       background: url(ajax-loader.gif) center 30px no-repeat #fff;
       border-radius: 5px;
       color: #666;
       box-shadow:0 0 25px rgba(0,0,0,.75);
       font-weight: bold;
       font-size: 15px;
       border: 1px solid #ccc;
     }
   </style>
   

3. 在default.aspx中添加以下标记：

   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate><asp:Button ID="Button1" runat="server" Text="Button" 
           onclick="Button1_Click" /></ContentTemplate>
   </asp:UpdatePanel>
   

4. 将进度指示器图像 (ajax-loader.gif) 添加到项目根目录

5. 在 General.js 中添加以下内容

   // BlockUI setup
   
   $.extend({
     // Block ui during ajax post back
     initializeUiBlocking: function () {
       if (typeof ($.blockUI) != 'undefined') {
         $.blockUI.defaults.message = 'LOADING';
         $.blockUI.defaults.overlayCSS = {};
         $.blockUI.defaults.css = {};
   
         var request = Sys.WebForms.PageRequestManager.getInstance();
         request.add_initializeRequest(function (sender, args) {
           request.get_isInAsyncPostBack() && args.set_cancel(true);
         });
         request.add_beginRequest(function () { $.blockUI(); });
         request.add_endRequest(function () { $.unblockUI(); });
       }
     }
   });
   
   $(document).ready(function () {
     $.initializeUiBlocking();
   });