JQuery BlockUI progress indicator in every Asp.net postback
Solution 1
I figured it out myself.
- Create a new Asp.net web project.
-
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>
-
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>
Add a progress indicator image (ajax-loader.gif) to project root
-
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(); });
Solution 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.
Sev
Updated on June 18, 2022Comments
-
Sev almost 2 years
I would like to implement a jquery
blockUI
to popup and show a progress indicator (loading circle) during postbacks inAsp.Net
. How can I implement this? I am usingmasterpages
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.
-
Ali Adnan about 6 yearsOP Asked while Postback not Ajax Call