Movatterモバイル変換

[0]ホーム
URL:

| PDF
Edit
Suggest a Feature

    Getting Started with Blazor NumericTextBox Component

    4 Nov 20256 minutes to read

    This section explains how to add theBlazor Numeric TextBox component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.

    To get started quickly with the Blazor Numeric TextBox, check on the following video orGitHub sample.

    Prerequisites

    Create a new Blazor App in Visual Studio

    Create aBlazor WebAssembly App using Visual Studio viaMicrosoft templates or theSyncfusion® Blazor Extension.

    Install Syncfusion® Blazor Inputs and Themes NuGet in the App

    To add the Blazor NumericTextBox component, open the 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 Package Manager commands shown below.

    Install-PackageSyncfusion.Blazor.Inputs-Version32.1.19Install-PackageSyncfusion.Blazor.Themes-Version32.1.19

    NOTE

    Syncfusion Blazor components are available onnuget.org. Refer to theNuGet packages topic for the list of available packages and 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 terminal commands (Ctrl+`).

    dotnetnewblazorwasm-oBlazorAppcdBlazorApp

    Install Syncfusion Blazor Inputs and Themes NuGet in the App

    • PressCtrl+` to open the integrated terminal in Visual Studio Code.
    • Ensure you are in the project root directory where the .csproj file is located.
    • Run the following commands to installSyncfusion.Blazor.Inputs andSyncfusion.Blazor.Themes and restore dependencies.
    dotnetaddpackageSyncfusion.Blazor.Inputs-v32.1.19dotnetaddpackageSyncfusion.Blazor.Themes-v32.1.19dotnetrestore

    NOTE

    Syncfusion Blazor components are available onnuget.org. Refer to theNuGet packages topic for the list of available packages and component details.

    Register Syncfusion® Blazor Service

    Open~/_Imports.razor file and import theSyncfusion.Blazor andSyncfusion.Blazor.Inputs namespaces.

    @using Syncfusion.Blazor@using Syncfusion.Blazor.Inputs

    Now, register the Syncfusion® Blazor Service in the~/Program.cs file of your 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 can be accessed from NuGet throughStatic Web Assets. Include the stylesheet and script references in the<head> section of the~/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 NumericTextBox component

    Add the Syncfusion® Blazor NumericTextBox component in the~/Pages/Index.razor.

    <SfNumericTextBoxTValue="int?"Value=10></SfNumericTextBox>
    • PressCtrl+F5 (Windows) or⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor NumericTextBox component in your default web browser.
    Blazor NumericTextBox Component

    Range validation

    Set the minimum and maximum range of values in the NumericTextBox using theMin andMax properties, so the numeric value should be in the min and max range.

    <SfNumericTextBoxTValue="int?"Value=5Max=100Min=1Step=5></SfNumericTextBox>
    Inputnumber Blazor with Range Value

    Formatting the value

    Set the display format of the NumericTextBox component using theFormat property. The value is displayed in the specified format when the component is not focused.

    <SfNumericTextBoxTValue="int?"Value=10Format="c2"></SfNumericTextBox>
    Blazor NumericTextBox with Formatting Value

    Precision of numbers

    Restrict the number of decimals to be entered in the NumericTextBox by using theDecimals andValidateDecimalOnType properties. So, you cannot enter the number whose precision is greater than the mentioned decimals.

    IfValidateDecimalOnType is false, number of decimals will not be restricted. Else, number of decimals will be restricted while typing in the NumericTextBox.

    <SfNumericTextBoxTValue="double?"Value=10ValidateDecimalOnType=trueDecimals=3Format="n3"Placeholder="ValidateDecimalOnType enabled"FloatLabelType="@FloatLabelType.Auto"></SfNumericTextBox><SfNumericTextBoxTValue="double?"Value=10Decimals=3Format="n3"Placeholder="ValidateDecimalOnType disabled"FloatLabelType="@FloatLabelType.Auto"></SfNumericTextBox>
    Blazor NumericTextBox with Precision Value

    See also

    Help us improve this page

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information
    Please provide additional information
    ×
    [8]ページ先頭
    ©2009-2025 Movatter.jp