If you’ve ever worked with relatively large UpdatePanels maybe you’ll have had a problem: blocking the user some elements while the asynchronous postback is running. When working with local or LAN environments, the async responses might be fast, but over the internet, or on large calculations the async postback may take a while. During this period, you may want to block the UpdatePanel controls so the user can’t trigger another postback or do any other operations on that UpdatePanel. I’ll show you an easy way to do so by using the AJAX framework for .NET and jQuery and one of its plugins: blockUI.

For those who don’t know jQuery, it’s an opensource Javascript framework that is going to be embedded on future versions of Visual Studio. It’s a very good framework because of its simplicity and its extensibility, having lots of plugins. One of those plugins is the blockUI plugin, which allows you to block and unlock any part of the DOM at will.

Let’s try this with a simple example. Imagine you have an UpdatePanel with various buttons, and you want that when a user clicks on any of it, all the interactive controls of the UpdatePanel become disabled until the asynchronous response has come back and the html has been updated. To do this, we need to know when the UpdatePanel is being updated. The best way to do this is to listen to an event of the PageRequestManager object of our web page. The event is called beginRequest and the way we can attach to it is as follows.

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

This will get the instance of the PageRequestManager object and add a listener to the event, pointed at the javascript function called BeginRequestHandler.

The next step is to actually write this function. One option here would be to manually disable all the controls inside the UpdatePanel that can trigger a postback, but that would be very tedious. Instead, I propose you a way to directly disable all the UpdatePanel. We can do so by using the blockUI plugin from jQuery. The method will look like this.

function BeginRequestHandler(sender, args) {
    $('#').block();
}

This might need a bit of explanation. In jQuery, when using $(‘#element’) we select the element of the DOM that has the id ‘element’. This returns a jQuery object upon which we can execute a series of commands (more on jQuery selectors on the jQuery website). Of those operations we can perform, there’s one that is provided with the blockUI plugin, and it’s called block(). This operation will simply block the DOM element that the jQuery selector has selected. With this simple line of code, then, we can disable an entire UpdatePanel. Since the UpdatePanel will be redrawn when the asynchronous postback comes back, it will be redrawn enabled again, so we don’t have to worry about enabling it again. </em>

I suggest you visit the documentation of the blockUI plugin for more information and blocking options. In this example we simply disable the controls, but using some nice CSS you could use messages and html elements to notice the user that something is going to happen, like a nice Loading meassage or something similar.

Note that this will only work if you have only one UpdatePanel on the web page and all the controls that cause an asynchronous postback are inside the UpdatePanel. However, playing with the sender and args parameters of the BeginRequestHandler method, you can add some logic to decide which controls and UpdatePanels to block. I recommend visiting the PageRequestManager page documentation for more information.

Finally, here’s a fully working example of a very simple web page. Notice that you’ll have to download jquery.js and jquery.blockUI.js from both websites I mentioned earlier.

Default.aspx.

    <script src="jquery.js" type="text/javascript"><!--mce:0--></script>
    <script src="jquery.blockUI.js" type="text/javascript"><!--mce:1--></script>

<form id="form1">
<div>

    <script type="text/javascript"><!--mce:2--></script></div>
</form>

Default.aspx.cs.

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;

namespace UpdatePanelBlockExample
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Thread.Sleep(3000);
            Label1.Text = DateTime.Now.ToLongDateString();
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Thread.Sleep(3000);
            Label1.Text = DateTime.Now.ToShortDateString();
        }
    }
}

</em>