A dizzying array of new controls came along with the release of ASP.NET 2.0. Thankfully, the learning curve is not as steep with its successor (ASP.NET 3.5), as only a handful of new controls are included this time around (see Figure 1). Because these new controls can be quite useful, it’s worthwhile to take the small amount of time required to familiarize yourself with them.
If you’ve used Microsoft’s freely downloadable ASP.NET AJAX library with ASP.NET 2.0, then you’re already familiar with most of the latest controls; only the ListView and DataPager controls will be new to you. This is because Microsoft’s ASP.NET AJAX library is now built-in to ASP.NET 3.5. Visual Studio 2008 automatically includes its infamous web.config settings in all new Web applications, so you no longer need to wrestle with such administrivia.
| Control Name | AJAX Enabled? | Control Description |
| DataPager | No | An independent control that looks and behaves like the paging section often seen at the bottom of grids. Empowers users to navigate through multiple pages of data. |
| ListView | No | Provides the flexibility of the Repeater control and adds rich editing and design time features reminiscent of the GridView control. |
| ScriptManager | Yes | Enhances the current page with basic AJAX support. Exactly one instance is required on any pages that use the controls listed below. |
| ScriptManagerProxy | Yes | Extends AJAX support between a page and its master page. |
| Timer | Yes | Used to regularly update the contents of an UpdatePanel on configurable timed interval. |
| UpdatePanel | Yes | A panel that can automatically update its contents via AJAX. |
| UpdateProgress | Yes | Can be used to provide feedback to users during lengthy AJAX calls. |
ListView
The ListView control is like a modernized Repeater control with rich editing capabilities comparable to the GridView control. As you’d expect, it can be data-bound to any standard data source, including the new LINQ data source option.
You have the option of manually modifying the control’s templates in the ASPX source view if you choose, just like you had to do with the Repeater control in days of old. Even better, all 10 of the ListView’s supported templates can be visually edited in Visual Studio 2008’s design view, so you needn’t muck with the ListView’s often complex ASPX declarations.
Additionally, the ListView’s smart tag menu provides a Configure ListView option to generate an initial user interface for you. The resulting dialog box is shown in Figure 2. A variety of layout options are at your service, as well as a few mildly colorful style options. The relatively unadorned results serve as a decent starting point, but will usually need some manual enhancement to achieve an acceptably attractive user interface.
Figure 2: The ListView control can generate an initial user interface that is highly customizable.
Paging functionality can be provided by the new DataPager control, which may be embedded directly within a ListView template or placed elsewhere on the page.
DataPager
From Google’s search results to Hotmail’s inbox, virtually every grid on the Web provides a paging feature to let users navigate pages of data as if they were pages in a book. While some provide Next and Previous links for page navigation, more commonly a list of page numbers are provided to allow direct navigation to specific pages. First and Last links are common, too, which allow users to skip to the beginning or end of the data.
The ListView control employs the DataPager control to provide its data paging functionality when needed. To configure a DataPager control to provide paging functionality for a specific ListView control instance, set the DataPager’s PagedControlID to the ID of the ListView control.
DataPager’s user interface (shown in Figure 3) is configurable via CSS, allowing each of its constituent elements to be visually enhanced in standard ways. Additionally, all alphanumeric output of the control can be modified at run time or design time, and most text elements can be replaced with images if desired. (For more on the DataPager control, see Mike Pope’s article Take Control with ASP.NET 3.5.)
Figure 3: The DataPager’s utilitarian interface is customizable via CSS and a variety of configurable properties.
ScriptManager
Every Web form that wants to take advantage of ASP.NET’s new AJAX capabilities must have exactly one ScriptManager control instance placed at the top of the page. As its name implies, the ScriptManager control manages the JavaScript files required for AJAX support. At run time it efficiently downloads the scripts the current page needs and initializes the client-side framework.
Additionally, the ScriptManager control can be used to help manage your own custom JavaScripts and Web services calls via its Scripts and Services property collections, respectively.
ScriptManagerProxy
Only one instance of the ScriptManager control is allowed on a page, which presents a potential problem for scenarios where both a master page and its content page wish to use AJAX. In such a situation, the master page should include the ScriptManager control, and its content page should include a ScriptManagerProxy control.
The ScriptManagerProxy control acts as a ScriptManager control for the content page, providing a nearly identical set of properties. The main difference is that — behind the scenes — it actually delegates its duties to the master page’s ScriptManager control.
UpdatePanel
The UpdatePanel control is the easiest possible way to enhance a Web site with AJAX support — even if it’s not always the most efficient. Virtually any controls placed within the bounds of an UpdatePanel can be automatically updated via AJAX, so full-page postbacks become unnecessary. Whenever an old-fashioned full-page postback would ordinarily be executed by a contained control, the UpdatePanel converts it to an asynchronous postback and refreshes only the UpdatePanel’s portion of the page — while the rest of the page stays intact. In cases where this functionality is undesirable, the UpdatePanel’s ChildrenAsTriggers property can be set to false to prevent contained controls from triggering a partial-page postback. To prevent partial-page postbacks entirely (and revert to old-fashioned full-page postbacks), you can set the ScriptManager control’s EnablePartialRendering property to false.
Controls that are not contained within an UpdatePanel can also optionally cause an UpdatePanel to refresh — with only a little configuration required. To accomplish this, the UpdatePanel’s Triggers property collection can be filled in with the names and applicable events of each control that should invoke the UpdatePanel refresh. These triggers can be configured manually in the ASP declaration, but many developers will prefer to use the editor dialog box shown in Figure 4.
Figure 4: The UpdatePanel’s famous partial page updates can be triggered by a variety of configurable internal and external control events.
Your server-side code needn’t be aware of whether a standard page or asynchronous postback has happened. From the perspective of your page’s server-side code, it all works essentially the same. ViewState, session state, application variables, control values, and pretty much everything else you rely on during a standard postback also are available during asynchronous postbacks. The only difference you’re likely to notice is that attempts to modify controls outside the bounds of an UpdatePanel are ignored.
For the rare occasions where you might truly need to detect an asynchronous postback from your page’s server-side code, simply check the ScriptManager’s boolean IsInAsyncPostBack property.
Timer
Like its Windows forms counterpart, the Timer Web control has an Interval property to specify the number of milliseconds between calls to its (server side) Tick event. For example, setting the Interval property to 60,000 causes the Tick event to be raised once each minute.
When the Timer control is used by itself, it causes a standard (full page) postback to occur upon each interval tick. When a Timer control is placed within an UpdatePanel, the interval tick will instead cause a partial page (“AJAX”) postback by default, and its UpdatePanel parent will automatically refresh at the same time. This can be handy to keep a page’s stock or news ticker up-to-date at all times, without interfering with other ongoing page activities (such as user input).
UpdateProgress
Although AJAX calls are meant to improve the slow and unresponsive nature of standard page postbacks, AJAX calls can sometimes be slow, as well. In many cases, a slow AJAX call is inconsequential because the user may continue working with a page as AJAX calls happen in the background. However, in some cases, business processes dictate that the user should wait for an AJAX call to complete before being allowed to proceed.
In cases where users are forced to wait for a sluggish AJAX call to complete, it’s only polite to provide some form of feedback during the operation to keep the user informed that there is an ongoing process. The UpdateProgress control provides this functionality. Any content placed within the UpdateProgress container control will automatically be displayed during all UpdatePanel AJAX calls by default.
If you want the UpdateProgress control to only display when a particular UpdatePanel is updating, set the UpdateProgress control’s AssociatedUpdatePanelID property to the ID of that UpdatePanel.
The DisplayAfter property can be used to ensure the UpdateProgress control is only displayed for slow AJAX requests (so unsightly blinks don’t occur for short ones). Simply set the DisplayAfter property to 1,000 milliseconds to ensure the UpdateProgress’ contents only display for AJAX requests that take one second or longer.
The DynamicLayout property (true by default) specifies whether space in the page should be reserved for the UpdateProgress’ content, even when it is not visible. Otherwise, in some cases, page content may suddenly shift in jarring ways as space is dynamically made for the UpdateProgress’ content.
Some believe that UpdateProgress is a misnomer, because the control cannot provide any details about the progress of the ongoing operation (such as “14 of 17 records processed”). The only information the UpdateProgress control can convey to a user is the fact that a process is still ongoing. Many developers choose to place an animated gif inside the UpdateProgress control to help illustrate the fact that actions are occurring.
Conclusion
Of the seven new controls provided with ASP.NET 3.5, five of them exist solely to assist with AJAX operations. While the new ListView and DataPager controls provide no direct AJAX capabilities, they (like most other Web controls) can certainly be placed within an UpdatePanel control to allow them to participate in AJAX updates.
The ListView control builds upon the classic Repeater control’s flexible design, and enhances it with rich Visual Studio designer support. It also adds valuable two-way data-binding capabilities. The ListView control employs the new DataPager control to provide a familiar user interface for the navigation of large data sets. The DataPager control can reside within the ListView control’s boundaries, or it can exist independently in a completely separate portion of the page.
While the UpdatePanel is the simplest and quickest way to add AJAX functionality to a page, achieving peak efficiency will often require the use of other (comparatively manual) AJAX methods that ASP.NET 3.5 has bestowed upon us. The Timer and UpdateProgress controls exist to help with the AJAX functionality of the UpdatePanel control. Newfangled “Web 2.0” features like these improve the user experience and can improve perceived performance.
Visual Studio 2008 should be hitting store shelves around the time you read this, and MSDN subscribers have already had access to it for a few months. If you haven’t yet gotten your hands on a copy, now is the time. With the information provided here about the new Web controls of ASP.NET 3.5, you should now have the knowledge you need to dive in and become productive with them almost immediately.
No comments:
Post a Comment