Working with ASP.NET AJAX UpdateProgress Control- Part 2
Published: 21 Sep 2007
This article is the second in the chain of introducing Microsoft AJAX Extensions to teach developers about this technology and will discuss the issue of refreshing the user web page and give them the progress feeling.
by Nidal Arabi
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 50620/ 100


This article is the second one in a series of articles about Microsoft AJAX Extensions (previously named ATLAS, I like the old name better). The first one did speak about the UpdatePanel. So keep coming back for more.


Imagine yourself having a web page that is processing a huge amount of data on the server. That would take time, yes. Well, your end user does not know when it is going to finish and does not have any indication of when it is going to finish except for the browser status progress bar. The browser status bar does not tell you anything about the percent of the job done. Why is that? It is simply because the browser does not know how much it is going to take. Do not panic, there is a solution.

About the UpdateProgress Control

The UpdateProgress control provides status information about partial-page updates in Update Panel controls. You can customize the default content and the layout of the Update Progress control. To prevent flashing when a partial-page update is very fast, you can specify a delay before the Update Progress control is displayed.

You associate an UpdateProgress control with an UpdatePanel control by setting the AssociatedUpdatePanelId property of the UpdateProgress control. When a post back event originates from an UpdatePanel control, any associated UpdateProgress controls are displayed. If you do not associate the UpdateProgress control with a specific UpdatePanel control, the Update Progress control displays progress for any asynchronous post back.

Should you need more information on how to use an UpdatePanel please revert back to my other article on this topic.

It is also worth noting that in order to be able to create this solution you have to revert back to the same article cited above on what is needed to be able to continue applying what is described in this article. If your computer is already setup with Microsoft AJAX Extensions, then proceed directly to the next paragraph.

Creating Your AJAX UpdateProgress Solution

Follow these easy steps below to create your AJAX solution.

1.    Start your Visual Studio 2005 IDE.

2.    Choose Create Web Site from the menu.

3.    In this sample application we will use the Visual Basic language for the sample application.

4.    Name the solution UpdateProgressTest.

5.    Choose ASP.NET AJAX Enabled Web Site.

6.    Choose File System in the location box.

7.    Click OK to create the project.

8.    Visual Studio will create your project with a Default.aspx page and probably a readme.txt. Go ahead and get rid of the latter file.

9.    Open Default.aspx page in design view.

10. You noticed that there is a control on the page already called ScriptManager. (AJAX is really a script based implementation of the language JavaScript.) In short, Script Manager control manages client script for Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.

11. In your Toolbox you should find a new group called AJAX Extensions. Locate it and see the controls in it.

12. Now drag two labels to the design area and write the text as it is shown in Figure 1. Do not forget to add a button.

Figure 1 - Simple application with Update Panel

13. Double click your form and write the code in listing 1 in the Form Load event.

Listing 1 - Code for the form load event

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  Label1.Text = Date.Now
  Label2.Text = Date.Now
End Sub

14. Run the program. Notice that the labels are filled now with the current date and time. Every time you click the button the time will change. Why, because the code is the form load event.

15. Now, let us get back to the design mode and add an UpdatePanel Control from AJAX Extensions and drop it on the design page.

16. In addition, move the second date line as well as the button into the UpdatePanel as shown in Figure 1.

17. Run the program again. Please note that the two dates starts the same, but whenever you click the button only the second date changes.

18. Now, drag an UpdateProgress control from the AJAX Extensions tab and drop it wherever you like on the web form.

19. In the properties window of UpdateProgress control set the AssociatedUpdatePanelId to UpdatePanel1 and set DisplayAfter to 1.

20. Now you to go to the source mode of the web page and add the lines in listing 2.

Listing 2 - HTML Configuration of the UpdateProgress Panel

<ProgressTemplate>Refreshing the page.Please Wait 
<img alt="Spinner" src="spinner.gif"></img>

21. Copy any GIF animated picture, place it in the same directory as the project and name it spinner.gif.

22. Go back to the Design mode of the form, double click the button and write the lines provided in Listing 3.

Listing 3 - Code for the button click event

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
End Sub

Let us understand what happened and explain a little bit the UpdateProgress control. When the code runs the web form contains the current date as well as time on the screen. However, when the end user clicks the button, the UpdateProgress control comes to the rescue and starts the sentence provided in the progress template as well as the animated gif you have provided. This action will continue for a period of 3 seconds as provided in the sleep instruction. Please note that the sleep instruction should be replaced with your real code.

Should you be more interested in making an elaborate progress animation you could use a timer control (covered in the upcoming article from the series).


To conclude, we have covered now two ASP.NET AJAX Extensions control that really complete each other. The demo presented here may be simple, but I am counting on your creativity to let you see what you can do with these simple yet powerful controls.

Happy AJAXfying and see you in the next article.

User Comments

Title: fbdb   
Name: dfbdb
Date: 2012-09-12 10:04:04 AM
Title: hgkjhk   
Name: hjkjhk
Date: 2012-08-17 9:59:24 AM
Title: tyj   
Name: gwer
Date: 2012-07-20 3:00:49 PM
Title: Working with ASP.NET AJAX UpdateProgress Control- Part 2   
Name: irfan saifi
Date: 2010-05-19 8:46:29 AM
i have two button and two update panel and two update progress on page,
i want to click to each button and updated one pannel and show one update progress ,but show the all update progress
i set the property "AssociatedUpdatePanelID" in update progress with one update panel (ID),but not work
Title: Working with ASP.NET AJAX UpdateProgress Control- Part 2   
Name: Nitha
Date: 2010-02-11 4:55:36 AM
This doesnt work
Title: Multi UpdateProgress on page   
Name: Ehsan Amiri
Date: 2009-10-26 1:58:19 AM
Dear All,
i have two button and two update panel and two update progress on page,
i want to click to each button and updated one pannel and show one update progress ,but show the all update progress
i set the property "AssociatedUpdatePanelID" in update progress with one update panel (ID),but not work
Title: Senior Programmer   
Name: Vuyisw Maseko
Date: 2009-04-22 6:33:18 AM
That was a Great Artcle and easy to Follow. I have a Gridview that gets Displayed when the Page Load, Now i want to Show the Progress bar First if the Grid is Large or if a certain button has been Clicked

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2019  |  Page Processed at 2019-06-20 1:19:50 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search