Changes to the Existing ASP.NET Controls

The unified control architecture implemented in ASP.NET 2.0 means that all the controls in the System.Web.UI.WebControls namespace have changed in order to take advantage of control adapters and the new architecture. The good news is that, to maintain backward compatibility with existing code (and to make it easier for developers to move to ASP.NET 2.0), almost all of the controls expose the same interfaces as before, so they are declared and programmed against in just the same way as in ASP.NET 1.x.

However, several of the controls have also changed in other minor ways, allowing them to integrate with new features in other controls (such as the new validation groups feature and page/site counters) or simply to fill in the "gaps" left when they were first implemented in version 1.0. The controls we'll be covering here are listed below.

• The Button , LinkButton , and ImageButton controls can now be used to raise client-side events as well as server-side events. They also integrate with site and page counters.

• The Hyperlink control now integrates with site and page counters.

• The Image control now has the facility to include the longdesc attribute, giving better accessibility to all users.

• The Label control can now be attached to another control so as to redirect client-side UI hot-key presses to that control.

• The ListItem control now allows individual items in the list to be enabled or disabled on demand.

• The Literal control now allows developers to specify how the content should be translated or encoded (in markup terms) before being sent to the client.

• The Panel control can display scroll bars if it is defined with a fixed size and the content is too large for the available space. It can also now display content from left to right or from right to left.

• The AdRotator control can now take data from non-XML data sources and includes support for the Site Counters Service

Changes to the Button, LinkButton, and ImageButton Controls

One issue discovered with the WebForms button-type controls in ASP.NET 1.x was how to arrange for the button to raise a client-side event as well as a server-side event. It's often useful to be able to run some client-side script when a button is clicked, before the page is submitted to the server. There is a workaround, of course, involving adding the OnClick attribute to the control at runtime using the Attributes collection. However, now you can simply set the OnClientClick property to the name of your client-side script function or specify it as the OnClientClick attribute when declaring your control:

 <asp:Button Text="Click Me" OnClick="MyServerSideCode" runat="server"             OnClientClick="MyClientSideFunction()"/> 

The same approach works for the LinkButton and ImageButton controls.

The SoftKeyLabel Property

As we described in more detail in Chapter 10, several button-type controls now carry the SoftKeyLabel property. This includes the Button , LinkButton , ImageButton , and PhoneLink controls. When the page is sent to a mobile device, the string specified for this property can (depending on the device) be displayed next to one of the "one-touch" buttons on the device. This property is usually implemented in devices such as cellular phones, where there is only limited input capability (basically a number keypad and a few soft-key buttons ).

Support for Site and Page Counters

The three button-type controls are often used to process actions or navigate to other pages in situations where you want to track the movements of visitors . The site and page counters feature of ASP.NET is ideal for this, and the button-type controls (as well as the Hyperlink control) have properties you can use to integrate them with this feature. These are described in the Site and Page Counters section later in the chapter

Changes to the Hyperlink Control

The Hyperlink control now exposes a SoftKeyLabel property, as described earlier for the three button-type controls. It also supports integration with site and page counters, again as described earlier for the button-type controls. However, because a hyperlink element causes a client-side action to take place (through the href value set by the NavigateUrl property), there is an extra property for the Hyperlink control named TrackNavigateUrl , which is described in the Site and Page Counters section later in the chapter.

Changes to the Image Control

HTML 4.0 and higher specify an attribute named longdesc for the <img> element. This attribute is useful where the user might not be able to view the image for a variety of reasons (e.g., he or she may be using a text-only browser or one specially designed for blind or partly sighted users). The new String property named DescriptionUrl can be set to the URL of a page that contains a text or aural description of the image. Specialist browsers and user agents should provide the user with the opportunity to retrieve this page instead of the image file.

Changes to the Label Control

One useful capability of HTML 4.0 and higher, when building pages that use the various interactive form controls (such as lists, buttons, checkboxes, and text boxes), is to associate a text label with a control. In most modern browsers, including Internet Explorer, you can define a "hot key" for the control and then display this hot key in the associated label to make the form more like a traditional Windows executable application.

In ASP.NET 2.0, the Label control gains a new property named AssociatedControlID . You set it to a String value that is the ID of the interactive control you want to associate the Label control with and then set the AccessKey property for the label to the key you want to act as the hot key. You can also indicate this key to the user by underlining it in the Label text:

 <asp:Label id="MyLabel" Text="<u>N</u>ame" runat="server"  AccessKey="N" AssociatedControlID="MyTextBox"  /> <asp:TextBox id="MyTextBox" runat="server" /> 

