ASP.NET VERSIONS:3.5
The New Controls of ASP.NET 3.5
Using Visual Studio 2008
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.
|
Figure 1: The new controls of ASP.NET 3.5.
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.