Using the Standard Controls

In this chapter, you learn how to use the core controls contained in the ASP.NET 3.5 Framework. These are controls that you’ll use in just about any ASP.NET application that you build.
You learn how to display information to users by using the Label and Literal controls. You learn how to accept user input with the TextBox, CheckBox, and RadioButton controls. You also learn how to submit forms with the button controls.
At the end of this chapter, you learn how to group form fields with the Panel control. Finally, you learn how to link from one page to another with the HyperLink control.

Displaying Information
The ASP.NET Framework includes two controls you can use to display text in a page: the Label control and the Literal control. Whereas the Literal control simply displays text, the Label control supports several additional formatting properties.

Using the Label Control
Whenever you need to modify the text displayed in a page dynamically, you can use the Label control. For example, the page in Listing 2.1 dynamically modifies the value of a Label control’s Text property to display the current time (see Figure 2.1). FIGURE 2.1 Displaying the time with a Label control. Any string that you assign to the Label control’s Text property is displayed by the Label when the control is rendered. You can assign simple text to the Text property or you can assign HTML content.
As an alternative to assigning text to the Text property, you can place the text between the Label control’s opening and closing tags. Any text that you place before the opening and closing tags gets assigned to the Text property.
By default, a Label control renders its contents in an HTML <span> tag. Whatever value you assign to the Text property is rendered to the browser enclosed in a <span> tag.
The Label control supports several properties you can use to format the text displayed by the Label (this is not a complete list):

• BackColor Enables you to change the background color of the label.
• BorderColor Enables you to set the color of a border rendered around the label.
• BorderStyle Enables you to display a border around the label. Possible values are NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, and Outset.
• BorderWidth Enables you to set the size of a border rendered around the label.
• CssClass Enables you to associate a Cascading Style Sheet class with the label.
• Font Enables you to set the label’s font properties.
• ForeColor Enables you to set the color of the content rendered by the label.
• Style Enables you to assign style attributes to the label.
• ToolTip Enables you to set a label’s title attribute. (In Microsoft Internet Explorer, the title attribute is displayed as a floating tooltip.)

In general, I recommend that you avoid using the formatting properties and take advantage of Cascading Style Sheets to format the rendered output of the Label control. The page in Listing 2.2 contains two Label controls: The first is formatted with properties and the second is formatted with a Cascading Style Sheet (see Figure 2.2). You should use a Label control when labeling the fields in an HTML form. The Label control includes a property named the AssociatedControlID property. You can set this property to point at an ASP.NET control that represents a form field. FIGURE 2.2 Formatting a label.
For example, the page in Listing 2.3 contains a simple form that contains fields for entering a first and last name. Label controls are used to label the two TextBox controls. When you provide a Label control with an AssociatedControlID property, the Label control is rendered as an HTML <label> tag instead of an HTML <span> tag. For example, if you select View Source on your web browser, you’ll see that the first Label in Listing 2.3 renders the following content to the browser:
<label for=”txtFirstName” id=”lblFirstName”>First Name:</label>

Always use a Label control with an AssociatedControlID property when labeling form fields. This is important when you need to make your website accessible to persons with disabilities. If someone is using an assistive device, such as a screen reader, to interact with your website, the AssociatedControlID property enables the assistive device to associate the correct label with the correct form field.
A side benefit of using the AssociatedControlID property is that clicking a label when this property is set automatically changes the form focus to the associated form input field.

WEB STANDARDS NOTE
Both the WCAG 1.0 and Section 508 accessibility guidelines require you to use the <label for> tag when labeling form fields. For more information, see http://www.w3.org/wai and http://www.Section508.gov.

Using the Literal Control
The Literal control is similar to the Label control. You can use the Literal control to display text or HTML content in a browser. However, unlike the Label control, the Literal control does not render its content inside of a <span> tag.
For example, the page in Listing 2.4 uses a Literal control in the page’s <head> tag to dynamically modify the title displayed in the browser title bar. The current date is displayed in the Literal control (see Figure 2.3). FIGURE 2.3 Modifying the browser title with a Literal control. If you used a Label control in Listing 2.4 instead of a Literal control, the uninterpreted <span> tags would appear in the browser title bar.

