ASP.NET alapvető Blazor bemeneti összetevők

Ez a cikk a beépített bemeneti összetevőket ismerteti Blazor.

Bemeneti összetevők

A Blazor keretrendszer beépített bemeneti összetevőket biztosít a felhasználói bemenetek fogadásához és ellenőrzéséhez. Az alábbi táblázatban szereplő beépített bemeneti összetevők támogatottak egy EditForm-ben egy EditContext-el együtt.

A táblázat összetevőit a formán kívül is támogatja az Razor összetevőjelölés. A bemenetek akkor lesznek érvényesítve, amikor módosítják őket, és mikor küldik el az űrlapot.

Bemeneti összetevő	Megjelenítve, mint...
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>	Gyermekcsoport InputRadio<TValue>
InputSelect<TValue>	<select>
InputText	<input>
InputTextArea	<textarea>

További információ az InputFile összetevőről: ASP.NET Core-fájlfeltöltésekBlazor.

Az összes bemeneti összetevő, beleértve a EditFormtetszőleges attribútumokat is támogatja. A renderelt HTML-elemhez minden olyan attribútum hozzáadódik, amely nem egyezik meg az összetevőparaméterrel.

A bemeneti összetevők alapértelmezett viselkedést biztosítanak egy mező módosításakor történő érvényesítéshez:

• Az űrlap EditContextbemeneti összetevői esetében az alapértelmezett érvényesítési viselkedés magában foglalja a mező CSS-osztályának frissítését, hogy az érvényesként vagy érvénytelenként tükrözze a mező állapotát a mögöttes HTML-elem érvényesítési stílusával.
• A nem rendelkező EditContextvezérlők esetében az alapértelmezett ellenőrzés az érvényes vagy érvénytelen állapotot tükrözi, de nem biztosít érvényesítési stílust a mögöttes HTML-elemhez.

Egyes összetevők hasznos elemzési logikát tartalmaznak. Például InputDate<TValue> és InputNumber<TValue> a nem elemezhető értékeket úgy kezelik, hogy ezeket érvényesítési hibaként regisztrálják. A null értékeket elfogadó típusok támogatják a célmező (például int? null értékű egész szám) null értékűségét is.

Az InputNumber<TValue> összetevő támogatja az type="range" attribútumot, amely olyan tartománybemenetet hoz létre, amely támogatja a modellkötést és az űrlapérvényesítést, amely általában csúszkaként vagy tárcsázóként jelenik meg szövegdoboz helyett:

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

További információ az InputFile összetevőről: ASP.NET Core-fájlfeltöltésekBlazor.

Példaűrlap

A cikk számos példájában és más Forms-csomópontcikkekben használt alábbi Starship típus különböző tulajdonságokat határoz meg adatjegyzetekkel:

• Id szükséges, mert RequiredAttribute meg van jelölve. Id legalább egy, de legfeljebb 16 karakterből álló értéket igényel a StringLengthAttribute használatával.
• Description nem kötelező, mert nincs megjelölve a RequiredAttribute-el.
• A Classification használata kötelező.
• A MaximumAccommodation tulajdonság alapértelmezés szerint nulla, de 1 és 100 000 RangeAttributeközötti értéket igényel.
• IsValidatedDesign megköveteli, hogy a tulajdonságnak legyen egy true értéke, amely megfelel a kiválasztott állapotnak, ha a tulajdonság a felhasználói felületen (<input type="checkbox">) egy jelölőnégyzethez van kötve.
• ProductionDate DateTime egy és kötelező.

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

Az alábbi űrlap a következő módon fogadja el és ellenőrzi a felhasználói bemenetet:

• Az előző modellben definiált Starship tulajdonságok és ellenőrzés.
• Blazor számos beépített bemeneti összetevője.

Ha be van állítva a hajó besorolásának (Classification) modelltulajdonsága, a rendszer ellenőrzi a modellnek megfelelő beállítást. Például checked="@(Model!.Classification == "Exploration")" egy felderítő hajó besorolásához. Az bejelölt beállítás explicit beállításának oka, hogy egy <select> elem értéke csak a böngészőben található meg. Ha az űrlap az elküldése után jelenik meg a kiszolgálón, az ügyfél minden állapota felül lesz bírálva a kiszolgáló állapotával, amely általában nem jelöl meg bejelöltként egy beállítást. A modelltulajdonság ellenőrzött beállításának beállításával a besorolás mindig a modell állapotát tükrözi. Ez megőrzi a besorolási kijelölést az űrlapbeküldések között, amelyek az űrlap újrarendezését eredményezik a kiszolgálón. Olyan helyzetekben, amikor az űrlap nem lesz újrarendelve a kiszolgálón, például amikor az interaktív kiszolgáló renderelési módja közvetlenül az összetevőre van alkalmazva, nem szükséges explicit módon hozzárendelni az ellenőrzött beállítást a modellből, mert Blazor megőrzi az ügyfél elemének <select> állapotát.

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

