Working with Partial Page Updates in ASP.NET Ajax
By
|
Partial-page rendering is a great feature of Ajax - you can use it to refresh only a portion of your web page rather than the entire page itself. The end user sees that the entire page doesn't reload with every post back to the web server - this improves the application's responsiveness as a whole. This article discusses how you can implement partial page updates using the Update Panel control. It also discusses how you can use the Update Progress control in conjunction with the Update Panel control to enhance the user experience.
What is Ajax?
Before we understand what Partial – page rendering actually is and how it can be implemented, let’s quickly take a look at what Ajax is and why it is useful. Ajax is an acronym for Asynchronous JavaScript and XML. It is a combination of different technologies, used for building rich and responsive user interfaces. Ajax is a popular technology that is used in many different ways on the World Wide Web. It has become a technology of choice for building fast and responsive user interfaces. The benefits of using Ajax include:
- Faster page renderings and support for partial page updates
- Rich and, responsive user interfaces
- Reduced consumption of server resources
The ScriptManager Control
The ScriptManager control is the brain of an Ajax enabled web page. To implement partial page rendering in your web page, you should set the EnablePartialRendering property of the ScriptManager control to true.
The UpdatePanel Control
Partial-page rendering is a concept that enables rendering of only a portion of a web page to avoid complete page refreshes and hence improve the user experience. The UpdatePanel control facilitates partial-page rendering in Ajax enabled ASP.NET web pages.
Implementing Partial Page Updates in ASP.NET Ajax
In this section we will discuss how we can implement partial-page rendering in an Ajax enabled ASP.NET web page. Follow these steps:
1. Open Visual Studio 2008 or Visual Studio 2010 in your system
2. Click on File -> New -> Project and select Ajax enabled ASP.NET Web Application from the list of templates displayed
3. Save the project with a name
4. Now, in the design view mode of the Default.aspx web page, drag and drop a ScriptManager and an UpdatePanel control. Here’s what the mark-up code for these controls look like:
The ContentTemplate
You now need to use the ContentTemplate tag of the UpdatePanel control to place controls that you would want to participate in partial page rendering. Refer to the code snippet below that illustrates how you would use the ContentTemplate to place controls for partial page rendering.
The Complete Mark-Up Code
Here's the complete mark-up code:
The Click Event Handler for the Button
The click event handler for the Button control is responsible for updating the current time in the Label control. Here's how you define the click handler for the Button control:
The Complete Code- Behind Code
The complete source code of the code behind file is as follows:
When you execute the application, you’ll see the current time displayed – you can click the Button control displayed just beneath the Label control to refresh the time, and, there will be no postbacks at all!
The UpdateProgress Control
The UpdateProgress control facilitates designing an intuitive user interface while a partial page rendering is in progress. It can be used in conjunction with the Update Panel control to enhance the user experience while some asynchronous update operation is in progress in your Ajax enabled ASP.NET web pages.
Note that as Ajax works in an asynchronous mode, the web browser does not show any progress while an asynchronous operation is in progress. However, you can make use of the UpdateProgress control in ASP.NET Ajax to show progress while an asynchronous operation is in action. Here is an example that shows how you can implement this control in conjunction with the UpdatePanel control in your Ajax enabled ASP.NET web pages.
Note that you can have multiple UpdatePanel and UpdateProgress controls in your web page. However, you can have only one ScriptManager control. Now, the AssociatedUpdatePanelID property of the UpdateProgress control is used to associate it with a particular UpdatePanel control in your web page. Also, you can use the DisplayAfter property of the UpdateProgress control to specify the minimum amount of time to elapse before showing the Update Progress control, i.e., you can set it to 5000 if you wish to wait for 5 seconds.
Note that you can also display an image in lieu of static text to display the progress. Here is an example that illustrates this:
Using Multiple UpdateProgress Controls
Here's a code snippet that illustrates how multiple UpdateProgress and UpdatePanel controls can be associated:
Note that as and when a postback originates from an UpdatePanel control, any associated UpdateProgress controls for the UpdatePanel controls participating in the post back operation are displayed. Now, if you haven't associated an UpdateProgress control with any particular UpdatePanel control, the UpdateProgress control displays progress for any asynchronous postback operation in that web page.
Summary
In this article, we have looked at how we can implement partial page updates in ASP.NET Ajax applications and how we can make use of the UpdateProgress control to show progress while an asynchronous update operation is in progress.
Original: August 19, 2009
