ASP.NET Alapvető Blazor űrlapok kötése

Ez a cikk bemutatja, hogyan lehet a kötéseket használni a Blazor űrlapokon.

EditForm / EditContext modell

A EditForm hozzárendelt objektum alapján létrehoz egy EditContextkaszkádolt értéket az űrlap többi összetevőjének. A EditContext program nyomon követi a szerkesztési folyamat metaadatait, beleértve a módosított űrlapmezőket és az aktuális érvényesítési üzeneteket. Értelemezve akár a EditForm.Model, akár a EditForm.EditContext rendszerhez hozzárendelve egy űrlapot, az űrlap az adatokkal összekapcsolható.

Modellkapcsolás

Hozzárendelés a következőhöz EditForm.Model:

<EditForm ... Model="Model" ...>
    ...
</EditForm>

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

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

Kontextuskötés

Hozzárendelés a következőhöz EditForm.EditContext:

<EditForm ... EditContext="editContext" ...>
    ...
</EditForm>

@code {
    private EditContext? editContext;

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

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

Rendeljen hozzá egy EditContextvagy egyModel.EditForm Ha mindkettő ki van rendelve, futásidejű hiba jelenik meg.

Támogatott típusok

Binding támogatja a következőket:

• Primitív típusok
• Collections
• Összetett típusok
• Rekurzív típusok
• Típusok konstruktorokkal
• Enumok

A modellkötés testreszabásához használhatja az [DataMember] és [IgnoreDataMember] az attribútumokat is. Ezekkel az attribútumokkal átnevezheti a tulajdonságokat, figyelmen kívül hagyhatja a tulajdonságokat, és szükség szerint megjelölheti a tulajdonságokat.

További kötési beállítások

További modellkötési lehetőségek érhetők el a RazorComponentsServiceOptions használatával, amikor AddRazorComponents kerül meghívásra.

• MaxFormMappingCollectionSize: Az űrlapgyűjteményekben engedélyezett elemek maximális száma.
• MaxFormMappingRecursionDepth: Az űrlapadatok rekurzív leképezésekor megengedett maximális mélység.
• MaxFormMappingErrorCount: Az űrlapadatok leképezése során megengedett hibák maximális száma.
• MaxFormMappingKeySize: Az űrlap-adatkulcsok olvasásához használt puffer maximális mérete.

Az alábbiakban a keretrendszer által hozzárendelt alapértelmezett értékeket mutatjuk be:

builder.Services.AddRazorComponents(options =>
{
    options.FormMappingUseCurrentCulture = true;
    options.MaxFormMappingCollectionSize = 1024;
    options.MaxFormMappingErrorCount = 200;
    options.MaxFormMappingKeySize = 1024 * 2;
    options.MaxFormMappingRecursionDepth = 64;
}).AddInteractiveServerComponents();

Űrlapnevek

FormName A paraméterrel rendeljen hozzá egy űrlapnevet. Az űrlapneveknek egyedinek kell lenniük a modelladatok kötéséhez. A következő űrlap neve RomulanAle:

<EditForm ... FormName="RomulanAle" ...>
    ...
</EditForm>

Űrlapnév megadása:

• A statikusan renderelt kiszolgálóoldali összetevők által küldött összes űrlaphoz szükséges.
• Nem szükséges az interaktívan renderelt összetevők által küldött űrlapokhoz, amelyek az alkalmazásokban és az interaktív renderelési móddal rendelkező összetevőkben Blazor WebAssembly lévő űrlapokat is tartalmazzák. Javasoljuk azonban, hogy minden űrlaphoz adjon meg egy egyedi űrlapnevet, hogy megelőzze a futtatókörnyezeti űrlapok közzétételi hibáit, ha az interaktivitás egy űrlap esetében valaha is el lett dobva.

Az űrlap nevét csak akkor ellenőrzi a rendszer, ha az űrlapot egy statikusan renderelt kiszolgálóoldali összetevő hagyományos HTTP POST-kéréseként küldi el egy végpontra. A keretrendszer nem ad kivételt az űrlap megjelenítésekor, hanem csak azon a ponton, amikor megérkezik egy HTTP POST, és nem ad meg űrlapnevet.

Az alkalmazás gyökérkomponense fölött van egy névtelen (üres string) űrlapkörnyezet, amely elegendő, ha az alkalmazásban nincs űrlapnév-ütközés. Ha lehetséges az űrlapnév ütközése, például ha egy erőforrástárból származó űrlapot is beleszámítanak, és nem tudja szabályozni az erőforrástár fejlesztője által használt űrlapnevet, adjon meg egy űrlapnév-hatókört az FormMappingScope összetevőhöz a Blazor Web Appfő projektben.

Az alábbi példában az HelloFormFromLibrary összetevőnek van egy Hello nevezetű űrlapja, amely egy könyvtárban található.

HelloFormFromLibrary.razor:

<EditForm FormName="Hello" Model="this" OnSubmit="Submit">
    <InputText @bind-Value="Name" />
    <button type="submit">Submit</button>
</EditForm>

@if (submitted)
{
    <p>Hello @Name from the library's form!</p>
}

@code {
    bool submitted = false;

    [SupplyParameterFromForm]
    private string? Name { get; set; }

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

Az alábbi NamedFormsWithScope összetevő használja a könyvtár HelloFormFromLibrary összetevőjét, és rendelkezik egy Hello nevű űrlappal. A FormMappingScope összetevő hatókör neve ParentContext, amely bármely, a HelloFormFromLibrary összetevő által biztosított űrlaphoz tartozik. Bár a példában szereplő mindkét űrlapnak van űrlapneve (Hello), az űrlapnevek nem ütköznek egymással, és az események a POST űrlapok eseményeinek megfelelő űrlapra lesznek irányítva.

NamedFormsWithScope.razor:

@page "/named-forms-with-scope"

<div>Hello form from a library</div>

<FormMappingScope Name="ParentContext">
    <HelloFormFromLibrary />
</FormMappingScope>

<div>Hello form using the same form name</div>

<EditForm FormName="Hello" Model="this" OnSubmit="Submit">
    <InputText @bind-Value="Name" />
    <button type="submit">Submit</button>
</EditForm>

@if (submitted)
{
    <p>Hello @Name from the app form!</p>
}

@code {
    bool submitted = false;

    [SupplyParameterFromForm]
    private string? Name { get; set; }

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

Adjon meg egy paramétert az űrlapról ([SupplyParameterFromForm])

Az [SupplyParameterFromForm] attribútum azt jelzi, hogy a társított tulajdonság értékét az űrlap űrlapadataiból kell megadni. A kérelem azon adatai, amelyek megegyeznek a tulajdonság nevével, a tulajdonsághoz lesznek kötve. A bemenetek, amelyek a InputBase<TValue>-ra épülnek, olyan űrlapérték-neveket generálnak, amelyek megegyeznek azokkal a nevekkel, amelyeket a Blazor használ modellkötésnél. Az összetevőparaméter tulajdonságaitól ([Parameter]) eltérően a megjegyzésekkel [SupplyParameterFromForm] ellátott tulajdonságokat nem kell megjelölni public.

Az attribútumhoz a következő űrlapkötési [SupplyParameterFromForm]paramétereket adhatja meg:

• Name: Lekéri vagy beállítja a paraméter nevét. A név az űrlapadatoknak megfelelő előtag meghatározására szolgál, és eldönti, hogy kötelező-e az érték kötése.
• FormName: Lekérdez vagy beállítja a kezelő nevét. A név a paraméternek az űrlap nevével való egyeztetésére szolgál, hogy eldöntse, kötelező-e az érték kötése.

Az alábbi példa egymástól függetlenül két űrlapot köt a modelljeihez űrlapnév alapján.

Starship6.razor:

@page "/starship-6"
@inject ILogger<Starship6> Logger

<EditForm Model="Model1" OnSubmit="Submit1" FormName="Holodeck1">
    <div>
        <label>
            Holodeck 1 Identifier: 
            <InputText @bind-Value="Model1!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

<EditForm Model="Model2" OnSubmit="Submit2" FormName="Holodeck2">
    <div>
        <label>
            Holodeck 2 Identifier: 
            <InputText @bind-Value="Model2!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    [SupplyParameterFromForm(FormName = "Holodeck1")]
    private Holodeck? Model1 { get; set; }

    [SupplyParameterFromForm(FormName = "Holodeck2")]
    private Holodeck? Model2 { get; set; }

    protected override void OnInitialized()
    {
        Model1 ??= new();
        Model2 ??= new();
    }

    private void Submit1() => Logger.LogInformation("Submit1: Id={Id}", Model1?.Id);

    private void Submit2() => Logger.LogInformation("Submit2: Id={Id}", Model2?.Id);

    public class Holodeck
    {
        public string? Id { get; set; }
    }
}

Űrlapok beágyazása és adatkötése

Az alábbi útmutató bemutatja, hogyan ágyazhatja be és kapcsolhatja össze a gyermekűrlapokat.

A következő hajóinformációs osztály (ShipDetails) egy segédűrlap leírását és hosszát tartalmazza.

ShipDetails.cs:

namespace BlazorSample;

public class ShipDetails
{
    public string? Description { get; set; }
    public int? Length { get; set; }
}

Az alábbi Ship osztály egy azonosítót (Id) nevez el, és tartalmazza a szállítási adatokat.

Ship.cs:

namespace BlazorSample
{
    public class Ship
    {
        public string? Id { get; set; }
        public ShipDetails Details { get; set; } = new();
    }
}

Az alábbi segédűrlap a ShipDetails típus értékeinek szerkesztésére szolgál. Az összetevő tetején való Editor<T> öröklésével van megvalósítva. Editor<T> biztosítja, hogy a gyermekösszetevő a modell T alapján hozza létre a megfelelő űrlapmezőneveket, ahol T az alábbi példában látható ShipDetails.

StarshipSubform.razor:

@inherits Editor<ShipDetails>

<div>
    <label>
        Description: 
        <InputText @bind-Value="Value!.Description" />
    </label>
</div>
<div>
    <label>
        Length: 
        <InputNumber @bind-Value="Value!.Length" />
    </label>
</div>

A fő űrlap az osztályhoz Ship van kötve. A StarshipSubform komponens a hajó adatai szerkesztésére szolgál, Model!.Details kötésben.

Starship7.razor:

@page "/starship-7"
@inject ILogger<Starship7> Logger

<EditForm Model="Model" OnSubmit="Submit" FormName="Starship7">
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <StarshipSubform @bind-Value="Model!.Details" />
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

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

    protected override void OnInitialized() => Model ??= new();

    private void Submit() => 
        Logger.LogInformation("Id = {Id} Desc = {Description} Length = {Length}",
            Model?.Id, Model?.Details?.Description, Model?.Details?.Length);
}

Űrlapadatok inicializálása statikus SSR-vel

Amikor egy összetevő statikus SSR-t alkalmaz, az OnInitialized{Async} életciklus-metódus és az OnParametersSet{Async} életciklus-metódus akkor aktiválódik, amikor az összetevőt eredetileg renderelik, és minden POST űrlapon a kiszolgálóra kerül. Az űrlapmodell értékeinek inicializálásához ellenőrizze, hogy a modell rendelkezik-e már adatokkal az új modellértékek OnParametersSet{Async}hozzárendelése előtt, ahogy az alábbi példa is mutatja.

StarshipInit.razor:

@page "/starship-init"
@inject ILogger<StarshipInit> Logger

<EditForm Model="Model" OnValidSubmit="Submit" FormName="StarshipInit">
    <div>
        <label>
            Identifier:
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

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

    protected override void OnInitialized() => Model ??= new();

    protected override void OnParametersSet()
    {
        if (Model!.Id == default)
        {
            LoadData();
        }
    }

    private void LoadData()
    {
        Model!.Id = "Set by LoadData";
    }

    private void Submit()
    {
        Logger.LogInformation("Id = {Id}", Model?.Id);
    }

    public class Starship
    {
        public string? Id { get; set; }
    }
}

