| 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. 
Listing 2.6. ShowTextBox.aspx| [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR  /xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Show TextBox</title> </head> <body> <form runat="server"> <div> <asp:TextBox TextMode="SingleLine" Runat="server" /> <br /><br /> <asp:TextBox TextMode="Password" Runat="server" /> <br /><br /> <asp:TextBox TextMode="MultiLine" Runat="server" /> </div> </form> </body> </html>
|
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: And, the TextBox control supports the following event: 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. 
Listing 2.7. TextBoxAutoPostBack.aspx| [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub txtSearch_TextChanged(ByVal sender As Object, ByVal e As EventArgs) lblSearchResults.Text = "Search for: " & txtSearch.Text End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>TextBox AutoPostBack</title> </head> <body> <form runat="server"> <div> <asp:Label Text="Search:" Runat="server" /> <asp:TextBox AutoPostBack="true" OnTextChanged="txtSearch_TextChanged" Runat="server" /> <hr /> <asp:Label Runat="server" /> </div> </form> </body> </html>
|
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 to 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 informationsuch as a first name, last name, or phone numberin 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). 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. 
Listing 2.8. ShowAutoComplete.aspx| [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Show AutoComplete</title> </head> <body> <form runat="server"> <div> <asp:Label Text="First Name:" AssociatedControl Runat="server" /> <br /> <asp:TextBox AutoCompleteType="FirstName" Runat="server" /> <br /><br /> <asp:Label Text="Last Name:" AssociatedControl Runat="server" /> <br /> <asp:TextBox AutoCompleteType="LastName" Runat="server" /> <br /><br /> <asp:Button Text="Submit" Runat="server" /> </div> </form> </body> </html>
|
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. Listing 2.9. TextBoxFocus.aspx| [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub Page_Load() txtFirstName.Focus() End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>TextBox Focus</title> </head> <body> <form runat="server"> <div> <asp:Label Text="First Name:" AssociatedControl Runat="server" /> <br /> <asp:TextBox AutoCompleteType="FirstName" Runat="server" /> <br /><br /> <asp:Label Text="Last Name:" AssociatedControl Runat="server" /> <br /> <asp:TextBox AutoCompleteType="LastName" Runat="server" /> <br /><br /> <asp:Button Text="Submit" Runat="server" /> </div> </form> </body> </html>
|
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. 
Listing 2.10. ShowCheckBox.aspx| [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs) lblResult.Text = chkNewsletter.Checked.ToString() End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Show CheckBox</title> </head> <body> <form runat="server"> <div> <asp:CheckBox Text="Receive Newsletter?" Runat="server" /> <br /> <asp:Button Text="Submit" OnClick="btnSubmit_Click" Runat="server" /> <hr /> <asp:Label Runat="server" /> </div> </form> </body> </html>
|
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 standardscompliant) 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: And, the CheckBox control supports the following event: 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. Listing 2.11. CheckBoxAutoPostBack.aspx| [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub chkNewsletter_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs) lblResult.Text = chkNewsletter.Checked.ToString() End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>CheckBox AutoPostBack</title> </head> <body> <form runat="server"> <div> <asp:CheckBox Text="Receive Newsletter?" AutoPostBack="true" OnCheckedChanged="chkNewsletter_CheckedChanged" Runat="server" /> <hr /> <asp:Label Runat="server" /> </div> </form> </body> </html>
|
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). Listing 2.12. ShowRadioButton.aspx| [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs) If rdlMagazine.Checked Then lblResult.Text = rdlMagazine.Text End If If rdlTelevision.Checked Then lblResult.Text = rdlTelevision.Text End If If rdlOther.Checked Then lblResult.Text = rdlOther.Text End If End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Show RadioButton</title> </head> <body> <form runat="server"> <div> How did you hear about our Website? <ul> <li> <asp:RadioButton Text="Magazine Article" GroupName="Source" Runat="server" /> </li> <li> <asp:RadioButton Text="Television Program" GroupName="Source" Runat="server" /> </li> <li> <asp:RadioButton Text="Other Source" GroupName="Source" Runat="server" /> </li> </ul> <asp:Button Text="Submit" Runat="server" OnClick="btnSubmit_Click" /> <hr /> <asp:Label Runat="server" /> </div> </form> </body> </html>
|
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: Finally, the RadioButton control supports the following event: 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. Listing 2.13. RadioButtonAutoPostBack.aspx| [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub RadioButton_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs) Dim selectedRadioButton As RadioButton = CType(sender, RadioButton) lblResult.Text = selectedRadioButton.Text End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>RadioButton AutoPostBack</title> </head> <body> <form runat="server"> <div> How did you hear about our Website? <ul> <li> <asp:RadioButton Text="Magazine Article" GroupName="Source" AutoPostBack="true" OnCheckedChanged="RadioButton_CheckedChanged" Runat="server" /> </li> <li> <asp:RadioButton Text="Television Program" GroupName="Source" AutoPostBack="true" OnCheckedChanged="RadioButton_CheckedChanged" Runat="server" /> </li> <li> <asp:RadioButton Text="Other Source" GroupName="Source" AutoPostBack="true" OnCheckedChanged="RadioButton_CheckedChanged" Runat="server" /> </li> </ul> <hr /> <asp:Label Runat="server" /> </div> </form> </body> </html>
|
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."
| 