NOTE
The page in Listing 2.4 uses a format specifier to format the date before assigning the date to the Label control. The D format specifier causes the date to be formatted in a long format. You can use several standard format specifiers with the ToString() method to format dates, times, currency amounts, and numbers. For a list of these format specifiers, look up the Format Specifiers topic in the index of the
Microsoft .NET Framework SDK Documentation.
Because the contents of a Literal control are not contained in a <span> tag, the Literal control does not support any of the formatting properties supported by the <span> tag. For example, the Literal control does not support either the CssClass or BackColor properties.
The Literal control does support one property that is not supported by the Label control: the Mode property. The Mode property enables you to encode HTML content. The Mode property accepts any of the following three values:

• PassThrough Displays the contents of the control without encoding.
• Encode Displays the contents of the control after HTML encoding the content.
• Transform Displays the contents of the control after stripping markup that is not supported by the requesting device.

For example, the page in Listing 2.5 contains three Literal controls that are set to the three possible values of the Mode property (see Figure 2.4). FIGURE 2.4 Three values of the Literal control’s Mode property. When you request the page in Listing 2.5 with a web browser, the first Literal control displays a horizontal rule, the second Literal control displays the uninterpreted <hr /> tag, and the final Literal control displays another horizontal rule. If you requested the page from a device (such as a WML cell phone) that does not support the <hr> tag, the third <hr /> tag would be stripped.

Accepting User Input
The ASP.NET Framework includes several controls that you can use to gather user input. In this section, you learn how to use the TextBox, CheckBox, and RadioButton controls. These controls correspond to the standard types of HTML input tags.

Using the TextBox Control
The TextBox control can be used to display three different types of input fields depending on the value of its TextMode property. The TextMode property accepts the following three values:

• SingleLine Displays a single-line input field.
• MultiLine Displays a multi-line input field.
• Password Displays a single-line input field in which the text is hidden.

The page in Listing 2.6 contains three TextBox controls that illustrate all three of the TextMode values (see Figure 2.5). FIGURE 2.5 Displaying TextBox controls with different values for TextMode. You can use the following properties to control the rendering characteristics of the TextBox control (this is not a complete list):

• AccessKey Enables you to specify a key that navigates to the TextBox control.
• AutoCompleteType Enables you to associate an AutoComplete class with the TextBox control.
• AutoPostBack Enables you to post the form containing the TextBox back to the server automatically when the contents of the TextBox is changed.
  
• Columns Enables you to specify the number of columns to display.
• Enabled Enables you to disable the text box.
• MaxLength Enables you to specify the maximum length of data that a user can enter in a text box (does not work when TextMode is set to Multiline).
• ReadOnly Enables you to prevent users from changing the text in a text box.
• Rows Enables you to specify the number of rows to display.
• TabIndex Enables you to specify the tab order of the text box.
• Wrap —Enables you to specify whether text word-wraps when the TextMode is set to Multiline.

The TextBox control also supports the following method:

• Focus Enables you to set the initial form focus to the text box.
  And, the TextBox control supports the following event:
• TextChanged Raised on the server when the contents of the text box are changed.

When the AutoPostBack property has the value True, the form containing the TextBox is automatically posted back to the server when the contents of the TextBox changes. For example, the page in Listing 2.7 contains a simple search form. If you modify the contents of the text box and tab out of the TextBox control, the form is automatically posted back to the server and the contents of the TextBox are displayed (see Figure 2.6). FIGURE 2.6 Reloading a form automatically when the contents of a form field change. In Listing 2.7, the TextBox control’s TextChanged event is handled. This event is raised on the server when the contents of the TextBox have been changed. You can handle this event even when you don’t use the AutoPostBack property.