Kiterjedt űrlaptérképezési hibaforgatókönyvek

A keretrendszer példányosítja és feltölti az FormMappingContext-t egy űrlaphoz, amely az adott űrlap leképezési műveletéhez tartozó környezet. Minden leképezési hatókör (amelyet egy FormMappingScope összetevő határoz meg) példányosít FormMappingContext. Minden alkalommal, amikor egy [SupplyParameterFromForm] adott értéket kér a kontextustól, a keretrendszer beilleszti a FormMappingContext-t a megkísérelt értékkel és a leképezési hibákkal.

A fejlesztőknek nem kell közvetlenül kommunikálniuk FormMappingContext-val, mivel ez elsősorban az adatok forrásaként szolgál InputBase<TValue>, EditContext és más belső megvalósítások számára, amelyek a leképezési hibákat érvényesítési hibaként jelenítik meg. Kiterjedt egyéni forgatókönyvekben a fejlesztők közvetlenül hozzáférhetnek a FormMappingContext elemeihez [CascadingParameter] szerepében, hogy egyéni kódot írjanak, mely feldolgozza a megkísérelt értékeket és a leképezési hibákat.

Egyéni bemeneti összetevők

Egyéni bemeneti feldolgozási forgatókönyvek esetén az alábbi alszakaszok az egyéni bemeneti összetevőket mutatják be:

