The New Controls of ASP.NET 3.5

ControlFreak

LANGUAGES:VB.NET | C#

ASP.NETVERSIONS: 3.5

The New Controls of ASP.NET 3.5

Using Visual Studio 2008

By Steve C. Orr

A dizzying array of new controls came along with therelease of ASP.NET 2.0. Thankfully, the learning curve is not as steep with itssuccessor (ASP.NET 3.5), as only a handful of new controls are included thistime around (see Figure 1). Because these new controls can be quite useful, it sworthwhile to take the small amount of time required to familiarize yourselfwith them.

If you ve used Microsoft s freely downloadable ASP.NETAJAX library with ASP.NET 2.0, then you re already familiar with most of thelatest controls; only the ListView and DataPager controls will be new to you. Thisis because Microsoft s ASP.NET AJAX library is now built-in to ASP.NET 3.5. VisualStudio 2008 automatically includes its infamous web.config settings in all new Webapplications, so you no longer need to wrestle with such administrivia.

Figure 1: The newcontrols of ASP.NET 3.5.

ListView

The ListView control is like a modernized Repeater controlwith rich editing capabilities comparable to the GridView control. As you dexpect, it can be data-bound to any standard data source, including the newLINQ data source option.

You have the option of manually modifying the control stemplates in the ASPX source view if you choose, just like you had to do withthe Repeater control in days of old. Even better, all 10 of the ListView ssupported 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 aConfigure ListView option to generate an initial user interface for you. Theresulting dialog box is shown in Figure 2. A variety of layout options are atyour service, as well as a few mildly colorful style options. The relativelyunadorned results serve as a decent starting point, but will usually need somemanual enhancement to achieve an acceptably attractive user interface.

Figure 2: The ListView control cangenerate an initial user interface that is highly customizable.

Paging functionality can be provided by the new DataPagercontrol, which may be embedded directly within a ListView template or placedelsewhere on the page.

DataPager

From Google s search results to Hotmail s inbox, virtuallyevery grid on the Web provides a paging feature to let users navigate pages ofdata as if they were pages in a book. While some provide Next and Previouslinks for page navigation, more commonly a list of page numbers are provided toallow 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 toprovide its data paging functionality when needed. To configure a DataPagercontrol to provide paging functionality for a specific ListView controlinstance, set the DataPager s PagedControlID to the ID of the ListView control.

DataPager s user interface (shown in Figure 3) isconfigurable via CSS, allowing each of its constituent elements to be visuallyenhanced in standard ways. Additionally, all alphanumeric output of the controlcan be modified at run time or design time, and most text elements can bereplaced with images if desired. (For more on the DataPager control, see MikePope s article TakeControl with ASP.NET 3.5.)

Figure 3: The DataPager sutilitarian interface is customizable via CSS and a variety of configurableproperties.

ScriptManager

Every Web form that wants to take advantage of ASP.NET snew AJAX capabilities must haveexactly one ScriptManager control instance placed at the top of the page. Asits name implies, the ScriptManager control manages the JavaScript files requiredfor AJAX support. At run time itefficiently downloads the scripts the current page needs and initializes theclient-side framework.

Additionally, the ScriptManager control can be used tohelp manage your own custom JavaScripts and Web services calls via its Scriptsand Services property collections, respectively.

ScriptManagerProxy

Only one instance of the ScriptManager control is allowedon a page, which presents a potential problem for scenarios where both a masterpage 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 ScriptManagercontrol for the content page, providing a nearly identical set of properties. Themain difference is that behind the scenes it actually delegates its dutiesto the master page s ScriptManager control.

UpdatePanel

The UpdatePanel control is the easiest possible way toenhance a Web site with AJAXsupport even if it s not always the most efficient. Virtually any controlsplaced within the bounds of an UpdatePanel can be automatically updated via AJAX,so full-page postbacks become unnecessary. Whenever an old-fashioned full-pagepostback would ordinarily be executed by a contained control, the UpdatePanelconverts it to an asynchronous postback and refreshes only the UpdatePanel sportion of the page while the rest of the page stays intact. In cases wherethis functionality is undesirable, the UpdatePanel s ChildrenAsTriggersproperty can be set to false to prevent contained controls from triggering apartial-page postback. To prevent partial-page postbacks entirely (and revertto old-fashioned full-page postbacks), you can set the ScriptManager control sEnablePartialRendering property to false.

Controls that are not contained within an UpdatePanel canalso optionally cause an UpdatePanel to refresh with only a littleconfiguration required. To accomplish this, the UpdatePanel s Triggers propertycollection can be filled in with the names and applicable events of eachcontrol that should invoke the UpdatePanel refresh. These triggers can beconfigured manually in the ASP declaration, but many developers will prefer touse the editor dialog box shown in Figure 4.

Figure 4: The UpdatePanel s famouspartial page updates can be triggered by a variety of configurable internal andexternal control events.

