每个Asp.net回传中使用JQuery BlockUI进度指示器

Question

我想实现一个jquery的blockUI弹出框，用于在Asp.Net的postback过程中显示进度指示器（加载圆圈）。我该如何实现呢？我正在使用masterpages，所以我想知道是否可以在一个地方实现这个代码以保持简单。这样做可行吗？期待听到您的想法。

提前感谢您。

---

我已经开发完毕，并在答案中包含了步骤。如果您有问题，请让我知道。

- Sev

---

这里的答案可能会有所帮助 http://stackoverflow.com/questions/10125511/loading-indicator-after-clicking-button - MVCKarl

谢谢提供链接，但它只在按钮点击时触发。我希望它可以在每次回传时都触发。 - Sev

Answer 1

我自己想出了解决方法。

1. Create a new Asp.net web project.

2. Include the following in Site.Master markup:

   <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. Add the following markup in default.aspx:

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

4. Add a progress indicator image (ajax-loader.gif) to project root

5. Add the following in 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();
   });
   

- Sev

Answer 2

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

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

- Sardar Ali

---

OP在Postback而不是Ajax调用时提出了问题。 - Ali Adnan

Answer 3

介绍：

在数据提交时阻止页面，我们有各种选择，可以使用基于Ajax的UpdateProgress或一些jQuery插件。但有时候Ajax UpdateProgress由于复杂性而不是很有用。因此，更好的方法是使用jQuery UI Block插件。

实现：

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

<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或其他复杂的脚本。

我在网站上找到了这篇文章并测试过，它可以正常工作。

- Ali Adnan