• Bemeneti összetevő a következő alapján InputBase<T>: Az összetevő az InputBase<TValue>-től öröklődik, amely alapszintű implementációt biztosít a kötéshez, a visszahívásokhoz és az ellenőrzéshez. Az InputBase<TValue> elemek, amelyek öröklődnek, egy Blazor formában (EditForm) kell használni.

• Bemeneti összetevő teljes fejlesztői vezérléssel: Az összetevő teljes mértékben felügyeli a bemeneti feldolgozást. Az összetevő kódjának kezelnie kell a kötést, a visszahívásokat és az ellenőrzést. Az összetevő a Blazor űrlapon belül vagy kívül is használható.

Javasoljuk, hogy saját egyéni bemeneti összetevőit származtassa a InputBase<TValue>-ból, hacsak bizonyos követelmények nem akadályozzák ezt. Az InputBase<TValue> osztályt a ASP.NET Core csapata aktívan tartja karban, biztosítva, hogy a legújabb Blazor funkciókkal és keretrendszermódosításokkal up-to-date maradjon.

Bemeneti komponens a InputBase<T> alapján

A következő példaösszetevő:

• Innen örököl: InputBase<TValue>. Az InputBase<TValue> elemek, amelyek öröklődnek, egy Blazor formában (EditForm) kell használni.
• Logikai bemenetet vesz fel egy jelölőnégyzetből.
• A tároló <div> háttérszínét a jelölőnégyzet állapota alapján állítja be, amely akkor fordul elő, ha a metódus a AfterChange kötés (@bind:after) után fut.
• Az alaposztály metódusának TryParseValueFromString felülbírálásához szükséges, de nem dolgoz fel sztringbemeneti adatokat, mert a jelölőnégyzet nem biztosít sztringadatokat. A sztringbemenetet feldolgozó más típusú bemeneti összetevők példa-implementációi TryParseValueFromString elérhetők a ASP.NET Core referenciaforrásban.

