ASP.NET Core Blazor vstupní komponenty

Tento článek popisuje Blazorpředdefinované vstupní komponenty.

Vstupní komponenty

Architektura Blazor poskytuje integrované vstupní komponenty pro příjem a ověření uživatelského vstupu. Integrované vstupní komponenty v následující tabulce jsou podporovány v rámci EditForm s EditContext.

Komponenty v tabulce jsou také podporovány mimo formulář v zápisu komponenty Razor. Vstupy se ověřují při změně a při odeslání formuláře.

Vstupní komponenta	Vykresleno jako...
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>	Skupina dětí InputRadio<TValue>
InputSelect<TValue>	<select>
InputText	<input>
InputTextArea	<textarea>

Další informace o komponentě InputFile najdete v tématu Blazor.

Všechny vstupní komponenty, včetně EditForm, podporují libovolné atributy. Do vykreslovaného elementu HTML se přidá libovolný atribut, který neodpovídá parametru komponenty.

Vstupní komponenty poskytují výchozí chování při ověřování při změně pole:

• U vstupních komponent ve formuláři s EditContext je výchozím chováním ověřování aktualizace třídy CSS pole, aby odrážela stav pole jako platný nebo neplatný, s použitím validačního stylu základního elementu HTML.
• U ovládacích prvků, které nemají EditContext, výchozí ověření odráží platný nebo neplatný stav, ale neposkytuje styl ověřování podkladovému elementu HTML.

Mezi některé komponenty patří užitečná logika analýzy. Můžete například InputDate<TValue>InputNumber<TValue> bez problémů zpracovat neparsovatelné hodnoty registrací neparsovatelných hodnot jako chyb ověřování. Typy, které mohou přijímat hodnoty null, podporují také hodnotu null cílového pole (například int? pro celé číslo s možnou hodnotou null).

Komponenta InputNumber<TValue> podporuje atribut type="range", který vytvoří vstupní prvek s rozsahovou hodnotou podporující vazbu modelu a ověření formuláře, je obvykle vykreslen jako posuvník nebo otočný knoflík spíše než textové pole.

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

Další informace o komponentě InputFile najdete v tématu Blazor.

Příklad formuláře

Následující Starship typ, který se používá v několika příkladech a příkladech tohoto článku v jiných článcích o uzlech Forms , definuje různorodou sadu vlastností s datovými poznámkami:

• Id je povinná, protože je opatřena poznámkami RequiredAttribute. Id vyžaduje hodnotu alespoň jednoho znaku, ale maximálně 16 znaků pomocí znaku StringLengthAttribute.
• Description je nepovinný, protože není opatřen poznámkami RequiredAttribute.
• Classification je povinné.
• Vlastnost MaximumAccommodation má výchozí hodnotu nula, ale vyžaduje hodnotu od jednoho do 100 000 dle svého RangeAttribute.
• IsValidatedDesign vyžaduje, aby vlastnost měla true hodnotu, která odpovídá vybranému stavu, pokud je vlastnost vázána na zaškrtávací políčko v uživatelském rozhraní (<input type="checkbox">).
• ProductionDate je DateTime a je požadováno.

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

Následující formulář přijímá a ověřuje vstup uživatele pomocí:

• Vlastnosti a ověřování definované v předchozím Starship modelu.
• Několik předdefinovaných vstupních Blazorkomponent

Pokud je vlastnost modelu pro klasifikaci lodi (Classification) nastavena, je zaškrtnutá možnost odpovídající modelu. Například checked="@(Model!.Classification == "Exploration")" pro klasifikaci průzkumné lodi. Důvodem explicitního nastavení zaškrtnuté možnosti je, že hodnota <select> prvku se nachází pouze v prohlížeči. Pokud se formulář po odeslání vykreslí na serveru, přepíše se jakýkoli stav z klienta stavem ze serveru, který běžně neznačí možnost jako vybranou. Když nastavíte zaškrtnutou možnost z vlastnosti modelu, klasifikace vždy odráží stav modelu. Tím se zachová výběr klasifikace mezi odesláními formulářů, které vedou k opětovnému vyřazování formuláře na serveru. V situacích, kdy formulář není reenderován na serveru, například když je režim vykreslování Interactive Server použit přímo na komponentu, explicitní přiřazení zaškrtnuté možnosti z modelu není nutné, protože Blazor zachovává stav prvku <select> v klientovi.

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

