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).
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.
No comments:
Post a Comment