ASP.NET Controls: The Text Box

	ASP.NET Controls: The Text Box

Text Box Fundamentals

Introduction

A text box is a rectangular window that displays and/or request text from the user. Normally, the text box in ASP.NET follows the web rules established in the input text box control of the HTML. Still, it adds a few small characteristics.

To support the text box in an ASP.NET web site, the System.Web.UI.WebControls namespace contains a class named TextBox. This class is visually represented by a control of the same name.

Creating a Text Box

If you are creating your web site using either Microsoft Visual Studio or Microsoft Visual Web Developer, to add a text box, from the Standard section of the Toolbox, drag a TextBox object and drop it on the form.

To manually add a text box to a form, create an <asp:TextBox> tag. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>

<form id="frmTimeSheet" runat="server">
  <asp:TextBox ID="txtFullName" runat="server"></asp:TextBox>
</form>

</body>
</html>

This would produce:

Text Box

Characteristics of a Text Box

The Text of a Text Box

As its name suggests, a text box is meant to hold text. When it comes up, if you want the control to display text, if you are visually designing the web site, access the the Properties window for the text box, click Text and type the desired value. If you are working manually, add a Text attribute and assign the desired value to it. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>

<form id="frmCalculation" runat="server">
  <asp:TextBox ID="txtNumber" Text="0.00" runat="server"></asp:TextBox>
</form>

</body>
</html>

To programmatically access the text of a text box, type the ID of the control, followed by a period, followed by Text. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<script runat="server">
private void ButtonClicked(object sender, EventArgs e)
{
    txtNumber.Text...;
}
</script>

<title>Exercise</title>
</head>
<body>

<form id="frmExercise" runat="server">
  <ul style="list-style-type: none;">
    <li><asp:TextBox ID="txtNumber"
		     Text="0.00"
		     runat="server"></asp:TextBox></li>
    <li><asp:Button id="btnExercise"
        	    Text="Exercise"
	      	    OnClick="ButtonClicked"
	      	    runat="server"></asp:Button></li>
  </ul>
</form>

</body>
</html>

To make the text box display a value, you can assign a value to it.

The Width of a Text Box

When a text box has been added to a form, it assumes some default dimensions. The height is controlled by the operating system while the width is set in the .NET Framework. After some text has been added to the control, if the control is not width enough, some text would disappear on the right side.

To control the width of a text box, you can specify it in terms of the width of a character. To support this, the <asp:TextBox> tag is equipped with an attribute named Columns. To set the width of a text box, assign the maximum number of characters to each line of text to this attribute. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>

<form id="frmTimeSheet" runat="server">
  <asp:TextBox ID="txtAddress" Columns="32" runat="server"></asp:TextBox>
</form>

</body>
</html>

This would produce:

Text Box

Changing the Value of a Text Box

To use a text box, the web page visitor can click in it and start typing. You too can assign a value to a text box. Whenever the value of a text box has been changed, the control fires an event named TextChanged. In fact, this is the default event of the text box, which means if you double-click a text box while you are designing the form, the code of this event would be generated. The TextChanged event is of type EventArgs.

You can use this event to take action while the text in the control is being changed.

Auto-Completing a Text Box

To assist the user with specifying the value of a text box, you can make it remember some of the values that were previously used on it. To support this, the <asp:TextBox> tag is equipped with an attribute named AutoCompleteType. This attribute uses a value of the AutoCompleteType enumeration. The members of this enumeration are: None, Disabled, Cellular, Company, Department, DisplayName, Email, FirstName, Gender, HomeCity, HomeCountryRegion, HomeFax, HomePhone, HomeState, HomeStreetAddress, HomeZipCode, Homepage, JobTitle, LastName, MiddleName, Notes, Office, Pager, BusinessCity, BusinessCountryRegion, BusinessFax, BusinessPhone, BusinessState, BusinessStreetAddress, BusinessUrl, BusinessZipCode, and Search.

To visually specify this characteristic, on the form, click the text box. In the Properties window, click AutoCompleteType and select from the list.

To manually specify this aspect, add an AutoCompleteType attribute to the <asp:TextBox> tag and assign the desired member of the enumeration to it.

Automatically Posting Back

After using a text box, the user can click a button to send the value to you at the server. This characteristic is controlled by a Boolean attribute named AutoPostBack whose default value is "False". If you want the values to be automatically posted when the user clicks another control after using the text box, change the value of the AutoPostBack attribute from False to "True" to it. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>

<form id="frmTimeSheet" runat="server">
  <asp:TextBox ID="txtFullName"
	       AutoPostBack="True"
	       runat="server"></asp:TextBox>
</form>

</body>
</html>