ASP 4.0 TextBox Controls
Like Asp.Net Label Control, you can read and write text to the TextBox Control via the Text Property. At runtime, user can edit the content of the TextBox and hence this control is widely used to get user input. In this hands-on lab, we will add TextBox controls to the Asp.Net Web Form and explore its behaviour.
1: Add WebForm
In this step, we will create an empty website and then add a web form. We will use this website in the next coming labs and learn the basic controls of Asp.Net 4.0. Refer the picture to the sub-steps:
1) From the file menu choose File->New->Web Site. This will open New Web Site dialog.
2) Pick Visual C# and see available templates on the right-side pane.
3) Pick Asp.Net Empty Web Site from the Template list. This option will create an empty web site and we no need to do any clean up activity.
4) Select a folder location and name the project. Here, the project name is: 05_ASP4_Controls.
5) Click OK to create the website. Visual studio will create the project and you can see it in the solution explorer.
6) Right click the project name. This will display a context menu.
7) From the context menu, pick Add New Item…
8) In the Add New Item dialog, pick Web Form
9) Enter Name field as: 01_TextBoxControl.aspx
10) Make sure to check the option to generate the code behind file.
11) Click on the Add button. This will add the new web form to the project.
12) You can see the newly added web form in the Solution Explorer window.
2: TextBox Controls – MaxLength Property
The MaxLength property restricts the user to provide input with limited number of characters. Now, we have webform ready and we will add two TextBox controls in it to explore the MaxLength property. This sub-step will also familiarize you with control alignment and size.
Add Two TextBox Controls
1) Double click the Web Form name in the solution explorer.
2) Switch to design view by clicking the design tab. This will help us in designing the form.
3) In the Toolbox, place mouse cursor on the TextBox and hold-down the left mouse button.
4) Do not release left mouse button and drag it to the form. When you drag, you can see the mouse cursor changes to show a + icon stating this control is on the right container and it can be dropped. Release the left mouse button to place the control as shown.
5) Click on the control and place mouse cursor on the middle small box (Zoomed in the picture). We call these small boxes as grippers and using these one can resize the control. You can also notice cursor icon changes to double pointed arrow stating the control’s width can be increased or decreased.
6) Use the Gripper to increase the length of the First Text which we dropped on step 3.
7) Drag & Drop second TextBox Control to the form as shown in the picture. The small vertical line indicates TextBox location.
8) Once you drop the TextBox, it will stay below the first TextBox control on the web form. But we do not have ample space between these two TextBox controls.
9) Click on the second TextBox to select it. Then, hold down the left mouse button.
10) Drag the mouse cursor down the selected TextBox to add some more space between current one and first one.
Maxlength Property
11) Once we release the mouse, the textbox will have additional vertical gap.
12) Right click the second TextBox and pick Properties.
13) Set MaxLength property to 15. The MaxLength property restricts the user to type maximum of 15 letters.
14) Run the Web-Form to test both the TextBox controls.
15) In the first TextBox, user can type any number of characters.
16) In the second TextBox, user can type maximum of 15 letters. This TextBox ignores the Keystrokes after typing 15th letter.
3: Add Password TextBox
When we set TextMode property to Password, the TextBox will not show any typed letters in the display area.
1) Place third TextBox Control on the Web Form. Resize it to your choice.
2) Set TextMode Property to Password. This will make TextBox Control suitable to get a password from the users. When they type the letters, a masked letter (Dot Usually) appears.
3) Run the form and type some letters to observe how this TextBox masks the typed-in letters.
4: Add Multiline TextBox to Web-Form
Till now we had used a single line text box. Now, we will see how to add Multi-Line TextBox to the Web Form. A Multi-Line TextBox control will accept the newline character when the user hits the enter button while typing.
1) Drop 4th TextBox to the Web-Form.
2) Set TextMode property to MultiLine. This will enable the TextBox to accept the Enter key stroke and introduces new-line character when the user hits the enter button on the keyboard. Rows property tells how many lines of text a MultiLine TextBox can show without the need of the Scrollbar. Means, it will decide the height of the TextBox Control. In our case, we set a value of 10 to show 10 lines of text.
3) In the Web-Form, you can notice how the TextBox changes its shape after setting the TextMode property to MultiLine.
4) Here, you can notice how the TextBox’s Width changes based on the Rows property.
5) Run the Web-Form. You can type multiple lines of text the way you type it in the word processor.
6) When the number of lines exceeds the value in the Rows property, a scroll bar will appear. Using this scrollbar, one can go through all the lines of texts.
7) Even though we set the initial height to support 10 lines, using the grey area in the bottom right corner, the user can resize the multi-line text box. When you place the cursor here, you can see the cursor change its shape to indicate the text box can be resized.
Summary
In this Lab, you learnt how to use TextBox Control in the web Form. Do not worry about the coding right now and we will do that in the later part of the Labs. By this you are aware of the Single-Line TextBox, Multi-Line TextBox, and Password Field.
Categories: ASP 4.0
Tags: MaxLength, MultiLine TextBox, Password Field, Rows, TextBox, TextMode
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.