Create a Web Page with an Update Control Panel
Although Web programming software such as Dreamweaver and Microsoft Expressions can create ASP.NET pages, using Microsoft’s free Visual Web Developer 2008 Express Edition (VWD) simplifies adding ASP.NET controls, particularly the AJAX additions. Download this and the ASP.NET framework from the link in Additional Resources if you do not already have the software.
Start this example by opening VWD and creating a new ASP.NET page. Click on “File,” “New File” and select the “Web Form” template. In the list of templates, you will also see an “AJAX Web Form,” which simplifies using AJAX but this introduction uses a longer route to demonstrate the difference between full and partial postback. Name the form “UpdateControlDemo.” VWD will create two files. One is the aspx file with this name and the second is the Visual Basic code file, which will be name “UpdateControlDemo.aspx.vb.” Both are shown in separate tabs in VWD.
In the Design view, add a label control from the Toolbox on the left. Empty the Text property in the Properties panel on the right and change the ID to “Current Time.” Add a Button control from the Toolbox and change the button ID to “btnFullPB” and the Text to “Full Postback.” Click on the UpdateControlDemo.aspx.vb tab, which should open in Source view. Enter the follow lines of code on the first empty line after the line beginning “Inherits System.Web.UI.Page”:
Protected Sub Page_Load(ByVal sender as Object, ByVal e as System.EventArgs) Handles Me.Load
CurrentTime.Text = DateTime.Now
This sets up a display of the current time when the page loads. Now check the page in “View in Browser” or load it on a live Web page on your site. When you click on the “Full Postback” button, the current date and time should display. Each time you click on this, it will update.
Demonstrate Partial Postback
To see the difference now between full and partial postback, add two more controls, a Label and a Button, as above within the Update Control Panel using the Design view for the UpdateControlDemo.aspx page. Click and drag these to ensure they go in the right place. Clear the Text property of the Label and change the ID to “AJAXTime.” Change the ID of the Button to “PartialPB” and the Text property to “Partial Postback.” To complete the coding, in the “UpdateControlDemo.aspx.vb” source add one more line in the subroutine defined above:
AJAXTime.Text = DateTime.Now
Now, when you preview the page in a browser both labels display the same information. If you click on the “Partial Postback” button, only the AJAXTime updates because server only dealt with the part of the code in the partial postback section. If you click on “Full Postback” both times will be in agreement again. While this example does not demonstrate real time savings in updating pages, these benefits do accrue when dealing with complicated Web pages. In the next article in this series, describing another AJAX control, the UpdateProgress control, you will learn about a way to let the user know about progress when dealing with large databases or server delays.
Major Web sites such as Google are using AJAX to speed up display of needed information. Learning about these enhancements will benefit most Web developers.
This post is part of the series: Using AJAX Controls in ASP.NET
- Getting Started with AJAX in ASP.NET 3.5 Part 2: Using the Update Progress Control
- Getting Started with AJAX in ASP.NET 3.5: Using the Update Control Panel