Now, when the hot-key combination ALT + N is pressed, the focus moves to the Textbox control automatically (see Figure 12.13). However, remember you cannot use keys that are already defined for the various UI features of the browser. For example, ALT + T cannot be used in Internet Explorer because it activates the Tools menu.

Figure 12.13. Using access keys

Changes to the ListItem Control

Ever since version 4.0 of Internet Explorer, it's been possible to disable controls in a page in that browser by setting their client-side disabled attribute, for example:

 <input type="text" disabled="disabled" /> 

In ASP.NET, you achieve the same effect by setting the Enabled property to False on the server, either in code or by adding the Enabled="False" attribute to the control declaration. However, for list controls such as a ListBox or DropDownList , you can only enable or disable the complete control, not specific items within the list. Most browsers do not actually support this feature anyway, so to provide something like the same functionality ASP.NET 2.0 allows individual items in the list to be removed from the display but still exist server-side in the list.

In other words, if the Items collection of a list control contains five ListItem controls, but one has the Enabled property set to False (or carries the Enabled="False" attribute), this item will not be rendered in the list client-side. However, it is still accessible in server-side code as part of the Items collection.

Changes to the Literal Control

A common approach to inserting content into a page without using a control that generates its own markup (e.g., a Label that generates a <span> element in the page) is to use the Literal control. You simply set the Text property to any String value, and that string is inserted into the page at the point where the Literal control is located.

In ASP.NET 2.0, a new property named Mode has been added to the Literal control, which allows you to control how the String assigned to the Text property value is " processed " before being sent to the client. The reason for this is simple: The page needs to be able to tailor its output to suit different types of device. For example, an <hr /> element in the String assigned to the Literal control will cause an error if sent to a device that expects to receive WML.

The Mode property can take one of the three values defined for the LiteralMode enumeration (see Table 12.4).

Changes to the Panel Control

One of the features that many developers have requested is a control that can be of fixed size and can display scroll bars when there is more content than will fit into an area of the specified size. In ASP.NET 2.0, the Panel control has been extended to provide these features. It has also been adapted to work better with pagination through a Pager control, allowing output to be broken up into separate "screens" for small-screen devices such as PDAs and cellular phones.

Figure 12.14 shows how the Panel control can now provide fixed-size scrollable regions in a page. The first and second panels have only a vertical scroll bar, while the third one has both horizontal and vertical scroll bars. The second panel also changes the layout direction, so the text is aligned to the right and the scroll bar appears on the left. (The control adds the HTML attribute dir="RTL" to the page element in the page to achieve this.) Finally, the text in the third panel does not wrap like the other two because we set the Wrap property to False in the declaration of that Panel control.

Figure 12.14. The Panel control with scroll bars

Table 12.4. The LiteralMode Enumeration Values

Value	Description
Transform	All markup not supported by the current client device is removed from the output generated by the control (e.g., <hr /> is removed for WML devices). If there is content within an unsupported element (e.g., <mytag>Some text</mytag>) , the tags are removed and the content is sent to the client. This is the default setting if not specified, meaning that backward compatibility is maximized for pages that don't specify a LiteralMode value and may be sent to a mobile device. If you use nonstandard markup in your pages, perhaps to interact with client-side code or special controls, you may have to change the LiteralMode property to PassThrough to ensure that it is delivered correctly.
PassThrough	The content of the Text property is sent to the client unchanged.
Encode	The content of the Text property is HTML-encoded before being sent to the client (e.g., <img> becomes &lt;img&gt;) .

The first Panel control is declared like this:

 <asp:Panel id="MyPanel1" BorderStyle="Solid" BorderWidth="1"  Width="200" Height="100" ScrollBars="Vertical"  runat="server">   <asp:Label runat="server">This is some test text...</asp:Label><p />   <asp:Label runat="server">This is some test text...</asp:Label><p /> </asp:Panel> 

You can see the Width and Height attributes, and the ScrollBars attribute is set to Vertical . This value comes from the ScrollBars enumeration, which contains the four expected values ( Vertical , Horizontal , Both , and None ) plus Auto to automatically add scroll bars as needed.

