Wahlin on .NET

Partial-Page Updates With the UpdatePanel

Add partial-page update capabilities to your ASP.NET Web pages.

• By Dan Wahlin
• 06/12/2007

Most Web users are accustomed to full-page updates each time they click a button, select an item from a drop-down list or perform another type of action. While reloading entire Web pages in the browser is the norm, the ASP.NET AJAX Extensions can enhance the overall end-user experience by performing partial-page updates. A partial-page update occurs when a portion of a page is updated with new data while the other parts of the page are left alone. By using partial-page update techniques, you can get data to users more quickly and efficiently, enriching their overall experience.

In this column, I'll introduce you to an ASP.NET AJAX Extensions control called the UpdatePanel that can be used to easily add partial-page update capabilities to your ASP.NET Web pages. You don't need to know JavaScript or other AJAX technologies to use the UpdatePanel control.

Getting Started With UpdatePanel
If you're an ASP.NET application developer, you'll feel right at home using the controls included in the ASP.NET AJAX Extensions. The main control is called the UpdatePanel. You can perform partial-page updates with it by simply wrapping a template around content that needs to be updated through asynchronous postback operations.

Before using the UpdatePanel control, you'll need to create a new ASP.NET AJAX-enabled Web site using Visual Web Developer 2005 Express Edition or Visual Studio 2005 (which, of course, means you'll need to install the ASP.NET AJAX Extensions). You'll also need to add a ScriptManager control into the page that you'd like to AJAX-enable. In a previous column, I discussed ScriptManager fundamentals, including how you can add a ScriptManager control to a page:

<asp:ScriptManager id="sm" 
  runat="Server" />

Once a ScriptManager control has been added, you can wrap any content within a page that needs to perform a partial-page in an UpdatePanel control's template. For example, if you have a GridView control that loads data and allows users to page through records or sort specific columns, you can avoid the full-page postback operation that normally occurs by wrapping the GridView in an UpdatePanel. Listing 1 shows an UpdatePanel and its associated ContentTemplate.

All of the JavaScript required to invoke the XMLHttpRequest object, send the data and process the data is automatically handled by the ScriptManager and UpdatePanel controls, allowing you to concentrate on more important activities such as creating the business rules for the application.

UpdatePanel Request and Response Messages
The UpdatePanel's asynchronous postback messages use a unique format for sending request and response data. You can use a tool such as Fiddler to inspect messages and see what's going on behind the scenes.

Request messages use standard name/value pair URL formatting (similar to what you see on a query string). Data is sent using a POST operation, as opposed to a GET operation. Information required by the server to successfully process the request is also sent, including the ScriptManager and UpdatePanel control IDs, target control ID and ViewState. Listing 2 shows a partial-page update request message.

Response messages are pipe-delimited. They contain the size of the message, the UpdatePanel ID that will be updated in the page, data returned from the server, ViewState information and other information necessary for completing the partial-page update. Listing 3 shows a partial-page update response message.

By using the UpdatePanel control, you can add partial-page update capabilities to your ASP.NET Web pages without a lot of JavaScript coding. This control allows you to quickly and easily AJAX-enable pages using familiar server-side control techniques.

In my next column, I'll discuss different UpdatePanel properties, and show you how to use them to monitor updates to content in an UpdatePanel control.

• Get Code Download