JQuery BlockUI progress indicator in every Asp.net postback

Question

I would like to implement a jquery blockUI to popup and show a progress indicator (loading circle) during postbacks in Asp.Net. How can I implement this? I am using masterpages so I was wondering if I can implement this code in one place to keep it simple. Is this even possible? Looking forward to hear your thoughts on this.

Thanks in advance.

---

I was able to develop this. I have included the steps in answers. Let me know if you have questions.

Answer 1

I figured it out myself.

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

Answer 2

Have a look at this
http://www.malsup.com/jquery/block/#overview
This works for ajax calls.

And you need to place the following line
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
in a place available to all pages.

Answer 3

Introduction:

To Block the Page when Data is Submitting, we have various options, Either we can use Ajax based UpdateProgress or some jQuery Stuff. But sometime Ajax UpdateProgress not very useful because of complexity. So, the better approch appoach is to use jQuery UI Block Plug-In.

Implementation:

Download jQuery UI Block Plugin from : http://www.malsup.com/jquery/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' 
                 }  });

});

The above code is simple code without any AJAX or other complex script.

I found this Article on Website and tested, its work fine