Atlas - Visual Feedback Using the UpdateProgress Control

In this article, we will take a look at the ease with which Atlas allows you to provide user feedback on the progress of operations on an ASP.Net 2.0 web page.

In the first part of this Atlas article series, we took a look at the Atlas UpdatePanel control and it's usage. Today's developers have such a wide array of options and every day new technology brings more potential at our finger tips, resulting in a progressive reduction in the use of these finger tips for typing code!

Pre-requisites

The sample code is built using Atlas July 2006 CTP Preview and ASP.Net 2.0.

Atlas website: http://atlas.asp.net

The UpdateProgress Control

As indicated by the name of the control, the UpdateProgress Control available in Atlas, provides the user with visual feedback when an asynchronous web page operation is in progress in conjunction with an Atlas UpdatePanel control.

We start with a simple sample used in the first article of this series (Atlas: Partial Page Rendering using the UpdatePanel control). The web page searches the backend database for user records matching the last name entered in the Search text box. The Search results are contained in a GridView within an UpdatePanel control. As we saw in the first article, the UpdatePanel provides a seamless asynchronous partial rendering in the page, eliminating the page flicker caused by Page Postbacks.

Visual indication for the in-progress status of the requested operation can be provided by simply adding the UpdateProgress control on the web page.

The UpdateProgress control has a ProgressTemplate which is used to specify the visual indication. The developer does not need to take any other action. The ProgressTemplate can contain one or more controls, text and/or images.

You can use an animated gif in the ProgressTemplate to make the display seem more interactive.

Sample: Basic Usage of the UpdateProgress Control

Database Table Structure

The backend used was SQL Server Express with the following table structure. The connectionstring may be modified to use a different database

Field Name	Type
EmpID	Int (Identity)
FName	Nchar(50)
LName	Nchar(50)
OfficePhone	Nchar(20)

ASP.Net Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="upd_data.aspx.cs" Inherits="upd_data" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

</head>

<body>

<atlas:ScriptManager ID="SM1" runat="server" EnablePartialRendering="true"></atlas:ScriptManager>

<div>

<asp:TextBox ID="txtLNameSearch" runat="server" AutoPostBack="True"></asp:TextBox>

<asp:Button ID="btnSearch" runat="server" Text="Search" /></div>

<atlas:UpdateProgress ID="updateprogress1" runat="server">

<div style="background-color:yellow">Searching database for matching records...</div>

</ProgressTemplate>

</atlas:UpdateProgress>

<atlas:UpdatePanel ID="up" runat="server" Mode="conditional" RenderMode="Inline">

<asp:GridView ID="gvEmp" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource2"

EmptyDataText="There are no data records to display.">

<asp:BoundField DataField="EmpId" HeaderText="Emp ID" ReadOnly="True" SortExpression="EmpId" />

<asp:BoundField DataField="FName" HeaderText="First Name" SortExpression="FName" />

<asp:BoundField DataField="LName" HeaderText="Last Name" SortExpression="LName" />

<asp:BoundField DataField="OfficePhone" HeaderText="Office Phone" SortExpression="OfficePhone" />

</Columns>

</asp:GridView>

</ContentTemplate>

<atlas:ControlValueTrigger ControlID="txtLNameSearch" PropertyName="Text" />

</Triggers>

</atlas:UpdatePanel>

<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:HRConnectionString1 %>"

ProviderName="<%$ ConnectionStrings:HRConnectionString1.ProviderName %>" SelectCommand="SELECT [EmpId], [FName], [LName], [OfficePhone] FROM [Emp] WHERE ([LName] LIKE '%' + @LName + '%')">

<asp:ControlParameter ControlID="txtLNameSearch" Name="LName" PropertyName="Text" Type="String" />

</SelectParameters>

</asp:SqlDataSource>

</form>

</body>

</html>

Image: The UpdateProgress Control displaying feedback

Image: After the operation is completed, the UpdateProgress is not visible.

Additional Usage Notes

The UpdateProgress control can be used within master pages without any special settings.
Only one UpdateProgress control is required on a single page.
Typically, animated gifs are used to provide a more interactive feedback message.
To provide an operation to cancel the operation in progress, provide a button with the id 'abortButton' setup as follows:

<button id="abortButton" type="button" runat="server">Cancel Search</button>

Additional Resources

Bryan Sampica's blog: An innovative setup for displaying the update progress at the location of the user's cursor position: Position the UpdateProgress control at Mouse Cursor

Sajay Antony's blog: An interesting blog entry describing How to Hide the UpdatePanel during UpdateProgress

Conclusion

I hope this article provides an introduction to this useful feature in Atlas. Just a few lines of code introduces amazing functionality in the application.