WEB STANDARDS NOTE
You should avoid using the AutoPostBack property for accessibility reasons. Creating a page that automatically reposts the server can be very confusing to someone using an assistive device such as a screen reader. If you insist on using the AutoPostBack property, you should include a value for the ToolTip property that warns the user that the page will be reloaded.

Notice that the TextBox control also includes a property that enables you to associate the TextBox with a particular AutoComplete class. When AutoComplete is enabled, the user does not need to re-enter common information—such as a first name, last name, or phone number—in a form field. If the user has not disabled AutoComplete on his browser, then his browser prompts him to enter the same value that he entered previously for the form field (even if the user entered the value for a form field at a different website).

NOTE
You can disable auto-complete by adding an AutoComplete=”Off” attribute to the TextBox. This is useful when you want to use the ASP.NET AJAX Control Toolkit AutoComplete control, and you don’t want the browser auto-complete to interfere with the Ajax auto-complete.

For example, the page in Listing 2.8 asks for your first name, last name, and phone number. Each TextBox control is associated with a particular AutoComplete class. The AutoComplete class specifies the type of information associated with the form field. After you complete the form once, if you return to the same form in the future, you are prompted to enter the same responses (see Figure 2.7). FIGURE 2.7 Using AutoComplete with the TextBox control. NOTE
When using Internet Explorer, you can configure AutoComplete by selecting Tools, Internet Options, Content, and clicking the AutoComplete button. The ASP.NET Framework does not support AutoComplete for other browsers such as FireFox or Opera.

Finally, the TextBox control supports the Focus() method. You can use the Focus() method to shift the initial form focus to a particular TextBox control. By default, no form field has focus when a page first opens. If you want to make it easier for users to complete a form, you can set the focus automatically to a particular TextBox control contained in a form.
For example, the page in Listing 2.9 sets the focus to the first of two form fields. In Listing 2.9, the Page_Load() event handler sets the form focus to the txtFirstName TextBox control.

NOTE
You can also set the form focus by setting either the Page.SetFocus() method or the server-side HtmlForm control’s DefaultFocus property.

Using the CheckBox Control
The CheckBox control enables you to display, well, a check box. The page in Listing 2.10 illustrates how you can use the CheckBox control in a newsletter signup form (see Figure 2.8). FIGURE 2.8 Displaying a CheckBox control.

In Listing 2.10, the Checked property is used to determine whether the user has checked the check box. Notice that the CheckBox includes a Text property that is used to label the CheckBox. If you use this property, then the proper (accessibility standards-compliant) HTML <label> tag is generated for the TextBox.
The CheckBox control supports the following properties (this is not a complete list):

• AccessKey Enables you to specify a key that navigates to the TextBox control.
• AutoPostBack Enables you to post the form containing the CheckBox back to the server automatically when the CheckBox is checked or unchecked.
• Checked Enables you to get or set whether the CheckBox is checked.
• Enabled Enables you to disable the TextBox.
• TabIndex Enables you to specify the tab order of the check box.
• Text Enables you to provide a label for the check box.
• TextAlign Enables you to align the label for the check box. Possible values are Left and Right.

The CheckBox control also supports the following method:

• Focus Enables you to set the initial form focus to the check box.

And, the CheckBox control supports the following event:

• CheckedChanged Raised on the server when the check box is checked or unchecked.

Notice that the CheckBox control, like the TextBox control, supports the AutoPostBack property. The page in Listing 2.11 illustrates how you can use the AutoPostBack property to post the form containing the check box back to the server automatically when the check box is checked or unchecked.

NOTE
The ASP.NET Framework also includes the CheckBoxList control that enables you to display a list of check boxes automatically. This control is discussed in detail in Chapter 10, “Using List Controls.”

Using the RadioButton Control
You always use the RadioButton control in a group. Only one radio button in a group of RadioButton controls can be checked at a time.
For example, the page in Listing 2.12 contains three RadioButton controls (see Figure 2.9). FIGURE 2.9 Displaying RadioButton.

