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).
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).
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.
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.
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.
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 theserver
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.
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.
Using the CheckBox Control
The CheckBox control enables you to display, well, a check box. 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.
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.
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.
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.
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 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 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:
Focus—Enables 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.
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.
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 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.
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 <fieldset> tag. The value that you assign to the
GroupingText property appears in the <fieldset> tag’s
<legend> tag.
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.
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.