To force right-to-left layout in the Panel control, we just have to add the Direction="RightToLeft" attribute to the declaration. The default for Direction depends on the language and international settings of your machine. Right-to-left is, of course, the default for some languages.

The third Panel control simply carries the ScrollBars="Vertical" attribute. To prevent the text in the control from wrapping, we add the Wrap="False" attribute to the declaration and use <br /> elements in the text to break it into separate lines.

 <asp:Panel id="MyPanel3" BorderStyle="Solid" BorderWidth="1"      Width="200" Height="100" runat="server"  ScrollBars="Vertical" Wrap="False"  >   <asp:Label runat="server">       Scrollbars are useful when the text       cannot<br />be wrapped. Scrollbars are useful<br />       Scrollbars are useful when the text cannot<br />...   </asp:Label> </asp:Panel> 

Pagination in a Panel Control

We discussed the pagination features in general terms and in more detail in Chapter 10, where we looked at the Pager control. However, to integrate with the Pager control, the Panel control gains two new properties, which we describe briefly here (see Table 12.5).

Table 12.5. New Properties of the Panel Control

Property	Description
AllowPaginate	A Boolean value that indicates whether the contents of the Panel control can be broken up across pages. When True , the Pager control can divide the content of the Panel control over more than one page or screen when displayed in a device that requires pagination. When False (the default), the content always appears together on the same page or screen.
MaximumWeight	An Integer value that defines the maximum weighting for the content of the Panel control in respect to the pagination algorithm used by the Pager control to decide where to divide the content.

Changes to the AdRotator Control

ASP.NET 1.0 shipped with an AdRotator control to randomly display banner advertisements, and in ASP.NET 2.0 it has been updated with support for:

• Displaying advertisements in pop-up or pop-under windows

• Binding advertisement data from non-XML data sources

• Using site counters that track impressions and click-throughs

• Sending advertisements to mobile devices

• Caching that allows display of a dynamic advertisement even if the page is cached

The syntax for the AdRotator control is shown in Listing 12.22.

Listing 12.22 The AdRotator Control Syntax

 <asp:AdRotator runat="server"   AdType="[BannerPopupPopunder]"   AdvertisementFile="  String  "   AlternateTextField="  String  "   DataSource="  String  "   DataSourceId="  String  "   Font="  String  "   ImageUrlField="  String  "   KeywordFilter="  String  "   NavigateUrl="  String  "   PopFrequency="  Integer  "   PopPositionLeft="  Integer  "   PopPositionTop="  Integer  "   Target="  String  "   /> 

Some of these are the same as the properties used in the existing version of the control. The new properties are shown in Table 12.6.

Table 12.6. New Properties of the AdRotator Control

Property/Attribute	Description
AdType	Indicates the type of advertisement, which can be one of the AdType enumerations: Banner : For a banner ad. This is the default value. Popup : For a pop-up ad. Popunder : For a pop-under ad.
AlternateTextField	Sets or returns the element name or database field from which the alternate text is returned. The default is AlternateText .
DataSource	Sets or returns the data source to bind the AdRotator against. DataSource and AdvertisementFile cannot be defined simultaneously .
DataSourceId	Sets or returns the data source control to bind the AdRotator against. DataSourceId and AdvertisementFile cannot be defined simultaneously.
ImageUrlField	Sets or returns the element name or database field from which the image URL is returned. The default is ImageUrl .
NavigateUrlField	Sets or returns the element name or database field from which the navigation URL is returned. The default is NavigateUrl .
PopFrequency	Sets or returns the frequency, as a percentage, with which to create pop-up or pop-under ads. This applies only when the AdType property is Popup or Popunder . The default is 100 .
PopPositionLeft	Sets or returns the screen position that defines the left side of the ad. If not defined, the advertisement is centered horizontally on the screen. This applies only when the AdType property is Popup or Popunder .
PopPositionTop	Sets or returns the screen position that defines the top of the ad. If not defined, the advertisement is centered vertically on the screen. This applies only when the AdType property is Popup or Popunder .

In addition to these properties, the AdRotator control implements the Site Counters Service and therefore supports the following properties:

• CountClicks

• CountGroup

• CounterName

• CountViews

• RowsPerDay

• SiteCountersProvider

• TrackApplicationName

• TrackNavigateUrl

• TrackPageUrl

Pop-ups and Pop-unders

