This tutorial was created with Microsoft's ASP.NET AJAX Extensions, which can be downloaded at this link
In this tutorial, we will introduce you to the AJAX UpdateProgress. This Control can be used to give the user more information about what is going on when AJAX is processing a request. Because AJAX is Asynchronous and runs in the background, there is no default status and the user doesn't know if anything is happening or not, until the process is complete. This is not usually a problem on the faster servers, but we can use the UpdateProgress to tell the user that AJAX is dealing with the process and will complete soon.
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
First, we start by creating an AJAX-Enabled web site in Visual Studio .NET 2005, with the AJAX Extensions installed.
The AJAX Extensions (from Microsoft) make it a whole lot easier to create AJAX web pages, as Visual Studio will add in the necessary assembly references, etc. into the Web.config
When we first open our Default.aspx page, we should already have a Script Manager:
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
Next, we are going to add two UpdateProgress Controls, two UpdatePanel Controls. Inside the UpdateProgress will be the message displayed to the user when the AJAX is processing the request. We can also add an animated GIF in here, if preferred.
<asp:UpdateProgress runat="server" id="PageUpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="false">
<ProgressTemplate>
Processing Request from Update 1. Please Wait..
</ProgressTemplate>
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Button runat="server" id="UpdateButton" onclick="UpdateButton_Click" text="Update 1" />
</ContentTemplate>
<asp:UpdateProgress runat="server" id="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" DynamicLayout="false">
<ProgressTemplate>
Processing Request from Update 2. Please Wait..
</ProgressTemplate>
<asp:UpdatePanel runat="server" id="UpdatePanel2">
<ContentTemplate>
<asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton2_Click" text="Update 2" />
</ContentTemplate> |
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
Note the attributes of the UpdateProgress Controls AssociatedUpdatePanelID and DynamicLayout. This allows us to have multiple UpdateProgress Controls on the same page, and each be associated with a different UpdatePanel. The DynamicLayout set to false will reserve space for the contents of this control. This means that there will be a space on the page for where the contents will appear.
The ASPX page will look something like this:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="false">
<ProgressTemplate>
Processing Request from Update 1. Please Wait..
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Button runat="server" id="UpdateButton" onclick="UpdateButton_Click" text="Update 1" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress runat="server" id="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" DynamicLayout="false">
<ProgressTemplate>
Processing Request from Update 2. Please Wait..
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="UpdatePanel2">
<ContentTemplate>
<asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton2_Click" text="Update 2" />
</ContentTemplate>
</asp:UpdatePanel> |
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Now we can add logic to the buttons with the UpdatePanels. For this demonstration, we will make the script goto sleep for 5 seconds to show how the UpdateProgress is displayed.
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void UpdateButton_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
protected void UpdateButton2_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
} |
