ASP.NET základních Blazor vstupních komponent

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 aplikaci EditForm EditContext.

Komponenty v tabulce jsou také podporovány mimo formulář v Razor značek součástí. 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 podřízených InputRadio<TValue>
InputSelect<TValue>	<select>
InputText	<input>
InputTextArea	<textarea>

Další informace o komponentě InputFile najdete v tématu ASP.NET nahrání souboru CoreBlazor.

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 EditContextvýchozím chováním ověřování zahrnuje aktualizace třídy CSS pole tak, aby odrážela stav pole jako platný nebo neplatný s použitím stylu ověření 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 type="range" atribut, který vytvoří vstup rozsahu, který podporuje vazbu modelu a ověření formuláře, obvykle se vykresluje jako posuvník nebo ovládací prvek číselníku místo textového pole:

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

Další informace o komponentě InputFile najdete v tématu ASP.NET nahrání souboru CoreBlazor.

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 je výchozí na nulu, ale vyžaduje hodnotu od jednoho do 100 000 za jeho 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">).
• ProductionDateDateTime a vyžaduje se.

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 se stavem ze serveru, který obvykle neoznačí možnost jako zaškrtnutou. 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 Submit v metodě.
• 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:

EditContext Změna po přiřazení se nepodporuje.

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

Vazba podporuje multiple výběr možností s komponentou InputSelect<TValue> . Událost @onchange poskytuje pole vybraných možností prostřednictvím argumentů události (ChangeEventArgs). Hodnota musí být svázaná s typem pole a vazba na typ pole zpřístupňuje multiple atribut pro InputSelect<TValue> značku jako volitelný.

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; } =
            new[] { 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 v části Možnosti vazby InputSelect s hodnotami 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 (Starship3komponentě) oddílu Příklad formuláře není datum výroby nové hvězdné lodi zadáno 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í zobrazí popisný název, pokud je hodnota pole neplatná:

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

Podpora šablony chybové zprávy

InputDate<TValue> šablony chybových zpráv a InputNumber<TValue> podpory:

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

Ve formuláři (Starship3komponentě) oddílu Starfleet Starship Database Příklad formuláře s popisným zobrazovaným názvem přiřazeným Production Date polem 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 zadání 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.