Support for pop-up advertisements is achieved by simply setting the AdType property. For example, a pop-up advertisement could be created like this:

 <asp:AdRotator runat="server"   AdvertisementFile="adverts.xml"   AdType="Popup" /> 

No position is defined in this pop-up, so it will be centered on the screen.

Tracking Banners

The addition of site counter support allows easy tracking of ad data. For example, a simple banner advertisement could be:

 <asp:AdRotator runat="server"   AdvertisementFile="adverts.xml"   CountClicks="True" CountViews="True"   TrackNavigateUrl="True" /> 

Tracking details for these advertisements can be obtained either directly from the Site Counters table or via the Site Counters API, as shown in Figure 12.15. With this information it is easy to work out the hit percentages to see how effective ads are.

Figure 12.15. Banner ad clicks and views

XML Advertisements File

There are a number of new elements supported in the XML advertisements file (see Table 12.7). Listing 12.23 shows an example of these in use.

Table 12.7. XML Advertisements File New Elements

Element	Description
CounterGroup	The site counter group to use when tracking this ad.
CounterName	The site counter name to use when tracking this ad.
Height	The height of the ad. If not supplied, the Height of the AdRotator control is used.
Width	The width of the ad. If not supplied, the Width of the AdRotator control is used.

Listing 12.23 Sample Advertisements File

 <Advertisements>   <Ad>     <ImageUrl>ads/awpro.gif</ImageUrl>     <NavigateUrl>http://www.awprofessional.com/</NavigateUrl>     <AlternateText>Addison-Wesley</AlternateText>     <Impressions>20</Impressions>     <Keyword>Books</Keyword>     <Height>40</Height>     <Width>160</Width>     <CounterGroup>Publishers</CounterGroup>     <CounterName>Addison-Wesley</CounterName>   </Ad>   <Ad>     ...   </Ad> </Advertisements> 

Like previous versions, the advertisements file also supports custom fields, which are mapped to the AdProperties property of the AdCreatedEventArgs for the AdCreated event.

Support for Mobile Devices

Support for mobile devices has been integrated into the AdRotator control as it supports the standard devices. Also, support has been added to the XML file, allowing device-specific elements. For example, consider an advertisement for a site that supports both standard browsers and WML browsers. The advertisement could look like this:

 <Ad>   <ImageUrl>ads/awpro.gif</ImageUrl>   <NavigateUrl>http://www.awprofessional.com/</NavigateUrl>   <WmlImageUrl>ads/awpro.gif</WmlImageUrl>   <WmlNavigateUrl>http://wml.awpro.com/</WmlNavigateUrl>   <AlternateText>Addison-Wesley</AlternateText>    ... 

This specifies a normal ImageUrl and NavigateUrl properties, as well as custom properties to a WML-specific image and navigation URL. Unlike standard custom properties, these can be mapped directly to device attributes by the AdRotator control. For example:

 <asp:AdRotator runat="server"   AdvertisementFile="adverts.xml"   Wml:ImageUrl="WmlImageUrl"   Wml:NavigateUrl="WmlNavigateUrl" /> 

This allows you to easily add support for custom devices without changing the infrastructure of your site.

Support for Data Binding

Data binding support has been added for both the existing data binding architecture and the new DataSource controls, as long as the underlying data matches the allowable schema. For example, Listing 12.24 shows binding the AdRotator to a DataSet , using the ASP.NET 1.x data binding syntax.

Listing 12.24 Binding the AdRotator Control to a DataSet Control

 <script runat="server"> Sub Page_Load(Sender As Object, E As EventArgs)   Dim conn As New _     SqlConnection(ConfigurationSettings.AppSettings("Ads"))   Dim da As New SqlDataAdapter("select * from ads", conn)   Dim ds As New DataSet()   da.Fill(ds, "Ads")   BannerAds.DataSource = ds   BannerAds.DataBind() End Sub </script> <form runat="server">   <asp:AdRotator runat="server" id="BannerAds" /> </form> 

This is also possible using the ASP.NET 2.0 data binding controls (see Listing 12.25).

Listing 12.25 Binding the AdRotator Control to a SqlDataSource Control

 <form runat="server">   <asp:SqlDataSource id="AdData" runat="server"     ConnectionString="..." />   <asp:AdRotator runat="server" DataSourceId="AdData" /> </form> 

Adding data binding to the AdRotator means that advertisement data can be supplied by any data provider.