ASP.NET 4 Unleased - p 10 pps
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (764.68 KB, 10 trang )
ptg
64
<title>Label Form</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:Label
id=”lblFirstName”
Text=”First Name:”
AssociatedControlID=”txtFirstName”
Runat=”server” />
<br />
<asp:TextBox
id=”txtFirstName”
Runat=”server” />
<br /><br />
<asp:Label
id=”lblLastName”
Text=”Last Name:”
AssociatedControlID=”txtLastName”
Runat=”server” />
<br />
<asp:TextBox
id=”txtLastName”
Runat=”server” />
</div>
</form>
</body>
</html>
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 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 uses 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.
CHAPTER 2 Using the Standard Controls
From the Library of Wow! eBook
ptg
65
Displaying Information
2
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 .
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 displays
in the Literal control (see Figure 2.3).
LISTING 2.4 ShowLiteral.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“
<script runat=”server”>
void Page_Load()
{
ltlTitle.Text = DateTime.Now.ToString(“D”);
}
</script>
<html xmlns=” >
<head>
<title><asp:Literal id=”ltlTitle” Runat=”Server” /></title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<h1>Look in the title bar</h1>
</div>
</form>
From the Library of Wow! eBook
ptg
66
</body>
</html>
CHAPTER 2 Using the Standard Controls
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 for-
mat 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.
FIGURE 2.3 Modifying the browser title with a Literal control.
From the Library of Wow! eBook
ptg
67
Displaying Information
2
The Literal control does support one property not supported by the Label control: the
Mode property. The Mode property enables you to encode HTML content and 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 not support-
ed by the requesting device.
For example, the page in Listing 2.5 contains three Literal controls set to the three possi-
ble values of the Mode property (see Figure 2.4).
LISTING 2.5 ShowLiteralMode.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“
<html xmlns=” >
<head id=”Head1” runat=”server”>
<title>Show Literal Mode</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:Literal
id=”ltlFirst”
Mode=”PassThrough”
Text=”<hr />”
Runat=”server” />
<br /><br />
<asp:Literal
id=”ltlSecond”
Mode=”Encode”
Text=”<hr />”
Runat=”server” />
<br /><br />
<asp:Literal
id=”ltlThird”
Mode=”Transform”
Text=”<hr />”
From the Library of Wow! eBook
ptg
68
CHAPTER 2 Using the Standard Controls
Runat=”server” />
</div>
</form>
</body>
</html>
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 request the page
from a device (such as a WML cell phone) that does not support the <hr> tag, the third
<hr /> tag is 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
You can use the TextBox control to display three different types of input fields depending
on the value of its TextMode property. The TextMode property accepts the following three
values:
From the Library of Wow! eBook
ptg
69
Accepting User Input
2
. SingleLine—Displays a single-line input field.
. MultiLine—Displays a multiline 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).
LISTING 2.6 ShowTextBox.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“
<html xmlns=” >
<head id=”Head1” runat=”server”>
<title>Show TextBox</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:TextBox
id=”txtUserName”
TextMode=”SingleLine”
Runat=”server” />
<br /><br />
<asp:TextBox
id=”txtPassword”
TextMode=”Password”
Runat=”server” />
<br /><br />
<asp:TextBox
id=”txtComments”
TextMode=”MultiLine”
Runat=”server” />
</div>
</form>
</body>
</html>
From the Library of Wow! eBook
ptg
70
CHAPTER 2 Using the Standard Controls
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. (This 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.
FIGURE 2.5 Displaying TextBox controls with different values for TextMode.
From the Library of Wow! eBook
ptg
71
Accepting User Input
2
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 display (see Figure 2.6).
LISTING 2.7 TextBoxAutoPostBack.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“
<script runat=”server”>
protected void txtSearch_TextChanged(object sender, EventArgs e)
{
lblSearchResults.Text = “Search for: “ + txtSearch.Text;
}
</script>
<html xmlns=” >
<head id=”Head1” runat=”server”>
<title>TextBox AutoPostBack</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:Label
id=”lblSearch”
Text=”Search:”
Runat=”server” />
<asp:TextBox
id=”txtSearch”
AutoPostBack=”true”
OnTextChanged=”txtSearch_TextChanged”
Runat=”server” />
<hr />
<asp:Label
id=”lblSearchResults”
Runat=”server” />
From the Library of Wow! eBook
ptg
72
CHAPTER 2 Using the Standard Controls
</div>
</form>
</body>
</html>
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 s hould avoid usin g the AutoPostBack property for accessibility reasons. Creating a
page that automatically reposts the server can be confusing to someone using an
assistive device such as a screen reader. A better way to send data back to the server
and dynamically update the page without a PostBack is to utilize features of Microsoft
AJAX, JavaScript, or jQuery. This approach often results in a cleaner, faster page.
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 reenter 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, 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).
From the Library of Wow! eBook
ptg
73
Accepting User Input
2
NOTE
You c an disable auto-c omplete by addin g an AutoComplete=”Off” attribute to the
TextBox. This is useful when you want to use 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).
LISTING 2.8 ShowAutoComplete.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“
<html xmlns=” >
<head id=”Head1” runat=”server”>
<title>Show AutoComplete</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:Label
id=”lblFirstName”
Text=”First Name:”
AssociatedControlID=”txtFirstName”
Runat=”server” />
<br />
<asp:TextBox
id=”txtFirstName”
AutoCompleteType=”FirstName”
Runat=”server” />
<br /><br />
<asp:Label
id=”lblLastname”
Text=”Last Name:”
AssociatedControlID=”txtLastName”
Runat=”server” />
<br />
<asp:TextBox
id=”txtLastName”
From the Library of Wow! eBook