V EditForm předchozím příkladu se EditContext vytvoří na základě přiřazené Starship instance (Model="...") a zpracuje platný formulář. Další příklad ukazuje, jak přiřadit EditContext formulář a ověřit, kdy je formulář odeslán.

V následujícím příkladu:

• Používá se zkrácená verze dřívějšího Starfleet Starship Database formuláře (Starship3 komponenty), která přijímá pouze hodnotu id hvězdicové lodi. Ostatní Starship vlastnosti obdrží platné výchozí hodnoty při vytvoření instance Starship typu.
• Metoda Submit se spustí při Submit výběru tlačítka.
• Formulář je ověřen voláním EditContext.Validate v metodě Submit.
• Protokolování se provádí v závislosti na výsledku ověření.

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

Poznámka:

Není podporováno měnit EditContext po jeho přiřazení.

Výběr více možností s komponentou InputSelect

Vazba podporuje multiple výběr možnosti pomocí komponenty InputSelect<TValue>. Událost @onchange poskytuje pole vybraných možností prostřednictvím argumentů události (ChangeEventArgs). Hodnota musí být vázána na typ pole, což má za následek, že komponenta při vykreslení automaticky přidá InputSelect<TValue> k multiple prvku.

V následujícím příkladu musí uživatel vybrat alespoň dvě klasifikace hvězdicové lodi, ale ne více než tři klasifikace.

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

Informace o tom, jak se v datové vazbě zpracovávají prázdné řetězce a null hodnoty, najdete InputSelect objektů null jazyka C#.

Možnosti vazby InputSelect na hodnoty objektů null jazyka C#

Informace o tom, jak se v datové vazbě zpracovávají prázdné řetězce a null hodnoty, najdete v tématu ASP.NET Základní Blazor datová vazba.

Podpora zobrazovaného názvu

Několik předdefinovaných komponent podporuje zobrazované názvy s parametrem InputBase<TValue>.DisplayName .

Starfleet Starship Database Ve formuláři (Starship3 komponentě) oddílu Příklad formuláře není u data výroby nové hvězdné lodi zadán zobrazovaný název.

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

Pokud pole obsahuje neplatné datum při odeslání formuláře, chybová zpráva nezobrazuje popisný název. Název pole , "ProductionDate" nemá mezeru mezi "Production" a "Date", když se zobrazí v souhrnu ověření:

Pole ProductionDate musí být datum.

DisplayName Nastavte vlastnost na popisný název s mezerou mezi slovy "Production" a "Date":

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

Souhrn ověření zobrazuje uživatelsky přívětivý název, když je hodnota pole neplatná.

Pole Datum výroby musí být datum.

Podpora šablon chybových zpráv

InputDate<TValue> a InputNumber<TValue> podporují šablony chybových zpráv.

• InputDate<TValue>.ParsingErrorMessage
• InputNumber<TValue>.ParsingErrorMessage

Ve formuláři Starfleet Starship Database(Starship3 komponentě) oddílu Příklad formuláře s přiřazeným přátelským zobrazovaným názvem, pole vytvoří chybovou zprávu pomocí následující výchozí šablony chybové zprávy:

The {0} field must be a date.

Pozice zástupného symbolu {0} je místo, kde se hodnota DisplayName vlastnosti zobrazí, když se uživateli zobrazí chyba.

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

Pole Datum výroby musí být datum.

Přiřaďte vlastní šablonu k ParsingErrorMessage pro vytvoření vlastní zprávy.

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

Pole Datum výroby má nesprávnou hodnotu data.

InputHidden komponenta pro zpracování skrytých vstupních polí ve formulářích

KomponentaInputHidden poskytuje skryté vstupní pole pro ukládání řetězcových hodnot.

V následujícím příkladu se pro vlastnost formuláře Parameter vytvoří skryté vstupní pole. Při odeslání formuláře se zobrazí hodnota skrytého pole:

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