Megjegyzés:

A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja az Ágak vagy címkék közötti váltás legördülő listát. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

EngineeringApprovalInputDerived.razor:

@using System.Diagnostics.CodeAnalysis
@inherits InputBase<bool>

<div class="@divCssClass">
    <label>
        Engineering Approval:
        <input @bind="CurrentValue" @bind:after="AfterChange" class="@CssClass" 
            type="checkbox" />
    </label>
</div>

@code {
    private string? divCssClass;

    private void AfterChange()
    {
        divCssClass = CurrentValue ? "bg-success text-white" : null;
    }

    protected override bool TryParseValueFromString(
        string? value, out bool result, 
        [NotNullWhen(false)] out string? validationErrorMessage)
            => throw new NotSupportedException(
                "This component does not parse string inputs. " +
                $"Bind to the '{nameof(CurrentValue)}' property, " +
                $"not '{nameof(CurrentValueAsString)}'.");
}

Ha az előző összetevőt szeretné használni a csillaghajó példaűrlapján (Starship3.razor/Starship.cs), cserélje le a <div> mérnöki jóváhagyási mező blokkját a EngineeringApprovalInputDerived modell tulajdonságához IsValidatedDesign kötött összetevőpéldányra:

- <div>
-     <label>
-         Engineering Approval: 
-         <InputCheckbox @bind-Value="Model!.IsValidatedDesign" />
-     </label>
- </div>
+ <EngineeringApprovalInputDerived @bind-Value="Model!.IsValidatedDesign" />

