ASP.NET Core Blazor formları bağlama

Bu makalede, bağlamanın formlarda Blazor nasıl kullanılacağı açıklanmaktadır.

EditForm/EditContext model

, EditForm formdaki diğer bileşenler için basamaklı değer olarak atanan nesneyi temel alan bir EditContext oluşturur. Hangi EditContext form alanlarının değiştirildiği ve geçerli doğrulama iletileri de dahil olmak üzere düzenleme işlemiyle ilgili meta verileri izler. veya EditForm.EditContext öğesine EditForm.Model atamak, formu verilere bağlayabilir.

Model bağlama

Atama:EditForm.Model

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

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

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

Bağlam bağlama

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

öğesine bir EditContext veya a Model atayınEditForm. Her ikisi de atanmışsa bir çalışma zamanı hatası oluşur.

Desteklenen türler

Bağlama şu desteği destekler:

• İlkel türler
• Koleksiyonlar
• Karmaşık türler
• Özyinelemeli türler
• Oluşturucuları olan türler
• Numaralandırmalar

Model bağlamasını [DataMember] özelleştirmek için ve [IgnoreDataMember] özniteliklerini de kullanabilirsiniz. Özellikleri yeniden adlandırmak, özellikleri yoksaymak ve özellikleri gerektiği gibi işaretlemek için bu öznitelikleri kullanın.

Ek bağlama seçenekleri

çağrılırken AddRazorComponentsek RazorComponentsServiceOptions model bağlama seçenekleri sağlanır:

• MaxFormMappingCollectionSize: Form koleksiyonunda izin verilen en fazla öğe sayısı.
• MaxFormMappingRecursionDepth: Form verileri özyinelemeli olarak eşlenirken izin verilen maksimum derinlik.
• MaxFormMappingErrorCount: Form verileri eşlerken izin verilen en fazla hata sayısı.
• MaxFormMappingKeySize: Form veri anahtarlarını okumak için kullanılan arabellek boyutu üst sınırı.

Aşağıda, çerçeve tarafından atanan varsayılan değerler gösterilmektedir:

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

Form adları

Form adı atamak için parametresini FormName kullanın. Form adlarının model verilerini bağlamak için benzersiz olması gerekir. Aşağıdaki formun adı RomulanAle:

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

Form adı sağlama:

• Statik olarak işlenmiş sunucu tarafı bileşenleri tarafından gönderilen tüm formlar için gereklidir.
• Etkileşimli işleme moduna sahip uygulamalardaki ve bileşenlerdeki Blazor WebAssembly formları içeren etkileşimli olarak işlenmiş bileşenler tarafından gönderilen formlar için gerekli değildir. Ancak, bir form için etkileşim bırakılırsa çalışma zamanı formu gönderme hatalarını önlemek için her form için benzersiz bir form adı sağlamanızı öneririz.

Form adı yalnızca form statik olarak işlenmiş bir sunucu tarafı bileşeninden geleneksel bir HTTP POST isteği olarak bir uç noktaya gönderildiğinde denetlenebilir. Çerçeve, formu işleme noktasında bir özel durum oluşturmaz, ancak yalnızca HTTP POST'un geldiği ve form adı belirtmediği noktada özel durum oluşturur.

