ASP.NET Core-indatakomponenter Blazor

2025-08-15

Anmärkning

Det här är inte den senaste versionen av den här artikeln. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i .NET och .NET Core Support Policy. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Viktigt!

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

I den här artikeln beskrivs Blazorinbyggda indatakomponenter.

Inmatningskomponenter

Ramverket Blazor tillhandahåller inbyggda indatakomponenter för att ta emot och verifiera användarindata. De inbyggda indatakomponenterna i följande tabell stöds i en EditForm med en EditContext.

Komponenterna i tabellen stöds också utanför ett formulär i Razor komponentmarkering. Indata verifieras när de ändras och när ett formulär skickas.

Indatakomponent	Renderas som...
InputCheckbox	`<input type="checkbox">`
InputDate<TValue>	`<input type="date">`
InputFile	`<input type="file">`
InputNumber<TValue>	`<input type="number">`
InputRadio<TValue>	`<input type="radio">`
InputRadioGroup<TValue>	Grupp med barn InputRadio<TValue>
InputSelect<TValue>	`<select>`
InputText	`<input>`
InputTextArea	`<textarea>`

Mer information om komponenten finns i InputFile ASP.NET Core-filuppladdningarBlazor.

Indatakomponent	Renderas som...
InputCheckbox	`<input type="checkbox">`
InputDate<TValue>	`<input type="date">`
InputNumber<TValue>	`<input type="number">`
InputSelect<TValue>	`<select>`
InputText	`<input>`
InputTextArea	`<textarea>`

Anmärkning

InputRadio<TValue> och InputRadioGroup<TValue> komponenter är tillgängliga i .NET 5 eller senare. Om du vill ha mer information väljer du en .NET 5- eller senare version av den här artikeln.

Alla indatakomponenter, inklusive EditForm, stöder godtyckliga attribut. Alla attribut som inte matchar en komponentparameter läggs till i det renderade HTML-elementet.

Indatakomponenter ger standardbeteende för validering när ett fält ändras:

För indatakomponenter i ett formulär med ett EditContextomfattar standardverifieringsbeteendet att uppdatera css-klassen för fält så att fältets tillstånd återspeglas som giltigt eller ogiltigt med valideringsformat för det underliggande HTML-elementet.
För kontroller som inte har en EditContextvisar standardverifieringen det giltiga eller ogiltiga tillståndet men ger inte valideringsformat till det underliggande HTML-elementet.

Vissa komponenter innehåller användbar parsningslogik. Till exempel hanterar InputDate<TValue> och InputNumber<TValue> ovärderbara värden på ett smidigt sätt genom att registrera dem som valideringsfel. Typer som kan acceptera null-värden stöder också nullbarhet för målfältet (till exempel int? för ett heltal som kan vara null).

Komponenten InputNumber<TValue> stöder type="range" attributet, som skapar ett intervallindata som stöder modellbindning och formulärverifiering, som vanligtvis återges som ett skjutreglage eller en uppringningskontroll i stället för en textruta:

<InputNumber @bind-Value="..." max="..." min="..." step="..." type="range" />

Mer information om komponenten finns i InputFile ASP.NET Core-filuppladdningarBlazor.

Exempelformulär

Följande Starship typ, som används i flera av den här artikelns exempel och exempel i andra artiklar i Formulär-noden, definierar en mängd olika egenskaper med datakommentarer:

Id krävs eftersom den kommenteras med RequiredAttribute. Id kräver ett värde på minst ett tecken men högst 16 tecken enligt StringLengthAttribute.
Description är valfritt eftersom det inte kommenteras med RequiredAttribute.
Classification måste anges.
Egenskapen MaximumAccommodation är som standard noll men kräver ett värde från ett till 100 000 per dess RangeAttribute.
IsValidatedDesign kräver att egenskapen har ett true värde som matchar ett valt tillstånd när egenskapen är bunden till en kryssruta i användargränssnittet (<input type="checkbox">).
ProductionDate är en DateTime och krävs.

Starship.cs:

using System.ComponentModel.DataAnnotations;

namespace BlazorSample;