The RadioButton controls in Listing 2.12 are grouped together with the RadioButton control’s GroupName property. Only one of the three RadioButton controls can be checked at a time.
The RadioButton control supports the following properties (this is not a complete list):

• AccessKey Enables you to specify a key that navigates to the RadioButton control.
• AutoPostBack Enables you to post the form containing the RadioButton back to the server automatically when the radio button is checked or unchecked.
• Checked Enables you to get or set whether the RadioButton control is checked.
• Enabled Enables you to disable the RadioButton.
• GroupName Enables you to group RadioButton controls.
• TabIndex Enables you to specify the tab order of the RadioButton control.
• Text Enables you to label the RadioButton control.
• TextAlign —Enables you to align the RadioButton label. Possible values are Left and Right.

The RadioButton control supports the following method:

• Focus Enables you to set the initial form focus to the RadionButton control.

Finally, the RadioButton control supports the following event:

• CheckedChanged —Raised on the server when the RadioButton is checked or unchecked.

The page in Listing 2.13 demonstrates how you can use the AutoPostBack property with a group of RadioButton controls and detect which RadioButton control is selected. In Listing 2.13, when you select a RadioButton control, the page is automatically posted back to the server, and the value of the Text property of the selected RadioButton control is displayed. Notice that all three of the RadioButton controls are associated with the same CheckedChanged event handler. The first parameter passed to the handler represents the particular RadioButton that was changed.

NOTE
The ASP.NET Framework also includes the RadioButtonList control, which enables you to display a list of radio buttons automatically. This control is discussed in detail in Chapter 10, “Using List Controls.”

Submitting Form Data
The ASP.NET Framework includes three controls you can use to submit a form to the server: the Button, LinkButton, and ImageButton controls. These controls have the same function, but each control has a distinct appearance.
In this section, you learn how to use each of these three types of buttons in a page. Next, you learn how to associate client-side scripts with server-side Button controls. You also learn how to use a button control to post a form to a page other than the current page. Finally, you learn how to handle a button control’s Command event.

Using the Button Control
The Button control renders a push button that you can use to submit a form to the server. For example, the page in Listing 2.14 contains a Button control. When you click the Button control, the time displayed by a Label control is updated (see Figure 2.10). FIGURE 2.10 Displaying a Button control. The Button control supports the following properties (this is not a complete list):

• AccessKey Enables you to specify a key that navigates to the Button control.
• CommandArgument Enables you to specify a command argument that is passed to the Command event.
• CommandName Enables you to specify a command name that is passed to the Command event.
• Enabled Enables you to disable the Button control.
• OnClientClick Enables you to specify a client-side script that executes when the button is clicked.
• PostBackUrl Enables you to post a form to a particular page.
• TabIndex Enables you to specify the tab order of the Button control.
• Text Enables you to label the Button control.
• UseSubmitBehavior Enables you to use JavaScript to post a form.

The Button control also supports the following method:

• Focus Enables you to set the initial form focus to the Button control.

The Button control also supports the following two events:

• Click Raised when the Button control is clicked.
• Command Raised when the Button control is clicked. The CommandName and CommandArgument are passed to this event.

Using the LinkButton Control
The LinkButton control, like the Button control, enables you to post a form to the server. Unlike a Button control, however, the LinkButton control renders a link instead of a push button. The page in Listing 2.15 contains a simple form. The form includes a LinkButton control that enables you to submit the form to the server and display the contents of the form fields (see Figure 2.11). Behind the scenes, the LinkButton control uses JavaScript to post the form back to the server. The hyperlink rendered by the LinkButton control looks like this:
<a id=”lnkSubmit” href=”javascript:__doPostBack(‘lnkSubmit’,’’)”>Submit</a>FIGURE 2.11 Displaying a LinkButton control.

Clicking the LinkButton invokes the JavaScript __doPostBack() method, which posts the form to the server. When the form is posted, the values of all the other form fields in the page are also posted to the server.
The LinkButton control supports the following properties (this is not a complete list):

