: C# 2008 Programmer

Displaying Progress Using the UpdateProgress Control

Displaying Progress Using the UpdateProgress Control

The refreshing of the GridView control may happen very quickly on your computer because your web server is running locally. In the real world, there is network latency, and users may experience a delay but not be aware that a control is in the midst of a refresh. Therefore, it's important to give visual cues to users to let them know when an update is in progress.

You can display a progress report while an <asp:UpdatePanel> is being refreshed by using the <asp:UpdateProgress> control. Add the following to the source view of Default.aspx:

<body>
<form runat="server">
<div>
<asp:ScriptManager runat="server">
</asp:ScriptManager>
Display titles by publisher:
<asp:DropDownList runat="server"
DataSourceID="LinqDataSource2"
DataTextField="pub_name" DataValueField="pub_id"
AutoPostBack="True">
</asp:DropDownList>
<asp:UpdatePanel runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1"/>
</Triggers>
<ContentTemplate>
<asp:UpdateProgress runat="server">
<ProgressTemplate>
<asp:Label runat="server" Text="Label">
Displaying titles...Please wait.
</asp:Label>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:GridView runat="server"
AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False"
BackColor="LightGoldenrodYellow" BorderColor="Tan"
...

To inject a delay, double-click on the dropdown list control and use the Sleep() method to insert a two-second delay:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) {
System.Threading.Thread.Sleep(2000);
}

Within the <ProgressTemplate> element, you can embed a control such as an <asp:Label> control or an <asp:img> control containing an animated GIF image to display some information to inform the user. Here, you display the message "Displaying titles Please wait" (see Figure17-27) to let the user know that the GridView control is updating.


Figure 17-27

Press F5 to test the application.


: 1.043. /Cache: 3 / 1