TextBox ASP.NET Server Control
TextBox ASP.NET Server Control"-->
| only for RuBoard |
TextBox ASP.NET Server Control
The TextBox server control provides a way for users to enter information such as numbers , text, dates, and passwords. There are three types of TextBox controls: Single-Line, Multi-Line, and Password ”the type of TextBox is determined by the value of the TextMode attribute. In the following sections, I will demonstrate how to use each type of TextBox control and I'll also go over some of their individual attributes you can use to control the data that is entered.
Single-Line TextBox
The single-line TextBox can be used for a variety of purposes. For example, obtaining a username, or the first and last name of a user . You could use a multi-line, but it wouldn't be prudent in these examples because our examples will consist of very small string values. You should use the multi-line for longer strings ”a sentence or paragraph worth of text. I think a good rule of thumb is if the user might not be able to fit all the text they have to enter in a single-line TextBox then use a multi-line, but it all falls back to your design patterns. Listing 8.6 is a code example that uses the single-line TextBox control.
Listing 8.6 Single-line TextBox
01: <html> 02: <body Style="Font-Size:12"> 03: <form runat="server"> 04: <h3>TextBox - TextMode="SingleLine"</h3> 05: Enter Your Name: 06: <asp:TextBox 07: id="txtSingle" 08: runat="server" 09: TextMode="SingleLine" 10: BackColor="lightGray" 11: ForeColor="Black" 12: Font-Bold="true" 13: BorderWidth="2" 14: BorderColor="Black" 15: /> 16: </form> 17: </body> 18: </html>
The TextBox members contain every style attribute available to an HTML INPUT box, such as ForeColor , BackColor , and Font as seen in Listing 8.6. On line 9 I set the type of Textbox I want by setting the TextMode attribute to SingleLine .
Another attribute I want to talk about is the MaxLength attribute. The MaxLength attribute gets or sets the maximum number of characters allowed in the TextBox . For example, you can set MaxLength to 9 to restrict the length of usernames to 9 characters. If you want to play around with the MaxLength attribute add MaxLength="9" to Listing 8.6 between lines 14 and 15 and try typing more than 9 characters in the TextBox . This attribute works for all three types of TextBox controls. Columns Attribute is another attribute worth discussing. Columns sets the width of the control in characters. Don't confuse the Columns attribute with MaxLength . MaxLength is the total amount of characters that can be entered in the control while Columns is the display width in characters for the control. When using a single-line TextBox , characters can still be entered once the Columns value has been exceeded. However, as you'll see in the next section the multi-line TextBox behaves differently when the Columns attribute is set.
If you were to view the source on the rendered page when using the single-line TextBox , you would see the following:
01: <input name="txtSingle" type="text" maxlength="9" id="txtSingle" 02: style="color:Black;background-color:LightGrey;border-color:Black; 03: border-width:2px;border-style:solid;font-weight:bold;" />
The TextBox is conveted into an INPUT HTML element of the type text .
Multi-line TextBox
The multi-line TextBox is exactly what the name entails. It is a TextBox with multiple rows so a user can enter multiple lines of text. The TextMode value for a multi-line TextBox is MultiLine . The multi-line TextBox has additional attributes that the single-line or password TextBox 's don't have. The first is Rows , which specifies the number of rows within a TextBox . The second is Wrap , and can have a value of either true (default) or false . When set to true text will wrap to the next row (line) within the TextBox when the text has reached the end of the line ”much like Microsoft Word. When set to false , a scroll bar will be rendered at the bottom of the control and text will continue indefinitely until the user presses Enter to go to the next line.
Keep in mind that attributes for one type of TextBox do not work with another. For instance, you can set the Rows attribute for a single-line TextBox and not get an error, but the TextBox can't use it because it doesn't exist for that type of TextBox . On the flip side, the MaxLength attribute won't work with a multi-line TextBox . If the situation arises where you have to limit the amount of characters allowed in a multi-line TextBox you will have to use another type of validation to make sure that the correct values are entered ”for instance a custom validator. Listing 8.7 is a code example of how to use the multi-line TextBox .
Listing 8.7 The Multi-line TextBox
01: <html> 02: <body Style="Font-Size:12"> 03: <form runat="server"> 04: <h3>TextBox - TextMode="MultiLine"</h3> 05: Enter Your Address: 06: <asp:TextBox 07: id="txtMulti" 08: runat="server" 09: TextMode="MultiLine" 10: BackColor="lightGray" 11: ForeColor="Black" 12: Font-Bold="true" 13: BorderWidth="2" 14: BorderColor="Black" 15: Columns="25" 16: Rows="5" 17: /> 18: </form> 19: </body> 20: </html>
On lines 15 and 16 I set the Columns and Rows attributes. Columns is set to 25, which means that up to 25 characters can be entered on each line of the TextBox . Rows is set to 5, which means that only 5 lines are viewable at any one time.
If you were to view the source on the rendered page when using the multi-line TextBox , you would see the following:
<textarea name="txtMulti" rows="5" cols="25" id="txtMulti" style="color:Black;background-color:LightGrey;border-color:Black; border-width:2px;border-style:solid;font-weight:bold;"></textarea>
The TextBox is converted into a TEXTAREA HTML element.
Password TextBox
The Password TextBox masks all the characters entered by the user with an * ”the asterisk, rather than the actual characters being typed, appears on the user's screen. The Password TextBox is, in fact, a single-line TextBox and supports the exact same attributes as the regular single-line; the only difference is that the characters entered are masked. Listing 8.8 shows how to use the Password type TextBox .
Listing 8.8 The Password TextBox
01: <html> 02: <body Style="Font-Size:12"> 03: <form runat="server"> 04: <h3>TextBox - TextMode="Password"</h3> 05: Enter Your Password: 06: <asp:TextBox 07: id="txtPassword" 08: runat="server" 09: TextMode="Password" 10: BackColor="lightGray" 11: ForeColor="Black" 12: Font-Bold="true" 13: BorderWidth="2" 14: BorderColor="Black" 15: MaxLength="9" 16: /> 17: </form> 18: </body> 19: </html>
Notice that the code in Listings 8.8 and 8.6 are nearly identical. The only differences are the ID attribute in Listing 8.8 is txtPassword , the TextMode is set to Password , and a MaxLength value is given. If you were to view the source on the rendered page using the Password TextBox , you would see the following:
<input name="txtPassword" type="password" maxlength="9" id="txtPassword" style="color:Black;background-color:LightGrey;border-color:Black; border-width:2px;border-style:solid;font-weight:bold;" />
The TextBox is converted into an INPUT HTML element of the type password.
Raising and Handling Events With the TextBox
In this section I'll demonstrate some of the built-in functionality of the Textbox server control. You'll learn how to wire up the TextBox so that when the Text of the TextBox changes, automatic page postback will occur. For example, you can automatically postback the page as soon as a user changes the contents of a TextBox and then leaves TextBox . Additionally, you will learn how to raise and handle the TextChanged event. The TextChanged event is fired when the value of the TextBox is changed from its rendered state and posted back to the server. This feature is handy if you need to validate how many characters are entered in a multi-line TextBox .
You can enable automatic page postback by setting the TextBox 's AutoPostBack attribute to true , the default is false . You use the OnTextChanged attribute of the TextBox to wire up a method to handle the TextChanged event ”the value of OnTextChanged should be equal to the name of the method. Listing 8.9 contains a code example demonstrating how to raise and handle events using the TextBox .
Listing 8.9 Raising and Handling Events Using the TextBox
[VisualBasic.NET] 01: <script language="vb" runat="server"> 02: 03: public sub txtSingle_TextChanged(sender as Object, e as EventArgs) 04: 05: lblSingle.Text = txtSingle.Text 06: 07: end sub 08: 09: public sub txtMulti_TextChanged(sender as Object, e as EventArgs) 10: 11: lblMulti.Text = txtMulti.Text 12: 13: end sub 14: 15: public sub txtPassword_TextChanged(sender as Object, e as EventArgs) 16: 17: lblPassword.Text = txtPassword.Text 18: 19: end sub 20: 21: </script> [C#.NET] 01: <script language="c#" runat="server"> 02: 03: void txtSingle_TextChanged(Object sender, EventArgs e){ 04: 05: lblSingle.Text = txtSingle.Text; 06: 07: } 08: 09: void txtMulti_TextChanged(Object sender, EventArgs e){ 10: 11: lblMulti.Text = txtMulti.Text; 12: 13: } 14: 15: void txtPassword_TextChanged(Object sender, EventArgs e){ 16: 17: lblPassword.Text = txtPassword.Text; 18: 19: } 20: 21: </script> [VisualBasic.NET & C#.NET] 22: <html> 23: <body Style="Font-Size:12"> 24: <form runat="server"> 25: <h3>Raising and Handling Events</h3> 26: 27: Enter Your Name: 28: 29: <br> 30: <asp:TextBox 31: id="txtSingle" 32: runat="server" 33: TextMode="SingleLine" 34: BackColor="lightGray" 35: ForeColor="Black" 36: Font-Bold="true" 37: BorderWidth="2" 38: BorderColor="Black" 39: MaxLength="10" 40: AutoPostBack="false" 41: OnTextChanged="txtSingle_TextChanged" 42: /> 43: <asp:Label id="lblSingle" runat="server" /> 44: 45: <p> 46: Enter Your Address: 47: 48: <br> 49: <asp:TextBox 50: id="txtMulti" 51: runat="server" 52: TextMode="MultiLine" 53: BackColor="lightGray" 54: ForeColor="Black" 55: Font-Bold="true" 56: BorderWidth="2" 57: BorderColor="Black" 58: Columns="15" 59: Rows="5" 60: AutoPostBack="true" 61: OnTextChanged="txtMulti_TextChanged" 62: /> 63: <asp:Label id="lblMulti" runat="server" /> 64: 65: <p> 66: Enter A Password: 67: 68: <br> 69: <asp:TextBox 70: id="txtPassword" 71: runat="server" 72: TextMode="Password" 73: BackColor="lightGray" 74: ForeColor="Black" 75: Font-Bold="true" 76: BorderWidth="2" 77: BorderColor="Black" 78: MaxLength="10" 79: AutoPostBack="true" 80: OnTextChanged="txtPassword_TextChanged" 81: 82: /> 83: <asp:Label id="lblPassword" runat="server" /> 84: 85: </form> 86: </body> 87: </html> Let's walk through each of the three TextBox controls from Listing 8.9. The single-line TextBox (lines 30 “42) has AutoPostBack set to false and OnTextChanged set to txtSingle_TextChanged . What this means is when the value within the TextBox changes, the page will not be posted back to the server, but in the event the page is posted back the txtSingle_TextChanged method (lines 3 “7) will handle the TextChanged event. The multi-line TextBox (lines 49 “62) has AutoPostBack set to true and the OnTextChanged set to txtMulti_TextChanged . What this means is the page will be posted back to the server when the value within the TextBox changes and the txtMulti_TextChanged method will handle its TextChanged event. The Password TextBox (lines 69 “82) also has AutoPostBack set to true and the OnTextChanged set to txtPassword_TextChanged .
To see the effects, do the following:
-
Enter your name in the single-line TextBox.
-
Navigate to the multi-line TextBox and enter your address. (The page will not post bsack to the server because AutoPostBack is set to false.)
-
Navigate to the Password TextBox. (The page will post back to the server because AutoPostBack is set to true and the TextChanged event will be raised for the single-line and multi-line TextBox.)
Figure 8.3 contains the page from Listing 8.9 after step 3 in the previous list is executed.
Figure 8.3. Page after post back.
Notice that the Label control to the right of the single-line and multi-line TextBox controls have the text entered in the TextBox displayed.
Binding a TextBox to a Data Source
The TextBox control also doesn't have a DataSource property, but you can certainly bind the attributes of the TextBox to fields from your data source. For example, if your site has membership and you allow the user to edit this information you can use a TextBox to load the initial value and then save the edited value back to your database. Rest assured this is covered in detail later in the book.
| only for RuBoard |
EAN: 2147483647
Pages: 170