Uygulamanın kök bileşeninin üzerinde adsız (boş dize) form kapsamı vardır ve uygulamada form adı çakışmaları olmadığında bu kapsam yeterli olur. Form adı çakışmaları mümkünse (örneğin, bir kitaplıktan form eklerken ve kitaplığın geliştiricisi tarafından kullanılan form adı denetimine sahip değilseniz, 'nin ana projesindeki Blazor Web Appbileşeniyle FormMappingScope bir form adı kapsamı sağlayın.

Aşağıdaki örnekte, bileşenin HelloFormFromLibrary adlı Hello bir formu vardır ve bir kitaplıktadır.

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

Aşağıdaki NamedFormsWithScope bileşen kitaplığın HelloFormFromLibrary bileşenini kullanır ve adlı Hellobir forma sahiptir. Bileşenin FormMappingScope kapsam adı, ParentContext bileşen tarafından sağlanan tüm formlara yöneliktir HelloFormFromLibrary . Bu örnekteki her iki form da form adına ()Hello sahip olsa da, form adları harmanlamaz ve olaylar form POST olayları için doğru forma yönlendirilir.

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

Formdan bir parametre sağlayın ([SupplyParameterFromForm])

özniteliği, [SupplyParameterFromForm] ilişkili özelliğin değerinin formun form verilerinden sağlanması gerektiğini gösterir. İstekteki, özelliğin adıyla eşleşen veriler özelliğine bağlıdır. Model bağlama için kullanılan adlarla eşleşen form değeri adları Blazor oluşturmaya dayalı InputBase<TValue> girişler. Bileşen parametresi özelliklerinden ()[Parameter] farklı olarak, ile [SupplyParameterFromForm] ek açıklamalı özelliklerin işaretlenmesi publicgerekmez.

Özniteliğine aşağıdaki form bağlama parametrelerini [SupplyParameterFromForm] belirtebilirsiniz:

• Name: Parametresinin adını alır veya ayarlar. Ad, form verileriyle eşleştirmek için kullanılacak ön eki belirlemek ve değerin bağlanması gerekip gerekmediğine karar vermek için kullanılır.
• FormName: İşleyicinin adını alır veya ayarlar. Ad, değerin bağlanması gerekip gerekmediğine karar vermek için parametreyi form adına göre formla eşleştirmek için kullanılır.

Aşağıdaki örnek, modellerine form adına göre iki formu bağımsız olarak bağlar.

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

Formları iç içe yerleştirme ve bağlama

Aşağıdaki kılavuzda alt formları iç içe yerleştirme ve bağlama işlemleri gösterilmektedir.

Aşağıdaki ship details sınıfı (ShipDetails), bir alt form için bir açıklama ve uzunluk içerir.

ShipDetails.cs:

namespace BlazorSample;

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

Aşağıdaki Ship sınıf bir tanımlayıcıyı (Id) adlandırıp gönderim ayrıntılarını içerir.

Ship.cs:

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

Aşağıdaki alt form türün ShipDetails değerlerini düzenlemek için kullanılır. Bu, bileşenin en üstünde devralınarak Editor<T> uygulanır. Editor<T> alt bileşenin modeleT ( ) göre doğru form alanı adlarını oluşturmasını sağlar; burada T aşağıdaki örnekte yer alır 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>

Ana form sınıfa Ship bağlıdır. Bileşen StarshipSubform , olarak Model!.Detailsbağlı olan gemi ayrıntılarını düzenlemek için kullanılır.

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

Form verilerini statik SSR ile başlatma

Bir bileşen statik SSR'yi benimsediğinde, OnInitialized{Async} yaşam döngüsü yöntemi ve OnParametersSet{Async} yaşam döngüsü yöntemi , bileşen başlangıçta işlendiğinde ve sunucuya post biçimindeki her biçimde tetikler. Form modeli değerlerini başlatmak için, aşağıdaki örnekte gösterildiği gibi içinde yeni model değerleri atamadan önce modelde OnParametersSet{Async}zaten veri olup olmadığını onaylayın.

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

Gelişmiş form eşleme hata senaryoları

Çerçeve, belirli bir formun FormMappingContext eşleme işlemiyle ilişkili bağlam olan formun örneğini oluşturur ve doldurur. Her eşleme kapsamı (bir FormMappingScope bileşen tarafından tanımlanır) örneği oluşturur FormMappingContext. Bir [SupplyParameterFromForm] değerin bağlamını her istediğinde, çerçeve denenen değerle ve eşleme hatalarıyla doldurur FormMappingContext .

Genellikle eşleme hatalarını doğrulama hataları olarak göstermek için , EditContextve diğer iç uygulamalar için InputBase<TValue>bir veri kaynağı olduğundan geliştiricilerin doğrudan etkileşim FormMappingContext kurması beklenemez. Gelişmiş özel senaryolarda geliştiriciler, denenen değerleri ve eşleme hatalarını kullanan özel kod yazmak için doğrudan olarak [CascadingParameter] erişebilirFormMappingContext.

Özel giriş bileşenleri

Özel giriş işleme senaryoları için aşağıdaki alt bölümler özel giriş bileşenlerini gösterir:

• tabanlı InputBase<T>giriş bileşeni: Bileşen, bağlama, geri çağırmalar ve doğrulama için temel bir uygulama sağlayan öğesinden InputBase<TValue>devralır. öğesinden InputBase<TValue> devralan bileşenler bir Blazor formda (EditForm) kullanılmalıdır.

• Tam geliştirici denetimine sahip giriş bileşeni: Bileşen, giriş işlemenin tam denetimini alır. Bileşenin kodu bağlamayı, geri çağırmaları ve doğrulamayı yönetmelidir. Bileşen formun Blazor içinde veya dışında kullanılabilir.

Belirli gereksinimler bunu yapmanızı engellemediği sürece özel giriş bileşenlerinizi 'den InputBase<TValue> türetmenizi öneririz. Sınıf InputBase<TValue> , ASP.NET Core ekibi tarafından etkin bir şekilde korunarak en son Blazor özellikler ve çerçeve değişiklikleriyle güncel kalmasını sağlar.

Giriş bileşeni InputBase<T>

Aşağıdaki örnek bileşen:

• InputBase<TValue> öğesinden devralır. öğesinden InputBase<TValue> devralan bileşenler bir Blazor formda (EditForm) kullanılmalıdır.
• Onay kutusundan boole girişi alır.
• Kapsayıcısının <div> arka plan rengini onay kutusunun durumuna göre ayarlar ve yöntem bağlamadan@bind:after ( sonra yürütülürken AfterChange gerçekleşir).
• Temel sınıfın TryParseValueFromString yöntemini geçersiz kılmak için gereklidir, ancak bir onay kutusu dize verileri sağlamadığından dize giriş verilerini işlemez. Dize girişini işleyen diğer giriş bileşeni türleri için örnek uygulamaları TryParseValueFromString ASP.NET Core başvuru kaynağında kullanılabilir.

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

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

Yıldız gemisi örnek formunda (/Starship.csStarship3.razor)önceki bileşeni kullanmak için mühendislik onayı alanının bloğunu modelin IsValidatedDesign özelliğine bağlı bir EngineeringApprovalInputDerived bileşen örneğiyle değiştirin:<div>

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

Tam geliştirici denetimine sahip giriş bileşeni

Aşağıdaki örnek bileşen:

• öğesinden InputBase<TValue>devralınmıyor. Bileşen bağlama, geri çağırmalar ve doğrulama dahil olmak üzere giriş işlemenin tam denetimini alır. Bileşen bir Blazor formun içinde veya dışında kullanılabilir (EditForm).
• Onay kutusundan boole girişi alır.
• Onay kutusu işaretliyse arka plan rengini değiştirir.

Bileşendeki kod şunları içerir:

• Value özelliği, girişin değerini almak veya ayarlamak için iki yönlü bağlama ile kullanılır. ValueChanged , ilişkili değeri güncelleştiren geri çağırmadır.

• Formda Blazor kullanıldığında:

  • EditContext basamaklı bir değerdir.
  • fieldCssClass alanı doğrulama sonucuna EditContext göre biçimlendirin.
  • ValueExpression , çerçeve tarafından atanan ve ilişkili değeri tanımlayan bir ifadedir (Expression<Func<T>>).
  • FieldIdentifier genellikle bir model özelliğine karşılık gelen, düzenlenebilen tek bir alanı benzersiz olarak tanımlar. Alan tanımlayıcısı, ilişkili değeri (ValueExpression ) tanımlayan ifadeyle oluşturulur.

• Olay işleyicisinde OnChange :

  • Onay kutusu girişinin değeri öğesinden InputFileChangeEventArgsalınır.
  • Kapsayıcı <div> öğesinin arka plan rengi ve metin rengi ayarlanır.
  • EventCallback.InvokeAsync bağlamasıyla ilişkili temsilciyi çağırır ve tüketicilere değerin değiştiğini belirten bir olay bildirimi gönderilir.
  • Bileşen bir EditForm içinde kullanılıyorsa ( EditContext özelliği değil null), EditContext.NotifyFieldChanged doğrulamayı tetikleme amacıyla çağrılır.

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

Yıldız gemisi örnek formunda (/Starship.csStarship3.razor)önceki bileşeni kullanmak için mühendislik onayı alanının bloğunu modelin IsValidatedDesign özelliğine bağlı bir EngineeringApprovalInputStandalone bileşen örneğiyle değiştirin:<div>

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

Bileşen EngineeringApprovalInputStandalone ayrıca bir EditFormdışında da işlevseldir:

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

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

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

Radyo düğmeleri

Bu bölümdeki örnek, bu makalenin Starfleet Starship Database Örnek form bölümünün formuna (Starship3 bileşenine) dayanır.

Aşağıdaki enum türleri uygulamaya ekleyin. Bunları tutmak veya dosyaya eklemek için Starship.cs yeni bir dosya oluşturun.

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

sınıfını aşağıdakiler ComponentEnums için erişilebilir hale getirin:

• Starship modelinde Starship.cs (örneğin, using static ComponentEnums;).
• Starfleet Starship Database form (Starship3.razor) (örneğin, @using static ComponentEnums).

Bir radyo düğmesi grubu oluşturmak için bileşenleri bileşenle birlikte InputRadioGroup<TValue> kullanınInputRadio<TValue>. Aşağıdaki örnekte özellikler, Giriş bileşenleri makalesinin Starship Örnek form bölümünde açıklanan modele eklenir:

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

Giriş bileşenleri makalesinin Örnek form bölümünün formunu (Starship3bileşeni) güncelleştirin.Starfleet Starship Database Üretecek bileşenleri ekleyin:

• Gemi üreticisi için bir radyo düğmesi grubu.
• Altyapı ve gemi rengi için iç içe radyo düğmesi grubu.

Not

İç içe radyo düğmesi grupları genellikle formlarda kullanılmaz çünkü kullanıcıların kafasını karıştırabilecek biçim denetimlerinin düzensiz düzenine neden olabilir. Ancak, kullanıcı arabirimi tasarımında anlamlı oldukları durumlar vardır; örneğin, aşağıdaki örnekte iki kullanıcı girişi için önerileri eşleştiren durumlar vardır: ship engine ve ship color. Formun doğrulaması için bir altyapı ve bir renk gereklidir. Formun düzeni, altyapı ve renk önerilerini eşleştirmek için iç içe InputRadioGroup<TValue>yerleştirilmiş'leri kullanır. Ancak, kullanıcı formu göndermek için herhangi bir altyapıyı herhangi bir renkle birleştirebilir.

Not

Aşağıdaki örnekte sınıfın ComponentEnums bileşen tarafından kullanılabilir olduğundan emin olun:

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

Not

Atlanırsa Name , InputRadio<TValue> bileşenler en son atalarına göre gruplandırılır.

Giriş bileşenleri makalesinin Örnek form bölümünün bileşeninde Starship3 önceki Razor işaretlemeyi uyguladıysanız, yönteminin günlüğünü güncelleştirinSubmit:

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