Getting Started

17 Feb 20221 minute to read

This section briefly explains about how to include a simple MaskedTextBox in your ASP.NET MVC application. You can refer ASP.NET MVC Getting Started documentation page for introduction part part of the system requirements and configure the common specifications.

Initialize MaskedTextBox control to the Application

MaskedTextBox control can be rendered by using the EJS().MaskedTextBox() tag helper in ASP.NET MVC application. Add the below simple code to your index.cshtml page which is available within the Views/Home folder, to initialize the MaskedTextBox.

The following example shows a basic MaskedTextBox control.

@Html.EJS().MaskedTextBox("mask1").Placeholder("MaskedTextBox").Render()
public ActionResult Demo()
{
    return View();
}

Running the above code will display the basic MaskedTextBox on the browser.

Set the mask

You can set the mask to the MaskedTextBox to validate the user input by using the mask property. To know more about
the usage of mask and configuration, refer to this link.

The following example demonstrates the usage of mask element 0 that allows any single digit from 0 to 9.

@Html.EJS().MaskedTextBox("mask1").Mask("000-000-0000").Placeholder("MaskedTextBox").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
public ActionResult Mask()
{
    return View();
}

Output be like the below.

MaskedTextBox Sample

See Also