• AccessKey Enables you to specify a key that navigates to the Button control.
• CommandArgument Enables you to specify a command argument that is passed to the Command event.
• CommandName Enables you to specify a command name that is passed to the Command event.
• Enabled Enables you to disable the LinkButton control.
• OnClientClick Enables you to specify a client-side script that executes when the LinkButton is clicked.
• PostBackUrl Enables you to post a form to a particular page.
• TabIndex Enables you to specify the tab order of the LinkButton control.
• Text Enables you to label the LinkButton control.

The LinkButton control also supports the following method:

• Focus Enables you to set the initial form focus to the LinkButton control.

The LinkButton control also supports the following two events:

• Click Raised when the LinkButton control is clicked.
• Command Raised when the LinkButton control is clicked. The CommandName and CommandArgument are passed to this event.

Using the ImageButton Control
The ImageButton control, like the Button and LinkButton controls, enables you to post a form to the server. However, the ImageButton control always displays an image.
The page in Listing 2.16 contains an ImageButton control that posts a simple form back to the server (see Figure 2.12). FIGURE 2.12 Displaying an ImageButton control. The ImageButton in Listing 2.16 includes both an ImageUrl and AlternateText property. The ImageUrl contains the path to the image that the ImageButton displays. The AlternateText property is used to provide alternate text for the image used by screen readers and text-only browsers.

WEB STANDARDS NOTE
Always include alternate text for any image. The accessibility guidelines require it. Furthermore, remember that some people turn off images in their browsers for a faster surfing experience.

Notice that the event handler for an Image control’s Click event is different than that for the other button controls. The second parameter passed to the event handler is an instance of the ImageClickEventArgs class. This class has the following properties:

• X — The x coordinate relative to the image the user clicked.
• Y — The y coordinate relative to the image the user clicked.

You can use the ImageButton control to create a simple image map. For example, the page in Listing 2.17 contains an ImageButton that displays an image of a target. If you click the center of the target, then a success message is displayed (see Figure 2.13). FIGURE 2.13 Retrieving X and Y coordinates from an ImageButton. WEB STANDARDS NOTE
The ImageButton can be used to create a server-side image map. Server-side image maps are not accessible to persons with disabilities. A better method for creating an ImageMap is to use the ImageMap control, which enables you to create a client-side image map. The ImageMap control is discussed in the next section of this chapter.

The ImageButton control supports the following properties (this is not a complete list):
> AccessKey Enables you to specify a key that navigates to the ImageButton control.
> AlternateText Enables you to provide alternate text for the image (required for accessibility).
> DescriptionUrl Enables you to provide a link to a page that contains a detailed description of the image (required to make a complex image accessible).
> CommandArgument Enables you to specify a command argument that is passed to the Command event.
> CommandName Enables you to specify a command name that is passed to the Command event.
> Enabled Enables you to disable the ImageButton control.
> GenerateEmptyAlternateText Enables you to set the AlternateText property to an empty string.
> ImageAlign Enables you to align the image relative to other HTML elements in the page. Possible values are AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.
> ImageUrl Enables you to specify the URL to the image.
> OnClientClick Enables you to specify a client-side script that executes when the ImageButton is clicked.
> PostBackUrl Enables you to post a form to a particular page.
> TabIndex Enables you to specify the tab order of the ImageButton control.

The ImageButton control also supports the following method:
> FocusEnables you to set the initial form focus to the ImageButton control.

The ImageButton control also supports the following two events:
> Click Raised when the ImageButton control is clicked.
> Command Raised when the ImageButton control is clicked. The CommandName and CommandArgument are passed to this event.

