Displaying an ASP.NET Textbox - How Does it Differ from an HTML Textbox?
What is an ASP.NET Textbox?
The ASP.NET textbox is the ASP.NET control version of a regular HTML textbox as defined by the tag with a type of “text.” Generally you can perform the same functions with either the HTML or ASP.NET textbox, but the ASP.NET version has additional customization and ASP.NET specific properties such as theming. The ASP.NET textbox also integrates with the Ajax Control Toolkit, allowing it to be extended in various ways to improve the user experience.
How to Use an ASP.NET Textbox?
The best way to learn any type of programming is by example, so let’s jump right in. We are going to build a page with a form containing an ASP.NET textbox for the user to enter their name, a button to submit that name, and a blank label. Then, we will demonstrate how to use the submitted value from the textbox to populate that label. The code for our page is as follows:
What is your name?
<asp:TextBox ID=“txtMyName” runat=“server” />
<asp:Button ID=“btnChangeName” Text=“Submit Name” PostBackURL="" runat=“server” />
<asp:Label runat=“server” ID=“lblMyName” />
Which will render like this:
We now have a form composed of an ASP.NET textbox and a button. When the button is clicked, it will post the values of each control in the form to the page defined by the PostBackURL property. The only active control in our form in this case is the ASP.NET textbox, and since the postback URL is blank it will post to the current page. Therefore we are submitting the text within the textbox back to the current page and reloading it. If you wanted to use the data from the form in a different page, you could change the PostBackURL property to point at that page.
Using the Data From an ASP.NET Textbox
The next step is to do something with the data submitted by the form we just created. We set the PostBack URL to be the same as the page containing the form, so we will use the data to populate the blank label. In the Page_Load section of our codebehind file we would include the following code:
//Check if the page is a postback (form submission)
if (Page.IsPostBack)
{
//We only have one form so we know which controls will be included
//Set the label text to include the submitted Textbox text
lblMyName.Text = “Your name is " + Request.Form[“txtMyName”].ToString();
}
This very simple code snippet first checks if the page is a postback, which in our example we know means that the form has been submitted. The label text is then set to a string which includes the submitted text from the textbox. When I enter my name and click submit name, the returned page will look like this:
Extending the ASP.NET Textbox
The ASP.NET Ajax Control Toolkit provides several very useful ways to extend the capability of an ASP.NET textbox through the following controls:
- The Masked Edit extender attaches a “mask” to an ASP.NET textbox, limiting the input to either a number, a date, a time, or a date and time.
- The Resizable Control extender allows the user to dynamically resize a textbox on the page.
- The Filtered Textbox extender uses javascript to limit the type of characters that a user can enter into an ASP.NET textbox.
- The TextBox Watermark extender places a watermark over a textbox until the user selects it, allowing you to provide input guidance without cluttering the page.
- The ASP.NET AutoComplete extender provides input suggestions based upon what a user has entered into a textbox by calling a web service or page method.
More Information
This article provides a brief introduction to ASP.NET textboxes, but doesn’t come close to scratching the surface of their capability. Some more examples include creating different types of textboxes in ASP.NET, and implementing form validation with ASP.NET.
This post is part of the series: Using and Extending the ASP.NET Textbox Control
Learn about the ASP.NET Textbox control, including how to implement it on your pages, how to use the control’s data on your pages, and how to extend the control with AJAX extenders.
