JQuery BlockUI Progress Indicator in Every Asp.net Postback

Question

I would like to implement a jquery blockUI for a popup and show a progress indicator (boot circle) during postback to Asp.Net . How can i implement this? I use masterpages , so I was wondering if I can implement this code in one place so that it is simple. Is it possible? Waiting to hear your thoughts about it.

Thanks in advance.

---

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

Answer 1

I realized that myself.

• Create a new Asp.net web project.

• Include the following markup in 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> 

• Add the following markup to default.aspx:

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

• Add a progress indicator image (ajax-loader.gif) for the project root

• Add to General.js

  following:

   // 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

Take 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 accessible to all pages.