article

Web Controls in ASP.NET - The TextBox Control!

Email
Submitted on: 1/1/2015 5:04:00 AM
By: Shane Bauer (from psc cd)  
Level: Beginner
User Rating: By 10 Users
Compatibility: VB.NET, ASP.NET
Views: 806
 
     The purpose of this article is to show you how to use the TextBox control. In this article, it covers everything from the basic syntax, different properties to setting text values. If you are new to ASP.NET, I suggest you read this. Please vote and leave comments! Enjoy!

 
				

Web Controls in ASP.NET - The TextBox Control

One of the most important aspects in developing dynamics websites is the ability to use form data. In the previous versions of ASP, form data was collected by using standard HTML tags and parsing it to some server-side ASP script. In ASP.NET, instead of using HTML code, you can use Web Controls to produce different form elements in order to create "smart forms." In this article, I will expose you to the TextBox Control.

Unlike the Label Control, the textbox control has a few more elements to it. Before anything else, let's begin by looking at the very basic syntax.

Code:
<asp:TextBox id="mybox" TextMode="SingleLine" Columns="25" runat="server" />

The example above shows a minimal amount of code to produce a TextBox.

The id="textbox" section is used to give a unique name to this control. Lets say you wanted to reference this control somewhere else in your application, you would need to call it by it's name.

The TextMode="SingleLine" section is used to determine what kind of textbox it will be. In the example above, I have decided to make it a single line textbox. Think of the single line text as the same one generated by the following HTML Tag: <input type="text" name="something">. Other options for this property include "Password" and "Multiline." Password generates a password field and multiline generates a textarea box.

The Columns="25" sets the width of the control in characters.

Possible Properties

AutoPostBack - When set to True, the form is automatically posted back when a change has been made to it. (Example: AutoPostBack="True")

Columns - Sets the width of the textbox in characters. (Example: Columns="25")

MaxLength - The max amount of characters which can be entered into the textbox. (Example: Columns="25")

ReadOnly - When True, changes cannot be made to the textbox. (Example: ReadOnly="True")

Rows - Sets the number of rows for a multilined textbox. Note: You cannot have multilined password fields. This property would be invalid if used during that circumstance. (Example: Rows="10")

Text - Sets or retrieves the text value for the textbox. (See Examples in this article.)

TextMode - Sets the type of textbox which will be used. Possible values are: SingleLine, Password, Multilined. (Example: TextMode="SingleLine")

Wrap - Will multilined textboxes wrap text?

TextBox Methods

The TextBox only has one method associated with it. This method is the "OnTextChanged" method. When this method is set to a certain subroutine, that subroutine will be called if the text has been changed. Lets see an example.

Code: TextChanged.aspx

<script runat="server">
Sub Page_Load
' I don't want anything to be called when the page is loaded.
End Sub

Sub Text1_Changed(sender As Object, e As System.EventArgs)
Response.Write ("You changed the text!")
End Sub

</script>

<html>
<form runat="server">

<asp:TextBox id="mybox" AutoPostBack="True" TextMode="SingleLine" Columns="25" OnTextChanged="Text1_Changed" runat="server" />
</form>
</html>

In the above example, we created a very basic form with one textbox. For the textbox, we set autopostback to true. Because of this, the textbox will be posted after modifications have been made. When it is posted back, the subroutine, "Text1_Changed" will be called. (This is set in the OnTextChanged="Text1_Changed" method) Please take notice to the Sub Text1_Changed subroutine. It has "(sender As Object, e As System.EventArgs)" attached to it. You must have this attached to any subroutine handling form data. If you don't, you will receive an error. In future articles, I will go into more detail about form handling.

Setting the Text Value in Subroutine and outside of a Subroutine

Setting the Text value of a textbox while inside a subroutine is very easy. All you do is use the Text property. Lets see an example first.

Code: TextSet.aspx

<script runat="server">
Sub Page_Load
' When the page is loaded, set the text value of the control named "mytextbox" equal to "My name is Shane."
mytextbox.Text = "My name is Shane."

End Sub

</script>

<html>
<form runat="server">

<asp:TextBox id="mytextbox" TextMode="SingleLine" Columns="25" runat="server" />
</form>
</html>

In the example above, we used the Page_Load subroutine to set some text into our textbox control entitled "mytextbox." It is very easy!

Ok. What if you didn't want to set the text value in a subroutine? Or, What if you wanted to set a default text value? You would do something like this:

Code: TextDefault.aspx

<script runat="server">
Sub Page_Load
' Nothing up here

End Sub

</script>

<html>
<form runat="server">
<asp:TextBox id="mytextbox" TextMode="SingleLine" Columns="25" Text="Default Text here!!" runat="server" />
</form>
</html>

All we did in the above example was add the Text attribute to the textbox control. That's it!

Important Notes:

- Always surround your textbox with the "<form runat="server">" tag and the closing "</form>" tag. If you don't, you will receive an error.

- There is no such thing as a multi-lined password box or a single-lined textbox with multiple rows.

In conclusion, you learned how to successfully add a textbox control to your ASP.NET page, add different properties to change to type, and set the text value. Not bad! In a future lesson, I will go into more depth about form processing.

Try this: Create an ASP.NET page where it displays a multi-lined textbox with a width of 25 and has 30 rows, but cannot be modified! If you want me to see what you got, Contact me!

Until then, have a good one!


Other 3 submission(s) by this author

 


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this article (in the Beginner category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments


 There are no comments on this submission.
 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular article, please click here instead.)
 

To post feedback, first please login.