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:
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<br /><br />
<asp:UpdatePanel ID="U2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<br /><br /> |
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:
<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="btn_GetTime1" runat="server" Text="Get Time (1)" OnClick="btn_GetTime1_Click" />
</ContentTemplate>
<br /><br /> <asp:UpdatePanel ID="U2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="btn_GetTime2" runat="server" Text="Get Time (2)" />
</ContentTemplate> |
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
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:
using System.Threading;
..
protected void btn_GetTime1_Click(object sender, EventArgs e)
{
Thread.Sleep(3000);
} |
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:
<asp:UpdateProgress ID="UPr1" runat="server" AssociatedUpdatePanelID="UP1">
<ProgressTemplate>
<br /><br />
Please wait..
</ProgressTemplate> |
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
We will also include some JavaScript to check if an Async PostBack is currently in progress. To do this, add the following script:
<script type="text/javascript">
var instance = Sys.WebForms.PageRequestManager.getInstance();
instance.add_initializeRequest(instance_initializeRequest);
function instance_initializeRequest(sender, args) {
if (instance.get_isInAsyncPostBack()) {
alert('Still processing request. Please wait..');
args.set_cancel(true);
}
} |
If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
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:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="btn_GetTime1" runat="server" Text="Get Time (1)" OnClick="btn_GetTime1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UPr1" runat="server" AssociatedUpdatePanelID="UP1">
<ProgressTemplate>
<br /><br />
Please wait..
</ProgressTemplate>
</asp:UpdateProgress>
<br /><br />
<asp:UpdatePanel ID="U2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="btn_GetTime2" runat="server" Text="Get Time (2)" />
</ContentTemplate>
</asp:UpdatePanel>
<br /><br />
</body>
</html>
<script type="text/javascript">
var instance = Sys.WebForms.PageRequestManager.getInstance();
instance.add_initializeRequest(instance_initializeRequest);
function instance_initializeRequest(sender, args) {
if (instance.get_isInAsyncPostBack()) {
alert('Still processing request. Please wait..');
args.set_cancel(true);
}
} |
