jQuery Update Panel Progress Using jQuery BlockUI Plugin

This post explains how you can use jQuery BlockUI Plugin to show Progress during postback made via UpdatePanel. Normally we have to add UpdateProgress to show progress during async postbacks. Using this tutorial, You will no longer require UpdateProgress and still you will be able to show great looking progressbar using BlockUI plugin.

JavaScript:

function showProgress() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest.add_beginRequest(function () {
        $.blockUI({ message: $('#divBlock'), css: { border: 'none', background: 'transparent'} });
    });
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
        $.unblockUI();
    });
}

I have created a function named showProgress. This function uses add_beginRequest and add_endRequest of PageRequestManager.

The beginRequest event is raised before the processing of an asynchronous postback starts and the postback is sent to the server. You can use this event to call custom script to set a request header or to start an animation that notifies the user that the postback is being processed.

The endRequest event is raised after an asynchronous postback is finished and control has been returned to the browser.

So my above code uses these two events to BlockUI and unblockUI.

I have a div containing loading image in my aspx page. You can use same div and Javascript in Master page and that will enable progress for all update panels in the application.

By Default this div is hidden by using css “display:none”; We pass the ID of the div to blockUI plugin.

Easy Isn’t it. You can download the source code by Clicking Here.