Using Client Scripts with Button Controls
All three Button controls support an OnClientClick property. You can use this property to execute any client-side code that you need when a button is clicked. The page in Listing 2.18 illustrates how you can use the OnClientClick property to display a confirmation dialog box (see Figure 2.14). FIGURE 2.14 Displaying a client-side confirmation dialog box. In Listing 2.18, the Button control includes an OnClientClick property, which executes a JavaScript script when you click the button on the client. The script displays a confirmation dialog box. If the confirmation box returns False, then the button click is canceled and the form containing the button is not posted to the server.
Because the button controls, like most ASP.NET controls, support expando attributes, you can handle other client-side events simply by adding an arbitrary attribute to the control. If the ASP.NET Framework does not recognize an attribute declared on a button control, the framework simply passes the attribute to the browser.
For example, the page in Listing 2.19 contains a button control that includes onmouseover and onmouseout attributes. When you hover your mouse over the button, the text displayed in the button is changed. NOTE
You’ll get green squiggly warnings under expando attributes in Visual Web Developer— but these warnings can be safely ignored.

Performing Cross-Page Posts
By default, if you click a button control, the page containing the control is posted back to itself and the same page is reloaded. However, you can use the PostBackUrl property to post form data to another page.
For example, the page in Listing 2.20 includes a search form. The Button control in the page posts the form to another page named ButtonSearchResults.aspx. The ButtonSearchResults.aspx page is contained in Listing 2.21. In the Page_Load event handler in Listing 2.21, the PreviousPage property is used to get a reference to the previous page (the ButtonSearch.aspx page in Listing 2.20). Next, the FindControl() method is used to retrieve the txtSearch TextBox control from the previous page. Finally, the value entered into the TextBox is displayed in a label on the page.
As an alternative to using the FindControl() method to retrieve a particular control from the previous page, you can expose the control through a page property. The page in Listing 2.22 exposes the txtSearch TextBox through a property named SearchString. The page posts the form data to a page named ButtonSearchResultsTyped.aspx, contained in Listing 2.23. Notice that the page in Listing 2.23 includes a <%@ PreviousPageType %> directive. This directive casts the value returned by the PreviousPage property as an instance of the ButtonSearchTyped class. Without this directive, the PreviousPage property would return the previous page as an instance of the generic Page class.
You can use either method when performing cross-page posts. The first method provides you with an untyped method of retrieving values from the previous page, and the second method provides you with a typed method.

Specifying a Default Button
You can specify a default button for a form by using the DefaultButton property of the server-side Form control. If you specify a default button, then pressing the keyboard Enter key invokes the button.
For example, the page in Listing 2.24 contains a simple search form. The <form> tag sets the btnSearch Button control as the default button on the page. If you open the page in Listing 2.24, type a search phrase, and hit the keyboard Enter key, the form is submitted to the server. Pressing the Enter key causes the btnSearch_Click event handler to execute because the btnSearch button is the default button on the page.

NOTE
You can also specify a DefaultButton with a Panel control. The Panel control is discussed later in this chapter.

Handling the Command Event
All three Button controls support both the Click event and the Command event. The difference between these events is that you can pass a command name and command argument to a Command event handler but not to a Click event handler.
For example, the page in Listing 2.25 contains two Button controls and a BulletedList control. When you click the first button, the items displayed by the BulletedList control are sorted in ascending order, and when you click the second button, the items displayed by the BulletedList control are sorted in descending order (see Figure 2.15). FIGURE 2.15 Handling the Command event. Both Button controls include CommandName and CommandArgument properties. Furthermore, both Button controls are wired to the same Sort_Command() event handler. This event handler checks the CommandName and CommandArgument properties when determining how the elements in the BulletedList should be sorted.

Displaying Images
The ASP.NET framework includes two controls for displaying images: the Image and ImageMap controls. The Image control simply displays an image. The ImageMap control enables you to create a client-side, clickable, image map.

Using the Image Control
The page in Listing 2.26 randomly displays one of three images. The image is displayed by setting the ImageUrl property of the Image control contained in the body of the page. The Image control supports the following properties (this is not a complete list):
> AlternateText Enables you to provide alternate text for the image (required for accessibility).
> DescriptionUrl Enables you to provide a link to a page that contains a detailed description of the image (required to make a complex image accessible).
> GenerateEmptyAlternateText Enables you to set the AlternateText property to an empty string.
> ImageAlign Enables you to align the image relative to other HTML elements in the page. Possible values are AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.
> ImageUrl Enables you to specify the URL to the image.