public class Starship
{
    [Required]
    [StringLength(16, ErrorMessage = "Identifier too long (16 character limit).")]
    public string? Id { get; set; }

    public string? Description { get; set; }

    [Required]
    public string? Classification { get; set; }

    [Range(1, 100000, ErrorMessage = "Accommodation invalid (1-100000).")]
    public int MaximumAccommodation { get; set; }

    [Required]
    [Range(typeof(bool), "true", "true", ErrorMessage = "Approval required.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

using System.ComponentModel.DataAnnotations;

namespace BlazorSample;

public class Starship
{
    [Required]
    [StringLength(16, ErrorMessage = "Identifier too long (16 character limit).")]
    public string? Id { get; set; }

    public string? Description { get; set; }

    [Required]
    public string? Classification { get; set; }

    [Range(1, 100000, ErrorMessage = "Accommodation invalid (1-100000).")]
    public int MaximumAccommodation { get; set; }

    [Required]
    [Range(typeof(bool), "true", "true", ErrorMessage = "Approval required.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16, ErrorMessage = "Identifier too long (16 character limit).")]
    public string? Id { get; set; }

    public string? Description { get; set; }

    [Required]
    public string? Classification { get; set; }

    [Range(1, 100000, ErrorMessage = "Accommodation invalid (1-100000).")]
    public int MaximumAccommodation { get; set; }

    [Required]
    [Range(typeof(bool), "true", "true", 
        ErrorMessage = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16, ErrorMessage = "Identifier too long (16 character limit).")]
    public string? Id { get; set; }

    public string? Description { get; set; }

    [Required]
    public string? Classification { get; set; }

    [Range(1, 100000, ErrorMessage = "Accommodation invalid (1-100000).")]
    public int MaximumAccommodation { get; set; }

    [Required]
    [Range(typeof(bool), "true", "true", 
        ErrorMessage = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16, ErrorMessage = "Identifier too long (16 character limit).")]
    public string Id { get; set; }

    public string Description { get; set; }

    [Required]
    public string Classification { get; set; }

    [Range(1, 100000, ErrorMessage = "Accommodation invalid (1-100000).")]
    public int MaximumAccommodation { get; set; }

    [Required]
    [Range(typeof(bool), "true", "true", 
        ErrorMessage = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16, ErrorMessage = "Identifier too long (16 character limit).")]
    public string Id { get; set; }

    public string Description { get; set; }

    [Required]
    public string Classification { get; set; }

    [Range(1, 100000, ErrorMessage = "Accommodation invalid (1-100000).")]
    public int MaximumAccommodation { get; set; }

    [Required]
    [Range(typeof(bool), "true", "true", 
        ErrorMessage = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

Följande formulär accepterar och validerar användarindata med hjälp av:

Egenskaperna och valideringen som definierats i föregående Starship modell.
Flera av de inbyggda indatakomponenterna från Blazor.

När modellegenskapen för fartygets klassificering (Classification) har angetts kontrolleras alternativet som matchar modellen. Till exempel checked="@(Model!.Classification == "Exploration")" för klassificering av ett utforskningsfartyg. Anledningen till att uttryckligen ange det markerade alternativet är att värdet för ett <select> element bara finns i webbläsaren. Om formuläret återges på servern efter att det har skickats åsidosätts alla tillstånd från klienten med tillstånd från servern, vilket vanligtvis inte markerar ett alternativ som markerat. Genom att ange det markerade alternativet från modellegenskapen återspeglar klassificeringen alltid modellens tillstånd. Detta bevarar klassificeringsvalet mellan formuläröverföringar som resulterar i att formuläret återställs på servern. I situationer där formuläret inte återskapas på servern, till exempel när återgivningsläget för interaktiv server tillämpas direkt på komponenten, är explicit tilldelning av det markerade alternativet från modellen inte nödvändigt eftersom Blazor bevarar tillståndet för elementet <select> på klienten.

Starship3.razor:

@page "/starship-3"
@inject ILogger<Starship3> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="Model" OnValidSubmit="Submit" FormName="Starship3">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <label>
            Description (optional): 
            <InputTextArea @bind-Value="Model!.Description" />
        </label>
    </div>
    <div>
        <label>
            Primary Classification: 
            <InputSelect @bind-Value="Model!.Classification">
                <option value="">
                    Select classification ...
                </option>
                <option checked="@(Model!.Classification == "Exploration")" 
                    value="Exploration">
                    Exploration
                </option>
                <option checked="@(Model!.Classification == "Diplomacy")" 
                    value="Diplomacy">
                    Diplomacy
                </option>
                <option checked="@(Model!.Classification == "Defense")" 
                    value="Defense">
                    Defense
                </option>
            </InputSelect>
        </label>
    </div>
    <div>
        <label>
            Maximum Accommodation: 
            <InputNumber @bind-Value="Model!.MaximumAccommodation" />
        </label>
    </div>
    <div>
        <label>
            Engineering Approval: 
            <InputCheckbox @bind-Value="Model!.IsValidatedDesign" />
        </label>
    </div>
    <div>
        <label>
            Production Date: 
            <InputDate @bind-Value="Model!.ProductionDate" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() =>
        Model ??= new() { ProductionDate = DateTime.UtcNow };

    private void Submit()
    {
        Logger.LogInformation("Id = {Id} Description = {Description} " +
            "Classification = {Classification} MaximumAccommodation = " +
            "{MaximumAccommodation} IsValidatedDesign = " +
            "{IsValidatedDesign} ProductionDate = {ProductionDate}",
            Model?.Id, Model?.Description, Model?.Classification,
            Model?.MaximumAccommodation, Model?.IsValidatedDesign,
            Model?.ProductionDate);
    }
}

@page "/starship-3"
@inject ILogger<Starship3> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="Model" OnValidSubmit="Submit" FormName="Starship3">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <label>
            Description (optional): 
            <InputTextArea @bind-Value="Model!.Description" />
        </label>
    </div>
    <div>
        <label>
            Primary Classification: 
            <InputSelect @bind-Value="Model!.Classification">
                <option value="">
                    Select classification ...
                </option>
                <option checked="@(Model!.Classification == "Exploration")" 
                    value="Exploration">
                    Exploration
                </option>
                <option checked="@(Model!.Classification == "Diplomacy")" 
                    value="Diplomacy">
                    Diplomacy
                </option>
                <option checked="@(Model!.Classification == "Defense")" 
                    value="Defense">
                    Defense
                </option>
            </InputSelect>
        </label>
    </div>
    <div>
        <label>
            Maximum Accommodation: 
            <InputNumber @bind-Value="Model!.MaximumAccommodation" />
        </label>
    </div>
    <div>
        <label>
            Engineering Approval: 
            <InputCheckbox @bind-Value="Model!.IsValidatedDesign" />
        </label>
    </div>
    <div>
        <label>
            Production Date: 
            <InputDate @bind-Value="Model!.ProductionDate" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() =>
        Model ??= new() { ProductionDate = DateTime.UtcNow };

    private void Submit()
    {
        Logger.LogInformation("Id = {Id} Description = {Description} " +
            "Classification = {Classification} MaximumAccommodation = " +
            "{MaximumAccommodation} IsValidatedDesign = " +
            "{IsValidatedDesign} ProductionDate = {ProductionDate}",
            Model?.Id, Model?.Description, Model?.Classification,
            Model?.MaximumAccommodation, Model?.IsValidatedDesign,
            Model?.ProductionDate);
    }
}

@page "/starship-3"
@inject ILogger<Starship3> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="Model" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Identifier:
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="Model!.Description" />
        </label>
    </div>
    <div>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="Model!.Classification">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </div>
    <div>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="Model!.MaximumAccommodation" />
        </label>
    </div>
    <div>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="Model!.IsValidatedDesign" />
        </label>
    </div>
    <div>
        <label>
            Production Date:
            <InputDate @bind-Value="Model!.ProductionDate" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    private Starship? Model { get; set; }

    protected override void OnInitialized() =>
        Model ??= new() { ProductionDate = DateTime.UtcNow };

    private void Submit()
    {
        Logger.LogInformation("Id = {Id} Description = {Description} " +
            "Classification = {Classification} MaximumAccommodation = " +
            "{MaximumAccommodation} IsValidatedDesign = " +
            "{IsValidatedDesign} ProductionDate = {ProductionDate}", 
            Model?.Id, Model?.Description, Model?.Classification, 
            Model?.MaximumAccommodation, Model?.IsValidatedDesign, 
            Model?.ProductionDate);
    }
}

I det föregående exemplet skapas en EditForm baserad på den tilldelade EditContext-instansen (Starship) och hanterar ett giltigt formulär. I nästa exempel visas hur du tilldelar ett EditContext formulär och validerar när formuläret skickas.

I följande exempel:

En förkortad version av det tidigare Starfleet Starship Database formuläret (Starship3 komponenten) används som endast accepterar ett värde för rymdskeppets ID. De andra Starship egenskaperna får giltiga standardvärden när en instans av Starship typen skapas.
Metoden Submit körs när Submit knappen är markerad.
Formuläret verifieras genom att anropa EditContext.Validate i Submit -metoden.
Loggning körs beroende på valideringsresultatet.

Starship4.razor:

@page "/starship-4"
@inject ILogger<Starship4> Logger

<EditForm EditContext="editContext" OnSubmit="Submit" FormName="Starship4">
    <DataAnnotationsValidator />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    private EditContext? editContext;

    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized()
    {
        Model ??=
            new()
                {
                    Id = "NCC-1701",
                    Classification = "Exploration",
                    MaximumAccommodation = 150,
                    IsValidatedDesign = true,
                    ProductionDate = new DateTime(2245, 4, 11)
                };
        editContext = new(Model);
    }

    private void Submit()
    {
        if (editContext != null && editContext.Validate())
        {
            Logger.LogInformation("Submit: Form is valid");
        }
        else
        {
            Logger.LogInformation("Submit: Form is INVALID");
        }
    }
}

@page "/starship-4"
@inject ILogger<Starship4> Logger

<EditForm EditContext="editContext" OnSubmit="Submit" FormName="Starship4">
    <DataAnnotationsValidator />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    private EditContext? editContext;

    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized()
    {
        Model ??=
            new()
                {
                    Id = "NCC-1701",
                    Classification = "Exploration",
                    MaximumAccommodation = 150,
                    IsValidatedDesign = true,
                    ProductionDate = new DateTime(2245, 4, 11)
                };
        editContext = new(Model);
    }

    private void Submit()
    {
        if (editContext != null && editContext.Validate())
        {
            Logger.LogInformation("Submit: Form is valid");
        }
        else
        {
            Logger.LogInformation("Submit: Form is INVALID");
        }
    }
}

@page "/starship-4"
@inject ILogger<Starship4> Logger

<EditForm EditContext="editContext" OnSubmit="Submit">
    <DataAnnotationsValidator />
    <div>
        <label>
            Identifier:
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    private EditContext? editContext;

    private Starship Model { get; set; }

    protected override void OnInitialized()
    {
        Model ??= 
            new()
            {
                Id = "NCC-1701",
                Classification = "Exploration",
                MaximumAccommodation = 150,
                IsValidatedDesign = true,
                ProductionDate = new DateTime(2245, 4, 11)
            };
        editContext = new(Model);
    }

    private async Task Submit()
    {
        if (editContext != null && editContext.Validate())
        {
            Logger.LogInformation("Submit called: Form is valid");

            // await ...
        }
        else
        {
            Logger.LogInformation("Submit called: Form is INVALID");
        }
    }
}

Anmärkning

Det går EditContext att ändra objektet efter att det har tilldelats.

Flera alternativval med komponenten `InputSelect`

Bindning stöder multiple alternativval med komponenten InputSelect<TValue> . Händelsen @onchange innehåller en matris med de valda alternativen via händelseargument (ChangeEventArgs). Värdet måste vara bundet till en matristyp, vilket resulterar i att komponenten InputSelect<TValue> automatiskt lägger multiple till attributet i elementet <select> när komponenten återges.

I följande exempel måste användaren välja minst två rymdskeppsklassificeringar men högst tre klassificeringar.

Starship5.razor:

@page "/starship-5"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship5> Logger

<h1>Bind Multiple <code>InputSelect</code> Example</h1>

<EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="Starship5">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Select classifications (Minimum: 2, Maximum: 3):
            <InputSelect @bind-Value="Model!.SelectedClassification">
                <option value="@Classification.Exploration">Exploration</option>
                <option value="@Classification.Diplomacy">Diplomacy</option>
                <option value="@Classification.Defense">Defense</option>
                <option value="@Classification.Research">Research</option>
            </InputSelect>
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@if (Model?.SelectedClassification?.Length > 0)
{
    <div>@string.Join(", ", Model.SelectedClassification)</div>
}

@code {
    private EditContext? editContext;

    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized()
    {
        Model = new();
        editContext = new(Model);
    }

    private void Submit() => Logger.LogInformation("Submit: Processing form");

    private class Starship
    {
        [Required]
        [MinLength(2, ErrorMessage = "Select at least two classifications.")]
        [MaxLength(3, ErrorMessage = "Select no more than three classifications.")]
        public Classification[]? SelectedClassification { get; set; } =
            [ Classification.None ];
    }

    private enum Classification { None, Exploration, Diplomacy, Defense, Research }
}

@page "/starship-5"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship5> Logger

<h1>Bind Multiple <code>InputSelect</code> Example</h1>

<EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="Starship5">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Select classifications (Minimum: 2, Maximum: 3):
            <InputSelect @bind-Value="Model!.SelectedClassification">
                <option value="@Classification.Exploration">Exploration</option>
                <option value="@Classification.Diplomacy">Diplomacy</option>
                <option value="@Classification.Defense">Defense</option>
                <option value="@Classification.Research">Research</option>
            </InputSelect>
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@if (Model?.SelectedClassification?.Length > 0)
{
    <div>@string.Join(", ", Model.SelectedClassification)</div>
}

@code {
    private EditContext? editContext;

    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized()
    {
        Model = new();
        editContext = new(Model);
    }

    private void Submit() => Logger.LogInformation("Submit: Processing form");

    private class Starship
    {
        [Required]
        [MinLength(2, ErrorMessage = "Select at least two classifications.")]
        [MaxLength(3, ErrorMessage = "Select no more than three classifications.")]
        public Classification[]? SelectedClassification { get; set; } =
            [ Classification.None ];
    }

    private enum Classification { None, Exploration, Diplomacy, Defense, Research }
}

@page "/starship-5"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship5> Logger

<h1>Bind Multiple <code>InputSelect</code> Example</h1>

<EditForm EditContext="editContext" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Select classifications (Minimum: 2, Maximum: 3):
            <InputSelect @bind-Value="Model!.SelectedClassification">
                <option value="@Classification.Exploration">Exploration</option>
                <option value="@Classification.Diplomacy">Diplomacy</option>
                <option value="@Classification.Defense">Defense</option>
                <option value="@Classification.Research">Research</option>
            </InputSelect>
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@if (Model?.SelectedClassification?.Length > 0)
{
    <div>@string.Join(", ", Model.SelectedClassification)</div>
}

@code {
    private EditContext? editContext;

    private Starship? Model { get; set; }

    protected override void OnInitialized()
    {
        Model ??= new();
        editContext = new(Model);
    }

    private void Submit()
    {
        Logger.LogInformation("Submit called: Processing the form");
    }

    private class Starship
    {
        [Required]
        [MinLength(2, ErrorMessage = "Select at least two classifications.")]
        [MaxLength(3, ErrorMessage = "Select no more than three classifications.")]
        public Classification[]? SelectedClassification { get; set; } =
            new[] { Classification.None };
    }

    private enum Classification { None, Exploration, Diplomacy, Defense, Research }
}

Information om hur tomma strängar och null värden hanteras i databindning finns i avsnittet Bindningsalternativ InputSelect till C#-objektvärdennull.

Bindningsalternativ `InputSelect` till C#-objektvärden `null`

Information om hur tomma strängar och null värden hanteras i databindning finns i ASP.NET Core-databindningBlazor.

Stöd för visningsnamn

Flera inbyggda komponenter stöder visningsnamn med parametern InputBase<TValue>.DisplayName .

Starfleet Starship Database I formuläret (Starship3 komponenten) i avsnittet Exempelformulär anger produktionsdatumet för ett nytt rymdskepp inte något visningsnamn:

<label>
    Production Date:
    <InputDate @bind-Value="Model!.ProductionDate" />
</label>

Om fältet innehåller ett ogiltigt datum när formuläret skickas, visas inte ett vänligt namn i felmeddelandet. Fältnamnet "ProductionDate" har inget blanksteg mellan "Production" och "Date" när det visas i valideringssammanfattningen:

Fältet ProductionDate måste vara ett datum.

Ange egenskapen DisplayName till ett vänligt namn med ett blanksteg mellan orden "Production" och "Date":

<label>
    Production Date:
    <InputDate @bind-Value="Model!.ProductionDate" 
        DisplayName="Production Date" />
</label>

Valideringssammanfattningen visar det egna namnet när fältets värde är ogiltigt:

Fältet Produktionsdatum måste vara ett datum.

Stöd för mall för felmeddelanden

InputDate<TValue> och InputNumber<TValue> stöd för mallar för felmeddelanden:

I formuläret Starfleet Starship Database (Starship3 komponenten) i avsnittet Exempelformulär med ett eget visningsnamn tilldelat skapar Production Date fältet ett felmeddelande med hjälp av följande standardmall för felmeddelande:

The {0} field must be a date.

Platshållarens position {0} är den plats där värdet för DisplayName egenskapen visas när felet visas för användaren.

<label>
    Production Date:
    <InputDate @bind-Value="Model!.ProductionDate" 
        DisplayName="Production Date" />
</label>

Fältet Produktionsdatum måste vara ett datum.

Tilldela en anpassad mall för att ParsingErrorMessage tillhandahålla ett anpassat meddelande:

<label>
    Production Date:
    <InputDate @bind-Value="Model!.ProductionDate" 
        DisplayName="Production Date" 
        ParsingErrorMessage="The {0} field has an incorrect date value." />
</label>

Fältet Produktionsdatum har ett felaktigt datumvärde.

I formuläret Starfleet Starship Database (Starship3 komponenten) i avsnittet Exempelformulär används en standardmall för felmeddelande:

The {0} field must be a date.

Platshållarens position {0} är den plats där värdet för DisplayName egenskapen visas när felet visas för användaren.

<label>
    Production Date:
    <InputDate @bind-Value="Model!.ProductionDate" />
</label>

Fältet ProductionDate måste vara ett datum.

Tilldela en anpassad mall för att ParsingErrorMessage tillhandahålla ett anpassat meddelande:

<label>
    Production Date:
    <InputDate @bind-Value="Model!.ProductionDate" 
        ParsingErrorMessage="The {0} field has an incorrect date value." />
</label>

Fältet ProductionDate har ett felaktigt datumvärde.

`InputHidden` komponent för att hantera dolda indatafält i formulär

Komponenten InputHidden innehåller ett dolt indatafält för lagring av strängvärden.

I följande exempel skapas ett dolt indatafält för formulärets Parameter egenskap. När formuläret skickas visas värdet för det dolda fältet:

<EditForm Model="Parameter" OnValidSubmit="Submit" FormName="InputHidden Example">
    <InputHidden id="hidden" @bind-Value="Parameter" />
    <button type="submit">Submit</button>
</EditForm>

@if (submitted)
{
    <p>Hello @Parameter!</p>
}

@code {
    private bool submitted;

    [SupplyParameterFromForm] 
    public string Parameter { get; set; } = "stranger";

    private void Submit() => submitted = true;
}

Feedback

Var den här sidan till hjälp?

Dela via

ASP.NET Core-indatakomponenter Blazor

Inmatningskomponenter

Exempelformulär

Flera alternativval med komponenten InputSelect

Bindningsalternativ InputSelect till C#-objektvärden null

Stöd för visningsnamn

Stöd för mall för felmeddelanden

InputHidden komponent för att hantera dolda indatafält i formulär

Feedback

Ytterligare resurser

Flera alternativval med komponenten `InputSelect`

Bindningsalternativ `InputSelect` till C#-objektvärden `null`

`InputHidden` komponent för att hantera dolda indatafält i formulär