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.
I figured it out myself.
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();
});