Working with ASP.NET AJAX UpdateProgress Control- Part 2
page 4 of 5
by Nidal Arabi
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 50624/ 94

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>
</ProgressTemplate>

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)
  System.Threading.Thread.Sleep(3000)
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).


View Entire Article

User Comments

Title: fbdb   
Name: dfbdb
Date: 2012-09-12 10:04:04 AM
Comment:
dfbdbdfb
Title: hgkjhk   
Name: hjkjhk
Date: 2012-08-17 9:59:24 AM
Comment:
hjkjhkh
Title: tyj   
Name: gwer
Date: 2012-07-20 3:00:49 PM
Comment:
4y
Title: Working with ASP.NET AJAX UpdateProgress Control- Part 2   
Name: irfan saifi
Date: 2010-05-19 8:46:29 AM
Comment:
hi,
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
Comment:
This doesnt work
Title: Multi UpdateProgress on page   
Name: Ehsan Amiri
Date: 2009-10-26 1:58:19 AM
Comment:
Dear All,
hi,
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
Email:ehsan_mybox@yahoo.ca
Title: Senior Programmer   
Name: Vuyisw Maseko
Date: 2009-04-22 6:33:18 AM
Comment:
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 ASPAlliance.com  |  Page Processed at 2019-06-19 8:03:40 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search