Getting Started with Blazor Input Mask Component
4 Nov 20255 minutes to read
This section explains how to include theBlazor MaskedTextBox component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
To get started quickly with the Blazor MaskedTextBox component, watch this video or explore the correspondingGitHub sample.
Prerequisites
Create a new Blazor App in Visual Studio
CBlazor WebAssembly App using Visual Studio viaMicrosoft templates or theSyncfusion® Blazor Extension.
Install Syncfusion® Blazor Inputs and Themes NuGet in the App
To add theBlazor MaskedTextBox component to the app, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and installSyncfusion.Blazor.Inputs andSyncfusion.Blazor.Themes. Alternatively, use the following Package Manager commands.
Install-PackageSyncfusion.Blazor.Inputs-Version32.1.19Install-PackageSyncfusion.Blazor.Themes-Version32.1.19NOTE
Syncfusion® Blazor components are available innuget.org. Refer toNuGet packages topic for available NuGet packages list with component details.
Prerequisites
Create a new Blazor App in Visual Studio Code
Create aBlazor WebAssembly App using Visual Studio Code viaMicrosoft templates or theSyncfusion® Blazor Extension.
Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`).
dotnetnewblazorwasm-oBlazorAppcdBlazorAppInstall Syncfusion® Blazor Inputs and Themes NuGet in the App
- PressCtrl+` to open the integrated terminal in Visual Studio Code.
- Ensure the terminal is in the project root directory where the
.csprojfile is located. - Run the following commands to install theSyncfusion.Blazor.Inputs andSyncfusion.Blazor.Themes NuGet packages and restore dependencies.
dotnetaddpackageSyncfusion.Blazor.Inputs-v32.1.19dotnetaddpackageSyncfusion.Blazor.Themes-v32.1.19dotnetrestoreNOTE
Syncfusion® Blazor components are available innuget.org. Refer toNuGet packages topic for available NuGet packages list with component details.
Register Syncfusion® Blazor Service
Open~/_Imports.razor and import theSyncfusion.Blazor andSyncfusion.Blazor.Inputs namespaces.
@using Syncfusion.Blazor@using Syncfusion.Blazor.InputsNow register the Syncfusion® Blazor service in the~/Program.cs file of the Blazor WebAssembly app.
usingMicrosoft.AspNetCore.Components.Web;usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting;usingSyncfusion.Blazor;varbuilder=WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");builder.Services.AddScoped(sp=>newHttpClient{BaseAddress=newUri(builder.HostEnvironment.BaseAddress)});builder.Services.AddSyncfusionBlazor();awaitbuilder.Build().RunAsync();....Add stylesheet and script resources
The theme stylesheet and script are provided via NuGet throughStatic Web Assets. Include the stylesheet and script references in the<head> section of~/index.html.
<head> ....<linkhref="_content/Syncfusion.Blazor.Themes/bootstrap5.css"rel="stylesheet"/><scriptsrc="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"type="text/javascript"></script></head>NOTE
Check out theBlazor Themes topic to discover various methods (Static Web Assets,CDN, andCRG) for referencing themes in your Blazor application. Also, check out theAdding Script Reference topic to learn different approaches for adding script references in your Blazor application.
Add Blazor MaskedTextBox component
Add the Syncfusion® Blazor MaskedTextBox component to~/Pages/Index.razor.
<SfMaskedTextBox></SfMaskedTextBox>- PressCtrl+F5 (Windows) or⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor MaskedTextBox component in the default web browser.
Set the mask
Set a mask on the MaskedTextBox to validate user input by using theMask property.
The following example demonstrates the mask element0, which allows any single digit from0 to9.
<SfMaskedTextBoxMask='000-000-0000'></SfMaskedTextBox>
See also
[8]ページ先頭