Delen via

ASP.NET Kerninvoeronderdelen Blazor

Opmerking

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

Dit artikel beschrijft de ingebouwde invoeronderdelen van Blazor.

Invoeronderdelen

Het Blazor framework biedt ingebouwde invoeronderdelen voor het ontvangen en valideren van gebruikersinvoer. De ingebouwde invoercomponenten in de volgende tabel worden ondersteund in een EditForm met een EditContext.

De onderdelen in de tabel worden ook ondersteund buiten een formulier in Razor componentmarkeringen. Invoer wordt gevalideerd wanneer deze worden gewijzigd en wanneer een formulier wordt verzonden.

Invoeronderdeel Weergegeven als...
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> Groep van kindelementen InputRadio<TValue>
InputSelect<TValue> <select>
InputText <input>
InputTextArea <textarea>

Zie InputFilevoor meer informatie over het Blazor onderdeel.

Invoeronderdeel Weergegeven als...
InputCheckbox <input type="checkbox">
InputDate<TValue> <input type="date">
InputNumber<TValue> <input type="number">
InputSelect<TValue> <select>
InputText <input>
InputTextArea <textarea>

Opmerking

InputRadio<TValue> en InputRadioGroup<TValue> onderdelen zijn beschikbaar in .NET 5 of hoger. Selecteer een .NET 5 of nieuwere versie van dit artikel voor meer informatie.

Alle invoeronderdelen, waaronder EditForm, ondersteunen willekeurige kenmerken. Elk kenmerk dat niet overeenkomt met een onderdeelparameter, wordt toegevoegd aan het gerenderde HTML-element.

Invoeronderdelen bieden standaardgedrag voor het valideren wanneer een veld wordt gewijzigd:

  • Voor invoeronderdelen in een formulier met een EditContext, het standaardvalidatiegedrag omvat het bijwerken van de CSS-klasse van het veld om de status van het veld weer te geven als geldig of ongeldig met validatiestijl van het onderliggende HTML-element.
  • Voor besturingselementen die geen EditContext hebben, weerspiegelt de standaardvalidatie de geldige of ongeldige status, maar wordt geen validatiestijl toegepast op het onderliggende HTML-element.

Sommige onderdelen bevatten nuttige parseringslogica. Bijvoorbeeld, InputDate<TValue> en InputNumber<TValue> verwerken onparseerbare waarden op een elegante manier door deze te registreren als validatiefouten. Typen die nullwaarden kunnen accepteren, ondersteunen ook de nullbaarheid van het doelveld (bijvoorbeeld int? voor een nullable geheel getal).

Het InputNumber<TValue> onderdeel ondersteunt het type="range" kenmerk, waarmee een bereikinvoer wordt gemaakt die ondersteuning biedt voor modelbinding en formuliervalidatie, meestal weergegeven als schuifregelaar of kiesbesturingselement in plaats van een tekstvak:

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

Zie InputFilevoor meer informatie over het Blazor onderdeel.

Voorbeeldformulier

Het volgende Starship type, dat wordt gebruikt in verschillende voorbeelden in dit artikel en in andere artikelen over Formulier-knooppunten, definieert een diverse set eigenschappen met data-annotaties:

  • Id is vereist omdat deze is geannoteerd met de RequiredAttribute. Id vereist een waarde van ten minste één teken, maar niet meer dan 16 tekens met behulp van de StringLengthAttribute.
  • Description is optioneel omdat deze niet is geannoteerd met de RequiredAttribute.
  • Classification is vereist.
  • De MaximumAccommodation eigenschap is standaard ingesteld op nul, maar vereist een waarde van één tot 100.000 per waarde RangeAttribute.
  • IsValidatedDesign vereist dat de eigenschap een true waarde heeft die overeenkomt met een geselecteerde status wanneer de eigenschap is gebonden aan een selectievakje in de gebruikersinterface (<input type="checkbox">).
  • ProductionDate is een DateTime en vereist.

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; }
}

Het volgende formulier accepteert en valideert gebruikersinvoer met behulp van:

  • De eigenschappen en validatie die in het voorgaande Starship model zijn gedefinieerd.
  • BlazorVerschillende ingebouwde invoerelementen.

Wanneer de modeleigenschap voor de classificatie van het schip (Classification) is ingesteld, wordt de optie die overeenkomt met het model gecontroleerd. Bijvoorbeeld checked="@(Model!.Classification == "Exploration")" voor de classificatie van een verkenningsschip. De reden voor het expliciet instellen van de ingeschakelde optie is dat de waarde van een <select> element alleen aanwezig is in de browser. Als het formulier wordt weergegeven op de server nadat het is verzonden, wordt elke status van de client overschreven met de status van de server, die normaal gesproken geen optie als ingeschakeld markeert. Door de ingeschakelde optie van de modeleigenschap in te stellen, weerspiegelt de classificatie altijd de status van het model. Hierdoor blijft de classificatieselectie behouden voor formulierinzendingen die resulteren in de formulier-rerendering op de server. In situaties waarin het formulier niet wordt weergegeven op de server, zoals wanneer de weergavemodus Interactive Server rechtstreeks op het onderdeel wordt toegepast, is expliciete toewijzing van de ingeschakelde optie van het model niet nodig omdat Blazor de status voor het <select> element op de client behouden blijft.

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);
    }
}