The Image control supports three methods for supplying alternate text. If an image represents page content, then you should supply a value for the AlternateText property. For example, if you have an image for your company’s logo, then you should assign the text “My Company Logo” to the AlternateText property.
If an Image control represents something really complex—such as a bar chart, pie graph, or company organizational chart—then you should supply a value for the DescriptionUrl property. The DescriptionUrl property links to a page that contains a long textual description of the image.
Finally, if the image is used purely for decoration (it expresses no content), then you should set the GenerateEmptyAlternateText property to the value True. When this property has the value True, then an alt=”” attribute is included in the rendered tag. Screen readers know to ignore images with empty alt attributes.

Using the ImageMap Control
The ImageMap control enables you to create a client-side image map. An image map displays an image. When you click different areas of the image, things happen.
For example, you can use an image map as a fancy navigation bar. In that case, clicking different areas of the image map navigates to different pages in your website.
You also can use an image map as an input mechanism. For example, you can click different product images to add a particular product to a shopping cart.
An ImageMap control is composed out of instances of the HotSpot class. A HotSpot defines the clickable regions in an image map. The ASP.NET framework ships with three HotSpot classes:
> CircleHotSpot Enables you to define a circular region in an image map.
> PolygonHotSpot Enables you to define an irregularly shaped region in an image map.
> RectangleHotSpot Enables you to define a rectangular region in an image map.

The page in Listing 2.27 contains a navigation bar created with an ImageMap control. The ImageMap contains three RectangleHotSpots that delimit the three buttons displayed by the navigation bar (see Figure 2.16). FIGURE 2.16 Navigating with an ImageMap control. Each RectangleHotSpot includes Left, Top, Right, and Bottom properties that describe the area of the rectangle. Each RectangleHotSpot also includes a NavigateUrl property that contains the URL to which the region of the image map links.
Rather than use an image map to link to different pages, you can use it to post back to the same page. For example, the page in Listing 2.28 uses an ImageMap control to display a menu. When you click different menu items represented by different regions of the image map, the text contained in the TextBox control is changed (see Figure 2.17). FIGURE 2.17 Posting back to the server with an ImageMap control.

Notice that the ImageMap control has its HotSpotMode property set to the value PostBack. Also, the ImageMap is wired to a Click event handler named mapMenu_Click.
Each HotSpot contained in the ImageMap control has a PostBackValue property. The mapMenu_Click handler reads the PostBackValue from the region clicked and modifies the text displayed by the TextBox control.
The ImageMap control supports the following properties (this is not a complete list):
> AccessKey Enables you to specify a key that navigates to the ImageMap control.
> AlternateText Enables you to provide alternate text for the image (required for accessibility).
> DescriptionUrl Enables you to provide a link to a page which contains a detailed description of the image (required to make a complex image accessible).
> GenerateEmptyAlternateText Enables you to set the AlternateText property to an empty string.
> HotSpotMode Enables you to specify the behavior of the image map when you click a region. Possible values are Inactive, Navigate, NotSet, and PostBack.
> HotSpots Enables you to retrieve the collection of HotSpots contained in the ImageMap control.
> ImageAlign Enables you to align the image map with other HTML elements in the page. Possible values are AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.
> ImageUrl Enables you to specify the URL to the image.
> TabIndex Enables you to specify the tab order of the ImageMap control.
> Target Enables you to open a page in a new window.

The ImageMap control also supports the following method:
> Focus Enables you to set the initial form focus to the ImageMap control. Finally, the ImageMap control supports the following event:
> Click Raised when you click a region of the ImageMap and the HotSpotMode property is set to the value PostBack.

