Follow the 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 UpdatePanelTest.
5.
Choose ASP.NET AJAX-Enabled Web Site.
6.
Select Visual Basic from the File System
location box.
7.
Click OK to create the project.
8.
Visual Studio 2005 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.
You noticed that
there is a control on the page already called script manager. (Well, 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.
10. In
your Toolbox you should find a new group called AJAX Extensions. Locate it and
see the controls in it.
11. 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 without the Update
Panel
12. 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
13. 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.
14. Now,
let us get back to the design mode and add an Update Panel Control from AJAX
Extensions and drop it on the design page.
15. In
addition, move the second date line as well as the button into the update panel
as shown in Figure 2.
Figure 2 - Simple application with UpdatePanel
16. Run
the program again. Please note that the two dates starts the same, but whenever
you click the button, only the second date is changing now. You will also
notice that the page does not refresh each time you click the Button control.
Let us understand what happened and explain a little bit the
UpdatePanel. When the code runs without the UpdatePanel and there is a post
back event, form load will execute and change the contents of the two labels to
the same date and time. When the update panel was introduced the date label as
well as the button were included it. So simply speaking, now the button will
only update the controls that are within the update panel borders since it is a
part of it.
Therefore, only a part of the page was sent back to the
server and the controls inside the Update Panel were refreshed. We have solved
our problem stated above and had fun doing it without even a big effort.
