Creating Text Boxes

We've been working with text boxes in this and the previous chapter already; because text boxes in Web forms work much like they do in Windows forms, they're easy to handle. For example, the TextBoxes example on the CD-ROM shows several ways to work with text boxes, as you see in Figure 15.8. This example shows how to work with single-line text boxes, multiline text boxes, and password controls. When you click the button in this example, the message "You clicked the button." appears in a single-line text box and a multiline text box. In addition, the masked text in a password control is copied and displayed in a text box under that control.

Figure 15.8: The Textboxes example.

Here is WebForm1.aspx from the Textboxes example:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind=
"WebForm1.aspx.vb" Inherits="TextBoxes.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title></title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/ _
        intellisense/ie5">
  </HEAD>
  <body MS_POSITIONING="GridLayout">

    <form id="Form1" method="post" runat="server">
<asp:Button id=Button1 style="Z-INDEX: 101; LEFT: 101px;
POSITION: absolute; TOP: 78px" runat="server" Text="Click me"
Width="114px" Height="24px"></asp:Button>
<asp:Label id=Label1 style="Z-INDEX: 106; LEFT: 102px;
POSITION: absolute; TOP: 115px" runat="server">
Enter password:</asp:Label>
<asp:TextBox id=TextBox4 style="Z-INDEX: 105; LEFT:
100px; POSITION: absolute; TOP: 188px" runat="server"
Width="119px" Height="27px"></asp:TextBox>
<asp:TextBox id=TextBox3 style="Z-INDEX: 104; LEFT: 101px;
POSITION: absolute; TOP: 146px" runat="server" Width="118px"
Height="24px" TextMode="Password"></asp:TextBox>
<asp:TextBox id=TextBox2 style="Z-INDEX: 103; LEFT: 233px;
POSITION: absolute; TOP: 117px" runat="server" Width="157px"
Height="74px" TextMode="MultiLine"></asp:TextBox>
<asp:TextBox id=TextBox1 style="Z-INDEX: 102; LEFT: 235px;
POSITION: absolute; TOP: 78px" runat="server" AutoPostBack="True">
</asp:TextBox>

    </form>
  </body>
</HTML>

And here is WebForm1.aspx.vb from this example:

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected WithEvents Button1 As System.Web.UI.WebControls.Button
    Protected WithEvents TextBox2 As System.Web.UI.WebControls.TextBox
    Protected WithEvents TextBox3 As System.Web.UI.WebControls.TextBox
    Protected WithEvents TextBox4 As System.Web.UI.WebControls.TextBox
    Protected WithEvents Label1 As System.Web.UI.WebControls.Label
    Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox

#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> _
        Private Sub InitializeComponent()

    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here
    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles Button1.Click
        TextBox1.Text = "You clicked the button."
        TextBox2.Text = "You clicked the button."
        TextBox4.Text = TextBox3.Text
    End Sub

    Private Sub TextBox1_TextChanged(ByVal sender As _
        System.Object, ByVal e As System.EventArgs) Handles _
        TextBox1.TextChanged
        TextBox1.Text = "You changed the text."
    End Sub
End Class

As discussed in the In Depth section of this chapter, a single-line text box actually becomes an HTML <input> control with the type attribute set to "text", which is called a text field in HTML:

<input name="TextBox1" type="text" id="TextBox1" style="Z-INDEX: 104; LEFT:
239px; POSITION: absolute; TOP: 127px" />

Most work one does with a text box is done with the Text property and the TextChanged event. Here's how I use the Text property to place text into the single-line text box in the Textboxes example when the user clicks the button:

    Private Sub Button1_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles Button1.Click
        TextBox1.Text = "You clicked the button."
        ⋮
    End Sub

If you want to use a text box event like TextChanged, which occurs when the text in the text box is changed, note that text box events are not automatically posted back to the server when they occur. If you want that to happen, set the text box's AutoPostBack property to True first (see "Forcing Event Handling" in Chapter 14 for more information). I've added code to the top text box's TextChanged event in the Textboxes example so if you change that text, the message "You changed the text." appears in that text box (note that to trigger a TextChanged event, you must first change the text and then click another control so the text box loses the focus):

    Private Sub TextBox1_TextChanged(ByVal sender As _
        System.Object, ByVal e As System.EventArgs) Handles _
        TextBox1.TextChanged
        TextBox1.Text = "You changed the text."
    End Sub

*Related solution:*	*Found on page:*
Forcing Event Handling	645