Az EditForm előző példában a hozzárendelt EditContext példány (Starship) alapján hoz létre egy Model="..." példányt, és egy érvényes űrlapot kezel. A következő példa bemutatja, hogyan rendelhet hozzá egy EditContext űrlapot, és hogyan ellenőrizheti az űrlap elküldésekor.

Az alábbi példában:

• A rendszer a korábbi Starfleet Starship Database űrlap (Starship3 összetevő) rövidített verzióját használja, amely csak a csillaghajó azonosítójának értékét fogadja el. A többi Starship tulajdonság érvényes alapértelmezett értékeket kap a Starship típuspéldány létrehozásakor.
• A Submit gomb kiválasztásakor a Submit metódus fut.
• A(z) EditContext.Validate meghívásával az űrlapot a Submit metódusban érvényesítjük.
• A naplózás az érvényesítési eredménytől függően lesz végrehajtva.

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

Megjegyzés:

A EditContext hozzárendelés utáni módosítás nem támogatott.

Több lehetőség kijelölése az InputSelect összetevővel

A kötés az multiple összetevővel támogatja a InputSelect<TValue> beállításválasztást. Az @onchange esemény eseményargumentumokon (ChangeEventArgs)keresztül biztosítja a kiválasztott lehetőségek tömbét. Az értéket tömbtípushoz kell kötni, ami azt eredményezi, hogy az InputSelect<TValue> összetevő automatikusan hozzáadja az multiple attribútumot az <select> elemhez az összetevő renderelésekor.

A következő példában a felhasználónak legalább két csillaghajó-besorolást kell kiválasztania, de legfeljebb három besorolást.

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

Az üres sztringek és null értékek adatkötésben való kezeléséről a C# objektumértékek InputSelect kötési null beállításai című szakaszban tájékozódhat.

Kötési InputSelect beállítások C# objektum értékekhez null

Az üres sztringek és null értékek adatkötésben való kezeléséről az ASP.NET Alapvető Blazor adatkötés című témakörben olvashat bővebben.

Megjelenített név támogatása

Számos beépített összetevő támogatja a InputBase<TValue>.DisplayName paraméterrel rendelkező megjelenítendő neveket.

Starfleet Starship Database A Starship3 szakasz űrlapjában (összetevőjében) az új csillaghajó gyártási dátuma nem ad meg megjelenítendő nevet:

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

Ha a mező érvénytelen dátumot tartalmaz az űrlap elküldésekor, a hibaüzenet nem jelenít meg barátságos nevet. A "ProductionDate" mezőnév nem rendelkezik szóközzel a "Production" és a "Date" között, amikor megjelenik az érvényesítési összegzésben:

A ProductionDate mezőnek dátumnak kell lennie.

Állítsa be a DisplayName tulajdonságot egy barátságos névre szóközzel az "Production" és "Date" szavak között.

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

Az érvényesítési összegzés a barátságos nevet jeleníti meg, ha a mező értéke érvénytelen.

A Gyártási dátum mezőnek dátumnak kell lennie.

Hibaüzenetsablon támogatása

InputDate<TValue> és InputNumber<TValue> támogatási hibaüzenetsablonok:

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

A Starfleet Starship Database űrlap (Starship3 összetevő) a példaűrlap szakaszban, ahol egy felhasználóbarát megjelenítendő név van hozzárendelve, a Production Date mező az alábbi alapértelmezett hibaüzenetsablon használatával hoz létre hibaüzenetet:

The {0} field must be a date.

A helyőrző helye {0} az, ahol a DisplayName tulajdonság értéke látható, amikor a hiba megjelenik a felhasználó számára.

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

A Gyártási dátum mezőnek dátumnak kell lennie.

Egyéni sablon hozzárendelése egyéni üzenet megadásához ParsingErrorMessage :

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

A Gyártási dátum mező helytelen dátumértéket tartalmaz.

InputHidden összetevő az űrlapok rejtett beviteli mezőinek kezeléséhez

Az InputHidden összetevő egy rejtett beviteli mezőt biztosít a sztringértékek tárolásához.

Az alábbi példában egy rejtett beviteli mező jön létre az űrlap tulajdonságához Parameter . Az űrlap elküldésekor megjelenik a rejtett mező értéke:

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