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.
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
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> |
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.
Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!
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> |
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.
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.
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As System.EventArgs)
System.Threading.Thread.Sleep(5000)
End Sub
Protected Sub UpdateButton2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
System.Threading.Thread.Sleep(5000)
End Sub |
