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

Question

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

提前致谢。

---

我能够开发这个。我已将这些步骤包含在答案中。如果您有任何问题，请告诉我。

Answer 1

我自己想出来的。

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

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();
   });