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

Answer 2

看看这个
http://www.malsup.com/jquery/block/#overview
这适用于 ajax 调用。

您需要放置以下行
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
在所有页面都可用的地方。

Answer 3

简介：

要在提交数据时阻止页面，我们有多种选择，我们可以使用基于 Ajax 的 UpdateProgress 或一些 jQuery 的东西。但有时由于复杂性，Ajax UpdateProgress 并不是很有用。所以，更好的方法是使用 jQuery UI Block Plug-In。

实施：

从 http://www.malsup.com/jquery/block/ 下载 jQuery UI 块插件

<script type="text/javascript" src="js/jquery.1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>

  $("#<%= btnSubmit.ClientID%>").click(function() {

 $.blockUI({ 
                            message: "<h3>Processing, Please Wait...</h3>" ,
                            css: { 
                                border: 'none', 
                                padding: '15px', 
                                backgroundColor: '#000', 
                                '-webkit-border-radius': '10px', 
                                '-moz-border-radius': '10px', 
                                opacity: .5, 
                                color: '#fff' 
                 }  });

});

以上代码是没有任何AJAX或其他复杂脚本的简单代码。

我在Website 上找到了这篇文章并进行了测试，它工作正常