Pin Me

Getting Started with AJAX in ASP.NET 3.5: Using the Update Control Panel

written by: cra8051•edited by: Michele McDonough•updated: 6/9/2011

The AJAX framework in ASP.NET 3.5 adds a rich library of functionality with additional Web controls that speed up interchanges between client and server through partial postback. One of the most important tools is the Update Control Panel, which identifies a region on the page for partial-postback.

  • slide 1 of 3

    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

    End Sub

    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.

  • slide 2 of 3

    Demonstrate Partial Postback

    In the VWD, add an Update Control Panel from the Toolbox, taking care to put it below the controls you just added. The new control is listed under the “AJAX Extensions” section in the Toolbox. Add one more control from this section, the “Script Manager,” which contains all the JavaScript necessary for partial postback. You must add this above the Update Panel Control or it will generate an error.

    UpdateControl Example; screenshot by Charles Anderson 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.

Using AJAX Controls in ASP.NET

AJAX is an enhancement to ASP.NET that was included in the ASP.NET 3.5. It includes a number of controls, of which two can speed up communication between teh client and server by eliminating some unnecessary posting back of HTML code as well as providing the user with progress information.
  1. Getting Started with AJAX in ASP.NET 3.5 Part 2: Using the Update Progress Control
  2. Getting Started with AJAX in ASP.NET 3.5: Using the Update Control Panel