Your server-side code needn t be aware of whether astandard page or asynchronous postback has happened. From the perspective ofyour page s server-side code, it all works essentially the same. ViewState,session state, application variables, control values, and pretty mucheverything else you rely on during a standard postback also are availableduring asynchronous postbacks. The only difference you re likely to notice isthat attempts to modify controls outside the bounds of an UpdatePanel areignored.

For the rare occasions where you might truly need todetect an asynchronous postback from your page s server-side code, simply checkthe ScriptManager s boolean IsInAsyncPostBack property.

Timer

Like its Windows forms counterpart, the Timer Web controlhas an Interval property to specify the number of milliseconds between calls toits (server side) Tick event. For example, setting the Interval property to60,000 causes the Tick event to be raised once each minute.

When the Timer control is used by itself, it causes astandard (full page) postback to occur upon each interval tick. When a Timercontrol is placed within an UpdatePanel, the interval tick will instead cause apartial page ( AJAX ) postback bydefault, and its UpdatePanel parent will automatically refresh at the sametime. This can be handy to keep a page s stock or news ticker up-to-date at alltimes, without interfering with other ongoing page activities (such as userinput).

UpdateProgress

Although AJAXcalls are meant to improve the slow and unresponsive nature of standard pagepostbacks, AJAX calls can sometimesbe slow, as well. In many cases, a slow AJAXcall is inconsequential because the user may continue working with a page as AJAXcalls happen in the background. However, in some cases, business processesdictate that the user should wait for an AJAXcall to complete before being allowed to proceed.

In cases where users are forced to wait for a sluggish AJAXcall to complete, it s only polite to provide some form of feedback during theoperation to keep the user informed that there is an ongoing process. TheUpdateProgress control provides this functionality. Any content placed withinthe UpdateProgress container control will automatically be displayed during allUpdatePanel AJAX calls by default.

If you want the UpdateProgress control to only displaywhen a particular UpdatePanel is updating, set the UpdateProgress control sAssociatedUpdatePanelID property to the ID of that UpdatePanel.

The DisplayAfter property can be used to ensure theUpdateProgress control is only displayed for slow AJAXrequests (so unsightly blinks don t occur for short ones). Simply set theDisplayAfter property to 1,000 milliseconds to ensure the UpdateProgress contents only display for AJAXrequests that take one second or longer.

The DynamicLayout property (true by default) specifieswhether space in the page should be reserved for the UpdateProgress content,even when it is not visible. Otherwise, in some cases, page content maysuddenly shift in jarring ways as space is dynamically made for theUpdateProgress content.

Some believe that UpdateProgress is a misnomer, becausethe control cannot provide any details about the progress of the ongoing operation(such as 14 of 17 records processed ). The only information the UpdateProgresscontrol can convey to a user is the fact that a process is still ongoing. Manydevelopers choose to place an animated gif inside the UpdateProgress control tohelp illustrate the fact that actions are occurring.

Conclusion

Of the seven new controls provided with ASP.NET 3.5, fiveof them exist solely to assist with AJAXoperations. While the new ListView and DataPager controls provide no direct AJAXcapabilities, they (like most other Web controls) can certainly be placedwithin an UpdatePanel control to allow them to participate in AJAXupdates.

The ListView control builds upon the classic Repeatercontrol s flexible design, and enhances it with rich Visual Studio designersupport. It also adds valuable two-way data-binding capabilities. The ListViewcontrol employs the new DataPager control to provide a familiar user interfacefor the navigation of large data sets. The DataPager control can reside withinthe ListView control s boundaries, or it can exist independently in acompletely separate portion of the page.

While the UpdatePanel is the simplest and quickest way toadd AJAX functionality to a page, achieving peak efficiency will often requirethe use of other (comparatively manual) AJAX methods that ASP.NET 3.5 hasbestowed upon us. The Timer and UpdateProgress controls exist to help with the AJAXfunctionality of the UpdatePanel control. Newfangled Web 2.0 features likethese improve the user experience and can improve perceived performance.

Visual Studio 2008 should be hitting store shelves aroundthe time you read this, and MSDN subscribers have already had access to it fora few months. If you haven t yet gotten your hands on a copy, now is the time. Withthe information provided here about the new Web controls of ASP.NET 3.5, youshould now have the knowledge you need to dive in and become productive withthem almost immediately.

Steve C. Orr is anASP Insider, MCSD, Certified ScrumMaster, Microsoft MVP in ASP.NET, and authorof Beginning ASP.NET 2.0 AJAX by Wrox. He sbeen developing software solutions for leading companies in the Seattlearea for more than a decade. When he s not busy designing software systems orwriting about them, he can often be found loitering at local user groups andhabitually lurking in the ASP.NET newsgroup. Find out more about him at http://SteveOrr.net or e-mail him at mailto:[email protected].