Using the Panel Control
The Panel control enables you to work with a group of ASP.NET controls.
For example, you can use a Panel control to hide or show a group of ASP.NET controls. The page in Listing 2.29 contains a list of RadioButton controls that can be used to select your favorite programming language. The last RadioButton is labeled Other. If you select the Other radio button, the contents of a Panel control are revealed (see Figure 2.18). FIGURE 2.18 Hiding and displaying controls with the Panel control. Notice that the Panel control is declared with a Visible property that has the value False. Because the Visible property is set to the value False, the Panel control and any controls contained in the Panel control are not rendered when the page is requested.
If you select the RadioButton control labeled Other, then the Visible property is set to the value True and the contents of the Panel control are displayed.

NOTE
Every control in the ASP.NET framework supports the Visible property. When Visible is set to the value False, the control does not render its contents.

The Panel control supports the following properties (this is not a complete list):
> DefaultButton Enables you to specify the default button in a Panel. The default button is invoked when you press the Enter button.
> Direction Enables you to get or set the direction in which controls that display text are rendered. Possible values are NotSet, LeftToRight, and RightToLeft.
> GroupingText Enables you to render the Panel control as a fieldset with a particular legend.
> HorizontalAlign Enables you to specify the horizontal alignment of the contents of the Panel. Possible values are Center, Justify, Left, NotSet, and Right.
> ScrollBars Enables you to display scrollbars around the panel’s contents. Possible values are Auto, Both, Horizontal, None, and Vertical.

By default, a Panel control renders a <div> tag around its contents. If you set the GroupingText property, however, the Panel control renders a

tag. The value that you assign to the GroupingText property appears in the

tag’s

tag. Listing 2.30 demonstrates how you can use the GroupingText property (see Figure 2.19). WEB STANDARDS NOTE According to the accessibility guidelines, you should use

tags when grouping related form fields in long forms. FIGURE 2.19 Setting the GroupingText property.

The ScrollBars property enables you to display scrollbars around a panel’s contents. For example, the page in Listing 2.31 contains a Panel control that contains a BulletedList control that displays 100 items. The panel is configured to scroll when its contents overflow its width or height (see Figure 2.20). WEB STANDARDS NOTE
Don’t use the values Horizontal or Vertical with the ScrollBars property when you want the scrollbars to appear in browsers other than Microsoft Internet Explorer. If you want the scrollbars to appear in FireFox and Opera, use either the value Auto or Both.
When enabling scrollbars with the Panel control, you must specify a particular width and height to display the scrollbars. In Listing 2.31, the width and height are specified in a Cascading Style Sheet class. Alternatively, you can specify the width and height with the Panel control’s Width and Height properties. FIGURE 2.20 Displaying scrollbars with a Panel control.

Using the HyperLink Control
The HyperLink control enables you to create a link to a page. Unlike the LinkButton control, the HyperLink control does not submit a form to a server.
For example, the page in Listing 2.32 displays a hyperlink that randomly links to a page in your application. In the Page_Load event handler in Listing 2.32, a random file name from the current
application is assigned to the NavigateUrl property of the HyperLink control.
The HyperLink control supports the following properties (this is not a complete list):
> Enabled Enables you to disable the hyperlink.
> ImageUrl Enables you to specify an image for the hyperlink.
> NavigateUrl Enables you to specify the URL represented by the hyperlink.
> Target Enables you to open a new window.
> Text Enables you to label the hyperlink.

Notice that you can specify an image for the HyperLink control by setting the ImageUrl property. If you set both the Text and ImageUrl properties, then the ImageUrl property takes precedence.

Summary
In this chapter, you were introduced to the core controls of the ASP.NET 3.5 framework. You learned how to display information using the Label and Literal controls. You also learned how to accept user input using the TextBox, CheckBox, and RadioButton controls.
In the second part of this chapter, you learned how to use the different button controls— the Button, LinkButton, and ImageButton controls—to submit a form. You learned how to post forms between pages. You also learned how to set a default button.
Finally, we discussed the Panel and HyperLink controls. You learned how to hide and display a group of controls with the Panel control. You also learned how to create dynamic links with the HyperLink control.