Ha a InputBase<TValue> elemből öröklött komponens statikusan kerül megjelenítésre, akkor a InputBase<TValue>.NameAttributeValue tulajdonságot rendelni kell a name elemek <input> attribútumához.

<input @bind="CurrentValue" @bind:after="AfterChange" class="@CssClass"
    type="checkbox" name="@NameAttributeValue" />

Az előző hozzárendelés nem szükséges, ha az összetevő garantáltan mindig interaktívan jelenik meg.

Bemeneti összetevő teljes fejlesztői vezérléssel

A következő példaösszetevő:

• Nem örökli a InputBase<TValue>. Az összetevő teljes mértékben felügyeli a bemeneti feldolgozást, beleértve a kötést, a visszahívásokat és az ellenőrzést. Az összetevő a Blazor űrlapon belül EditForm vagy kívül is használható.
• Logikai bemenetet vesz fel egy jelölőnégyzetből.
• Módosítja a háttérszínt, ha a jelölőnégyzet be van jelölve.

Az összetevőben található kód a következőket tartalmazza:

• A Value tulajdonságot kétirányú kötéssel használja a bemenet értékének lekéréséhez vagy beállításához. ValueChanged az a visszahívás, amely frissíti a kötött értéket.

• Blazor formaként történő használat esetén:

  • Ez EditContext egy kaszkádolt érték.
  • fieldCssClass az ellenőrzés eredménye alapján stílust ad a mezőnek EditContext .
  • ValueExpression a keret által hozzárendelt kifejezés (Expression<Func<T>>) a kötött értéket azonosító kifejezés.
  • FieldIdentifier egyedileg azonosít egy szerkeszthető mezőt, amely általában egy modelltulajdonságnak felel meg. A mezőazonosító a kötött értéket (ValueExpression) azonosító kifejezéssel jön létre.

• OnChange Az eseménykezelőben:

  • A jelölőnégyzet bemenetének értéke a következőből InputFileChangeEventArgsszármazik: .
  • A tárolóelem <div> háttérszíne és szövegszíne be van állítva.
  • EventCallback.InvokeAsync meghívja a kötéshez társított meghatalmazottat, és eseményértesítést küld a fogyasztóknak arról, hogy az érték megváltozott.
  • Ha az összetevőt egy EditForm-ben használják (a EditContext tulajdonság nem null), EditContext.NotifyFieldChanged hívható meg az érvényesítés aktiválásához.

EngineeringApprovalInputStandalone.razor:

@using System.Globalization
@using System.Linq.Expressions

<div class="@divCssClass">
    <label>
        Engineering Approval:
        <input class="@fieldCssClass" @onchange="OnChange" type="checkbox" 
            value="@Value" />
    </label>
</div>