EditForm In het voorgaande voorbeeld wordt een EditContext gemaakt op basis van het toegewezen Starship exemplaar (Model="...") en wordt een geldig formulier verwerkt. In het volgende voorbeeld ziet u hoe u een EditContext formulier toewijst en valideert wanneer het formulier wordt verzonden.

In het volgende voorbeeld:

  • Er wordt een verkorte versie van het eerdere Starfleet Starship Database formulier (Starship3 onderdeel) gebruikt die alleen een waarde accepteert voor de id van het sterschip. De andere Starship eigenschappen ontvangen geldige standaardwaarden wanneer een exemplaar van het Starship type wordt gemaakt.
  • De Submit methode wordt uitgevoerd wanneer de Submit knop is geselecteerd.
  • Het formulier wordt gevalideerd door EditContext.Validate aan te roepen in de Submit-methode.
  • Logboekregistratie wordt uitgevoerd, afhankelijk van het validatieresultaat.

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");
        }
    }
}

Opmerking

Het wijzigen van de EditContext instelling nadat deze is toegewezen, wordt niet ondersteund.

Selectie van meerdere opties met het InputSelect onderdeel

Binding ondersteunt multiple optieselectie met het InputSelect<TValue> onderdeel. De @onchange gebeurtenis biedt een matrix van de geselecteerde opties via gebeurtenisargumenten (ChangeEventArgs). De waarde moet worden gebonden aan een matrixtype, wat ertoe leidt dat het InputSelect<TValue> onderdeel automatisch het multiple kenmerk toevoegt aan het <select> element wanneer het onderdeel wordt weergegeven.

In het volgende voorbeeld moet de gebruiker ten minste twee classificaties voor sterschepen selecteren, maar niet meer dan drie classificaties.

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 }
}

Zie de sectie null voor informatie over hoe lege tekenreeksen en InputSelect waarden worden verwerkt in gegevensbinding.

Bindingsopties InputSelect voor C#-objectwaarden null

Zie nullvoor informatie over hoe lege tekenreeksen en Blazor waarden worden verwerkt in gegevensbinding.

Ondersteuning voor weergavenamen

Verschillende ingebouwde onderdelen ondersteunen weergavenamen met de InputBase<TValue>.DisplayName parameter.

In het Starfleet Starship Database formulier (Starship3 onderdeel) van de sectie Voorbeeldformulier geeft de productiedatum van een nieuw sterschip geen weergavenaam op:

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

Als het veld een ongeldige datum bevat wanneer het formulier wordt verzonden, wordt er in het foutbericht geen vriendelijke naam weergegeven. De veldnaam 'ProductionDate heeft geen spatie tussen 'Production' en 'Date' wanneer deze wordt weergegeven in de validatiesamenvatting:

Het veld ProductionDate moet een datum zijn.

Stel de DisplayName eigenschap in op een beschrijvende naam met een spatie tussen de woorden 'Production' en 'Date':

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

In het validatieoverzicht wordt de vriendelijke naam weergegeven wanneer de waarde van het veld ongeldig is.

Het veld Productiedatum moet een datum zijn.

Ondersteuning voor sjabloon voor foutberichten

InputDate<TValue> en InputNumber<TValue> ondersteunen sjablonen voor foutberichten.

In het Starfleet Starship Database formulier (Starship3 onderdeel) van de sectie Voorbeeldformulier waaraan een beschrijvende weergavenaam is toegewezen, produceert het Production Date veld een foutbericht met behulp van de volgende standaardsjabloon voor foutberichten:

The {0} field must be a date.

De positie van de {0} tijdelijke aanduiding is waar de waarde van de DisplayName eigenschap verschijnt wanneer de fout aan de gebruiker wordt getoond.

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

Het veld Productiedatum moet een datum zijn.

Wijs een aangepaste sjabloon ParsingErrorMessage toe om een aangepast bericht op te geven.

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

Het veld Productiedatum heeft een onjuiste datumwaarde.

In het Starfleet Starship Database formulier (Starship3 onderdeel) van de sectie Voorbeeldformulier wordt een standaardsjabloon voor foutberichten gebruikt:

The {0} field must be a date.

De positie van de {0} tijdelijke aanduiding is waar de waarde van de DisplayName eigenschap verschijnt wanneer de fout aan de gebruiker wordt getoond.

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

Het veld ProductionDate moet een datum zijn.

Wijs een aangepaste sjabloon ParsingErrorMessage toe om een aangepast bericht op te geven.

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

Het veld ProductionDate heeft een onjuiste datumwaarde.