ASP.NET Core Blazor [Preview]
Search results

Getting Started

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

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.EJ2.RazorComponents.Inputs packages.

@using Syncfusion.EJ2.RazorComponents
@using Syncfusion.EJ2.RazorComponents.Inputs

Adding MaskedTextBox component to the application

Now, add the Syncfusion Essential JS 2 MaskedTextBox component in any web page razor in the Pages folder. For example, the MaskedTextBox component is added in the ~/Pages/Index.razor page.

<EjsMaskedTextBox id='mask1'></EjsMaskedTextBox>

Set the mask

You can set the mask to the MaskedTextBox to validate the user input by using the mask property.

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

<EjsMaskedTextBox id='mask1' mask='000-000-0000'></EjsMaskedTextBox>

Output be like the below.

MaskedTextBox Sample