Skip to main content
A newer version of this page is available. .
Tab

ASPxTextBox Class

A text box editor.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v19.2.dll

Declaration

public class ASPxTextBox :
    ASPxTextBoxBase

Remarks

The ASPxTextBox control allows end users to enter text in a single line.

ASPxTextBox_control.png

Create a Text Box

Design Time

The ASPxTextBox control is available on the DX.19.2: Common Controls toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize control settings, or paste the control markup in the page’s source code.

<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Text="Test text" Width="170px">
</dx:ASPxTextBox>

Run Time

using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
ASPxTextBox textBox = new ASPxTextBox();
textBox.ID = "ASPxTextBox1";
form1.Controls.Add(textBox);
textBox.Width = Unit.Pixel(170);
textBox.Text = "Test text";
}

Client-Side API

The ASPxTextBox‘s client-side API is implemented with JavaScript language and exposed by the ASPxClientTextBox object.

Availability

Available by default.

Class name

ASPxClientTextBox

Access name

ClientInstanceName

Events

ASPxTextBox.ClientSideEvents

Features

Data-Bound Mode

You can bind the text box control to data fields in a data source.

<dx:ASPxTextBox ID="ASPxTextBox" runat="server" Width="100%" Value='<%# Bind("Name") %>' >
</dx:ASPxTextBox>

More details | See demo

Native Render

Set the Native property to true to render the ASPxTextBox as a native HTML text input element. This reduces the amount of generated HTML code and improves the editor’s performance. In native mode, the text box’s appearance depends on how the client browser renders native HTML elements.

<dx:ASPxTextBox ID="TextBox" runat="server" Native="True" Width="166" Text="TextBox">
</dx:ASPxTextBox>

Native Mode | See demo

Null Prompt Text

The text box displays a prompt text if its value is null and if the editor is not focused. The prompt text disappears when the editor receives focus. Use the NullText property to define the prompt text.

<dx:ASPxTextBox ID="TextBox" runat="server" NullText="Enter your name..." Width="166" Text="TextBox">
</dx:ASPxTextBox>

See demo

Masked Input

The text box editor allows you to use masks (MaskSettings when you edit the editor. Use masks to specify format to enter a value to the editor.

<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="100%" Caption="Zip Code">
    <MaskSettings Mask="00000" ErrorText="Please input missing digits" />
</dx:ASPxTextBox>

Learn more | See demo

Display Format

Use the DisplayFormatString property to format display values in the text box.

<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Text="123456" DisplayFormatString="[ 00 - 00 - 00 ]" Width="100%" />

See demo

Built-in Validation

The text box allows you to validate its data both on the client and server side.

<dx:ASPxTextBox runat="server" Width="100%" ID="NameTextBox" OnValidation="NameTextBox_Validation">
    <ValidationSettings SetFocusOnError="True" 
      ErrorText="Name must be at least <br /> two characters long" Display="Dynamic" ErrorTextPosition="Bottom">
        <RequiredField IsRequired="True" ErrorText="Name is required" />
    </ValidationSettings>
    <ClientSideEvents Validation="onNameValidation" />
    <InvalidStyle BackColor="LightPink" />
</dx:ASPxTextBox>
function onNameValidation(s, e) {
    var name = e.value;
    if (name == null)
        return;
    if (name.length < 2)
        e.isValid = false;
}
protected void NameTextBox_Validation(object sender, ValidationEventArgs e) {
    if ((e.Value as string).Length < 2)
         e.IsValid = false;
}

Learn more | See demo

See Also