1. Computing
About.com
Delphi
Understanding the TextBox ASP.NET control
Taking a quick look at the TextBox ASP.NET web server control - the only control designed for user input. TextBox has several faces: single-line text entry, password entry or multi-line text entry.
Win prizes by sharing code!
Do you have some Delphi code you want to share? Are you interested in winning a prize for your work?
Delphi Programming Quickies Contest
Join the Discussion
"Post your views and comments to this chapter of the free Asp.Net Delphi Programming Course"
Discuss!
Related Resources
• A Beginner's Guide to Asp.Net Programming for Delphi developers.TOC
Elsewhere on the Web
• About HTML / Web design
• About JavaScript

Welcome to the fourteenth chapter of the FREE online programming course:
A Beginner's Guide to Asp.Net Programming for Delphi developers.
Taking a quick look at the TextBox ASP.NET web server control - the only control designed for user input. TextBox has several faces: single-line text entry, password entry or multi-line text entry.

In the Introduction to Web Server Controls chapter, we've divided ASP.NET Web Server controls into several categories. Our discussion on ASP.NET web server controls started with an overview of postback raising controls: buttons.

We continue our exploration of the System.Web.UI.WebControls namespace with the only control designed for user input: TextBox.

Enabling text entry on a Web Form page
The TextBox Web server control provides a way for users to type information into a Web Forms page, including text, numbers, and dates.
This "all mighty" control replaces the distinct Text and Password type <input> controls as well as the TextArea control used by HTML.
The properties of the TextBox control enable you to configure the control to perform functions equal to those of HTML elements it replaces.

When you drop a TextBox control on a Web Form, the generated HTML in the "aspx" view will look like:

<asp:textbox id=TextBox1
  runat="server">
</asp:textbox>

By default, the TextBox control renders as a single-line entry box.

The following properties determine the actual rendering and functionality of the TextBox control:

  • Text is used to get or set (on the server) the text displayed/entered in the control.
  • TextMode is a TextBoxMode value property. This enumeration represents the different display options for the TextBox control. Setting TextMode to TextBoxMode.SingleLine displays the TextBox as a single row (default). TextBoxMode.Password is similar to SingleLine, except that the control displays a special character in place of any entered text. TextBoxMode.MultiLine transforms the TextBox control into a TMemo like control.
    When TextMode is set to TextBoxMode.MultiLine, the Rows property determines the actual height (in characters) of the control. The Height property determines the height in pixels. Note that, if the Height property is specified, the Rows property is ignored. What's more, the Wrap property determines whether the text entered in the control will automatically wrap. Finally, scroll bars will appear if the text entered exceeds the physical size of the TextBox.
  • MaxLenght specifies the maximum number of characters the user can enter into the control.
  • ReadOnly determines whether the data in the TextBox can be edited.
  • AutoPostback specifies whether the Web Form is automatically submitted (as if any of the button-like controls were clicked) when the content of the control is changed. Note that the control will "fire" a postback (if AutoPostback is set to True) only when the user leaves the control, NOT while editing the content (typing into the control).

AutoPostback from TextBox (or other Input Controls)
In the previous chapter we stated that when any of the Button, ImageButton or LinkButton controls are clicked, the result is that the Web Form gets posted back to the server.
Another way of passing control and causing a postback is setting the AutoPostback property of an input control to True. Note that not all the web control support the AutoPostback property. ASP.NET attaches a client-side JavaScript function to the onChange() event of a resulting HTML control, for controls with AutoPostback set to true.

The TextChanged event
The most important event for the TextBox control is TextChanged. When a Web Form is submitted, and the data in the TextBox control has changed, the TextChanged event will be fired and processed on the server. ASP.NET uses the ViewState to determine whether the data in the TextBox has changed from the last postback.
Note that the Web Form can be "submitted" either if the user has clicked any of the button-like web controls, or the AutoPostback property of the TextBox has been set to true, the content of the control has changed and the user has left the TextBox (the input focus shifted away from the control to another).

We will devote an entire chapter to the ViewState and event processing later in this Course.

"Login" example
Let's now put the TextBox control in action. Having a Web Form opened in the "design" view, drop two TextBox controls on it. Leave the default value of the TextMode (SingleLine) for the first TextBox, set the TextBoxMode.MultiLine for the TextMode property of the second TextBox. Also set the Rows property to 5, for example. Set the ID property of the first TextBox to "txtName", assign "txtMemo" for the second TextBox's ID property. Set the AutoPostback property for the "txtName" TextBox to true.

Assign the following code for the TextChanged event for the first TextBox (txtName):

procedure TWebForm2.txtName_TextChanged(
   sender: System.Object; 
   e: System.EventArgs);
begin
  txtMemo.Text := txtMemo.Text + 
                  Environment.NewLine + 
                  txtName.Text + ' - ' + 
                  DateTime.Now.ToString(); 
end;
TextBox ASP.NET Delphi simple example

Run the project, once the Web Form is displyed in the browser, add some text in the first text box. Hit the Tab key (to shift the focus from this TextBox to another control). Since the AutoPostback property is set to True, the page will be submitted to the server, the TextChanged event will be processed and the data entered in the txtName TextBox will be added to the txtMemo TextBox.
Note that, when the page is redisplayed, if you leave the content of the txtName TextBox and hit the Tab key, the postback will not occur.

Since we have just started exploring web control, we are not yet "qualified" for more complex examples. Being the only data entry control, we'll be using the TextBox in almost every of the exampled in the coming chapters.

Only numbers? Only Date values?
Suppose you want to allow only numbers to be entered in the TextBox. If you are familiar with Delphi's TEdit control for Win 32 development, you might be tempted to handle the OnKeyPress event of the control to disable non-numeric characters to be entered in the TextBox. Another component that comes to my mind is the TUpDown control (allows users to change the size of a numerical value by clicking on arrow buttons). Since the ASP.NET's TextBox does NOT provide a simple mechanism to handle the OnKeyPress - type of event (after all, this should be handled on the server), you would need to either add some JavaScript code manually, or reach for a third-party implementation.
To the next chapter: A Beginner's Guide to ASP.NET Programming for Delphi developers
That's it for today, in the next chapter we'll continue to explore Web Controls. Stay tuned!

If you need any kind of help at this point, please post to the Delphi Programming Forum where all the questions are answered and beginners are treated as experts.

A Beginner's Guide to ASP.NET Programming for Delphi developers: Next Chapter >>
>> Understanding Web Controls for Selecting Choices in Delphi ASP.NET Applications

©2013 About.com. All rights reserved.