Introduction
One of the best things about Ajax is that it can do postback asyncronously but with that advantage we get one disadvatage is that since it's asynchronus and in the background, the browser will not show you any status, user will not know his status updated or not, his page and form with new data or not. With fast servers and fast methods, this is not a big problem, but whenever you have a method which takes up a bit of time, the user is very likely to get impatient. Fortunately, ASP.NET AJAX solves this problem for us as well, with a nice control called UpdateProgress. It will use your own template to show that an asynchronus method is working. Have a look at the following example, which will show the control in action. It will be explained afterwards.
Main
This is the excellent features of ASP.NET AJAX. The UpdatePanel control enables partial-page rendering in an ASP.NET Web page asynchronously. The contents of the UpdatePanel control will automatically update when a postback event is invoked. This control is very useful when working with the UpdatePanel control. With it control, you can show the status during the partial-page rendering of an UpdatePanel.
The UpdateProgress control helps you design a more intuitive UI when a Web page contains one or more UpdatePanel controls for partial-page rendering. If a partial-page update is slow, you can use the UpdateProgress control to provide visual feedback about the status of the update. You can put multiple UpdateProgress controls on a page, each associated with a different UpdatePanel control. Alternatively, you can use one UpdateProgress control and associate it with all UpdatePanel controls on the page.
We will do the project to show an example.
First create a new web site. Here I name it UpdateProgress. Then drag a ScriptManager, UpdatePanel, and UpdateProgress to your design page, drop the UpdateProgress Control inside the UpdatePanel.
Next important thing you must know is that a table with CssClass combine with UpdateProgress inside UpdatePanel will generate an error. This was known as a bug for ASP.NET AJAX, but we can eliminate this one by either:
1. Do not using both UpdateProgress and table with CSS inside an UpdatePanel or
2. Put the UpdateProgress Control outside of UpdatePanel.
My complete Default.aspx will shown below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD runat="server">
<FORM id=form1 runat="server">
<!-- You need to add this ScriptManager -->
<asp:ScriptManager id=scriptMgr runat="server"></asp:ScriptManager>
<DIV>
This example demonstrates the benefits of an UpdatePanel.
</DIV>
<BR>
<!-- Only this area is updated on PostBack -->
<asp:UpdatePanel id=updatePnl runat="server">
<CONTENTTEMPLATE>
<FIELDSET>
<LEGEND>Panel with random names</LEGEND>
<BR>
<asp:Button id=Button1 onclick=Button1_Click runat="server" Text="Generate random names" Width="200px"></asp:Button>
<BR>
<DIV style="PADDING-BOTTOM: 5px; PADDING-TOP: 5px; HEIGHT: 35px">
<asp:UpdateProgress id=UpdateProgress1 runat="server" AssociatedUpdatePanelID="updatePnl" DisplayAfter="100" DynamicLayout="true">
<PROGRESSTEMPLATE>
<IMG src="img/loading.gif" border=0>
</PROGRESSTEMPLATE>
</asp:UpdateProgress>
</DIV>
<asp:Label id=lblNames runat="server" Text="" Font-Bold="true">
</asp:Label>
<BR>
</FIELDSET>
</CONTENTTEMPLATE>
</asp:UpdatePanel>
</FORM>
You can see image above, it is images/loading.gif inside the syntax for apprear when AJAX in action or in loading progress. This is a progress image to show that data is still updated. Important part from syntax above is you must put all of your updated page body inside of of <ContentTemplate></ContentTemplate> tag. FrontPage design will show like the one below.
Complete Default.aspx.cs C# like shown below. Important part there is using System.Collections.Generic; part. That used for List class import.
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;
using System.Web.UI.MobileControls;
using System.Collections.Generic;
public partial class _Default : System.Web.UI.Page
{
private readonly string[] NAMES = new string[] {
"Bradd", "Jason", "Chris", "Martin", "Mraz", "Thom", "Yorke" };
/// <SUMMARY>
/// This task is running 3 seconds
/// </SUMMARY>
private void FillListBoxRandom()
{
lblNames.Text = "";
List<STRING> names = new List<STRING>();
int count = NAMES.Length;
for (int i = 1; i < 30; i++)
{
System.Threading.Thread.Sleep( 100 );
Random rnd = new Random();
int number = rnd.Next(count);
string selName = NAMES[number];
if (!names.Contains(selName))
{
names.Add(selName);
}
}
foreach( string name in names )
lblNames.Text += name + "(BR)";
}
protected void Button1_Click(object sender, EventArgs e)
{
FillListBoxRandom();
}
}<BR>>
Final result will like shown above.
Conclusion
When adding an UpdateProgress control to your page, you can show a loading process of asyncronous update of your page on a postback. You can use a gif animation as an animation bar. This topic explains, how you can setup an Ajaxenabled project and use the UpdateProgress along with UpdatePanel control.
References
Include all the useful links or references that can help users learn about your tutorial
- ASP.NET AJAX UpdatePanel and UpdateProgress
- ASP.NET The UpdateProgress Control
Download Source Code
Other Related and Popular Articles :
Author Profile : Hans Candra
How would you rate the quality of this content?
Poor
Excellent
Comments
Leave New Comments
Article Content copyright by
Hans Candra
Everything else Copyright © by
WorldofASP.NET
2008