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.

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.

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

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();
        }
    }
}

And using AJAX means Javascript, which is an interpreted, weakly typed programming language ran by the browser where the web page containing it executes. And believe me, Javascript is not easy. It’s not similar to Java, it’s not similar to C++ and it’s not similar to C#. To learn the tricks and tips of Javascript I recommend you start by reading this article from the MSDN: Create Advanced Web Applications With Object-Oriented Techniques. It’s a very good introduction for people used to program with more typical object oriented programming languages.

And on top of that, Javascript is not easy to debug either, because you don’t have a compiler to test your code correctness (and I am not talking about syntax, for that you can use a specific editor like Aptana or any other free Javascript parser like JSLint), and because power is always dangerous, and Javascript is a very powerful tool which allows you to do some really dangerous things that can overcome you if not used wisely. Also, the fact that the client actually executing Javascript code is the browser makes things tricky, because you need to have some help from those programs to actually be able to access the execution of that code. Both Microsoft and Firefox have those tools. Unfortunately, the Microsoft ones are either crappy (like Microsoft Script Editor) or you have to pay a lot of money for them (either third party applications or Visual Studio). Fortunately, once more the Open Source community comes to our rescue. It’s name: Firebug.

Actually Firebug is much more than just a Javascript Debugger, it’s more like a mini web development suite for Firefox. It allows you to view and edit HTML and CSS in a fancy way and on the fly, you can naviagate through the DOM model of the web page in a fancy and easy way, it has a network monitoring feature to see how much bandwith is used on the web navigation and on the asynchonous callbacks, and most importantly, it has a Javascript debugger and profiler which has most of the features you might expect from another programming language debugger: inspects, flow control, breakpoints and so on. It has also a console which will tell you the errors encountered on your code and will point you exactly to the file and line of code that produced it. In a few words: it makes web and Javascript development a lot easier than it was before.