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).