@code {
    private string? divCssClass;
    private FieldIdentifier fieldIdentifier;
    private string? fieldCssClass => EditContext?.FieldCssClass(fieldIdentifier);

    [CascadingParameter]
    private EditContext? EditContext { get; set; }

    [Parameter]
    public bool? Value { get; set; }

    [Parameter]
    public EventCallback<bool> ValueChanged { get; set; }

    [Parameter]
    public Expression<Func<bool>>? ValueExpression { get; set; }

    protected override void OnInitialized()
    {
        fieldIdentifier = FieldIdentifier.Create(ValueExpression!);
    }

    private async Task OnChange(ChangeEventArgs args)
    {
        BindConverter.TryConvertToBool(args.Value, CultureInfo.CurrentCulture, 
            out var value);

        divCssClass = value ? "bg-success text-white" : null;

        await ValueChanged.InvokeAsync(value);
        EditContext?.NotifyFieldChanged(fieldIdentifier);
    }
}

Ha az előző összetevőt szeretné használni a csillaghajó példaűrlapján (Starship3.razor/Starship.cs), cserélje le a <div> mérnöki jóváhagyási mező blokkját a EngineeringApprovalInputStandalone modell tulajdonságához IsValidatedDesign kötött összetevőpéldányra:

- <div>
-     <label>
-         Engineering Approval: 
-         <InputCheckbox @bind-Value="Model!.IsValidatedDesign" />
-     </label>
- </div>
+ <EngineeringApprovalInputStandalone @bind-Value="Model!.IsValidatedDesign" />

Az EngineeringApprovalInputStandalone összetevő egy EditForm kívül is működik:

<EngineeringApprovalInputStandalone @bind-Value="ValidDesign" />

<div>
    <b>ValidDesign:</b> @ValidDesign
</div>

@code {
    private bool ValidDesign { get; set; }
}

Választógombok

A jelen szakaszban szereplő példa ezen cikk Starfleet Starship Database szakaszának Starship3 űrlapján ( komponensén) alapul.

Adja hozzá az alábbi enum típusokat az alkalmazáshoz. Hozzon létre egy új fájlt, amely megtartja vagy hozzáadja őket a Starship.cs fájlhoz.

public class ComponentEnums
{
    public enum Manufacturer { SpaceX, NASA, ULA, VirginGalactic, Unknown }
    public enum Color { ImperialRed, SpacecruiserGreen, StarshipBlue, VoyagerOrange }
    public enum Engine { Ion, Plasma, Fusion, Warp }
}

Tegye akadálymentessé a ComponentEnums osztályt a következőhöz:

• Starship modellben Starship.cs (például using static ComponentEnums;).
• Starfleet Starship Database form (Starship3.razor) (például @using static ComponentEnums).

A választógombcsoport létrehozásához használja az InputRadio<TValue> összetevőt a InputRadioGroup<TValue> összetevőkkel. Az alábbi példában tulajdonságokat adunk hozzá a Starship modellhez, amelyet a Beviteli összetevők cikk Példa űrlap szakaszában ismertetünk :

[Required]
[Range(typeof(Manufacturer), nameof(Manufacturer.SpaceX), 
    nameof(Manufacturer.VirginGalactic), ErrorMessage = "Pick a manufacturer.")]
public Manufacturer Manufacturer { get; set; } = Manufacturer.Unknown;

[Required, EnumDataType(typeof(Color))]
public Color? Color { get; set; } = null;

[Required, EnumDataType(typeof(Engine))]
public Engine? Engine { get; set; } = null;

Frissítse a Starfleet Starship Database űrlapot (Starship3 összetevőt) az Példaűrlap szakaszban a Beviteli összetevők cikkben. Adja hozzá a létrehozandó összetevőket:

• A hajógyártó rádiógomb-csoportja.
• Beágyazott rádiógomb csoport a hajtómű és a hajó színéhez.

Megjegyzés:

A beágyazott választógomb-csoportokat nem gyakran használják az űrlapokban, mert az űrlapvezérlők rendezetlen elrendezéséhez vezethetnek, ami összezavarhatja a felhasználókat. Vannak azonban olyan esetek, amikor a felhasználói felület kialakításában van értelme, például az alábbi példában, amely két felhasználói bemenetre, a hajómotorra és a hajó színére vonatkozó javaslatokat párosít. Az űrlap érvényesítéséhez egy motorra és egy színre van szükség. Az űrlap elrendezése beágyazott InputRadioGroup<TValue> elemeket használ a motor (belső égésű vagy elektromos) és a színajánlások párosításához. A felhasználó azonban bármilyen motort bármilyen színnel kombinálhat az űrlap elküldéséhez.

Megjegyzés:

Győződjön meg arról, hogy az ComponentEnums osztály elérhetővé válik az összetevő számára az alábbi példában:

@using static ComponentEnums

<fieldset>
    <legend>Manufacturer</legend>
    <InputRadioGroup @bind-Value="Model!.Manufacturer">
        @foreach (var manufacturer in Enum.GetValues<Manufacturer>())
        {
            <div>
                <label>
                    <InputRadio Value="manufacturer" />
                    @manufacturer
                </label>
            </div>
        }
    </InputRadioGroup>
</fieldset>

<fieldset>
    <legend>Engine and Color</legend>
    <p>
        Engine and color pairs are recommended, but any
        combination of engine and color is allowed.
    </p>
    <InputRadioGroup Name="engine" @bind-Value="Model!.Engine">
        <InputRadioGroup Name="color" @bind-Value="Model!.Color">
            <div style="margin-bottom:5px">
                <div>
                    <label>
                        <InputRadio Name="engine" Value="Engine.Ion" />
                        Ion
                    </label>
                </div>
                <div>
                    <label>
                        <InputRadio Name="color" Value="Color.ImperialRed" />
                        Imperial Red
                    </label>
                </div>
            </div>
            <div style="margin-bottom:5px">
                <div>
                    <label>
                        <InputRadio Name="engine" Value="Engine.Plasma" />
                        Plasma
                    </label>
                </div>
                <div>
                    <label>
                        <InputRadio Name="color" Value="Color.SpacecruiserGreen" />
                        Spacecruiser Green
                    </label>
                </div>
            </div>
            <div style="margin-bottom:5px">
                <div>
                    <label>
                        <InputRadio Name="engine" Value="Engine.Fusion" />
                        Fusion
                    </label>
                </div>
                <div>
                    <label>
                        <InputRadio Name="color" Value="Color.StarshipBlue" />
                        Starship Blue
                    </label>
                </div>
            </div>
            <div style="margin-bottom:5px">
                <div>
                    <label>
                        <InputRadio Name="engine" Value="Engine.Warp" />
                        Warp
                    </label>
                </div>
                <div>
                    <label>
                        <InputRadio Name="color" Value="Color.VoyagerOrange" />
                        Voyager Orange
                    </label>
                </div>
            </div>
        </InputRadioGroup>
    </InputRadioGroup>
</fieldset>

Megjegyzés:

Ha Name nincs megadva, InputRadio<TValue> az összetevők a legújabb ősük szerint vannak csoportosítva.

Ha a fent említett Razor jelölést a Starship3 komponensben, a Példaűrlap szakaszban, az Bemeneti összetevők című cikkben alkalmazta, frissítse a Submit metódus naplózását.

Logger.LogInformation("Id = {Id} Description = {Description} " +
    "Classification = {Classification} MaximumAccommodation = " +
    "{MaximumAccommodation} IsValidatedDesign = " +
    "{IsValidatedDesign} ProductionDate = {ProductionDate} " +
    "Manufacturer = {Manufacturer}, Engine = {Engine}, " +
    "Color = {Color}",
    Model?.Id, Model?.Description, Model?.Classification,
    Model?.MaximumAccommodation, Model?.IsValidatedDesign,
    Model?.ProductionDate, Model?.Manufacturer, Model?.Engine, 
    Model?.Color);