In my previous post I talked about the ScriptManager and the UpdatePanel. I showed you how you could make an asynchronous request to the server. Remember that not your whole page gets send to the server and back. The advantage of using asynchronous requests is that the user can continue working while your UpdatePanel is getting the new HTML from the server.
A thing you could do is adding a customization to your webpage while the update is in progress. For example you could add an animation to your page, or you could prevent your user to update a panel as long as the panel is busy with a previous request. You know them, those users who cannot wait and have the urge to click several times on the same button.
Well, let's give the user a nice waiting answer J.
You cannot use the Document Object Model to control asynchronous postbacks to the server. The thing that you need to use is the PageRequestManager class provided by the ASP.NET AJAX Framework. This class provides some events, methods and properties you can use while an update is in progress. Following is a list of event that you can use:
-
initializeRequest
This event gets fired before the asynchronous request starts, this is the event that we are going to use to cancel a second postback.
-
beginRequest
Raised before the processing of an asynchronous postback starts and the postback request is sent to the server.
-
pageLoading
Raised after the response from the server to an asynchronous postback is received but before any content on the page is updated
-
pageLoaded
Raised after all content on the page is refreshed as a result of either a synchronous or an asynchronous postback.
-
endRequest
Raised after an asynchronous postback is finished and control has been returned to the browser.
So, as said, we are going to make use of the initializeRequest event to cancel an update. Lets switch over to some code.
First we need to create an AJAX Enabled website, which I showed you in my previous post. Once the project is created, we open the Default.aspx page and we are going to place an UpdatePanel on the page, under the ScriptManager.
For this example it is not important what you place in the UpdatePanel, just make sure you have a control that can fire a postback.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= System.DateTime.Now.ToLongTimeString() %>
<asp:Button ID="UpdateButton" Text="Refresh Panel" runat="server" OnClick="UpdateButton_Click" />
</ContentTemplate>
</asp:UpdatePanel>
To make sure we have enough time to start a second update, we are going to wait for five seconds by adding some sleep in our code behind, of course this depends on your clicking speed and the fact if you are an annoying user or not J.
protected void UpdateButton_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
Start your website and try it out, hit the button wait for five seconds. Now click 3 times on the button without waiting for five seconds, you will see that your page gets updated after 15 seconds, this is of course logic but it is not something that we want to happen.
The thing we need to do now, is getting (not creating) an instance of the PageRequestManager and register an event that gets fired when a new request occurs.
function pageLoad()
{
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(RequestingData);
}
Now, we need to add code to the event. In our code we are going to verify if a request is currently busy and that the request is fired by our UpdateButton. If so, we are going to use the set_cancel method to cancel our new request.
function RequestingData(sender, args)
{
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'UpdateButton')
{
args.set_cancel(true);
alert('Patience ….');
}
}
Now againg start your website and click on the button.