AJAX brings a lot of functionality to Web Applications, and an almost desktop-like experience. Users no longer have to wait for the whole page to be resent from the Web Server when making a small request on the page. AJAX has the ability to update areas of a page separately using UpdatePanels. However, when there are multiple UpdatePanels on a page, the user may mistakingly begin another Asynchronous Request while one is being processed. For example, if a user makes one change on the web page and the process is still active when they make another AJAX request, the second request will take precedence over the first. This means the first request will never complete.

In this tutorial, you will learn how to use AJAX to detect if an Asynchronous request is still being processed when another is called. By doing this, we can notify the user, and allow the first request to complete before starting another.
To demonstrate this, we will create two UpdatePanels, each displaying the current date and time, and with a button. Each button will update its own UpdatePanel when clicked. However, when the first button is clicked, we will purposely make the process take 3 seconds to complete, giving us enough time to click the second button to test. Upon clicking the second button while the first is still processing, we should be notified that a process is still active and not allow the second process to initiate.

Let’s start by adding the ScriptManager and the two UpdatePanels:

Notice we set the UpdateMode on both Panels to Conditional. This is because we do not want them both updating at the same time – each button should update their own UpdatePanel only.
Let’s go ahead and add the buttons and the current time to the UpdatePanels:

Notice we include a handler for the first Button – here we will make the thread sleep for 3 seconds. This will be done in the code-behind like so:

To make the request more visual, let’s add an UpdateProgress into the mix as well. This will show us when a request is in progress:

We will also include some JavaScript to check if an Async PostBack is currently in progress. To do this, add the following script:

Now when we push the first button, it will wait for 3 seconds before updating the time. If you push the second button before the time updates, we will get a popup message notifying us that the request is still processing.
The ASPX page will look something like this:

Download Source Files