ASP.NET Core Blazor giriş bileşenleri

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Bu makalede ' in yerleşik giriş bileşenleri açıklanmaktadır Blazor.

Giriş bileşenleri

Çerçeve, Blazor kullanıcı girişini almak ve doğrulamak için yerleşik giriş bileşenleri sağlar. Aşağıdaki tabloda yer alan yerleşik giriş bileşenleri ile ile desteklenir EditForm EditContext.

Tablodaki bileşenler, bileşen işaretlemesindeki bir formun dışında da Razor desteklenir. Girişler değiştirildiğinde ve form gönderildiğinde doğrulanır.

Giriş bileşeni Olarak işlendi...
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> Alt öğe grubu InputRadio<TValue>
InputSelect<TValue> <select>
InputText <input>
InputTextArea <textarea>

Bileşen hakkında InputFile daha fazla bilgi için bkz . ASP.NET Çekirdek Blazor dosya yüklemeleri.

Giriş bileşeni Olarak işlendi...
InputCheckbox <input type="checkbox">
InputDate<TValue> <input type="date">
InputNumber<TValue> <input type="number">
InputSelect<TValue> <select>
InputText <input>
InputTextArea <textarea>

Not

InputRadio<TValue> ve InputRadioGroup<TValue> bileşenleri ASP.NET Core 5.0 veya sonraki sürümlerde kullanılabilir. Daha fazla bilgi için bu makalenin 5.0 veya sonraki bir sürümünü seçin.

dahil olmak üzere EditFormtüm giriş bileşenleri rastgele öznitelikleri destekler. Bileşen parametresiyle eşleşmeyen tüm öznitelikler, işlenen HTML öğesine eklenir.

Giriş bileşenleri, bir alan değiştirildiğinde doğrulama için varsayılan davranışı sağlar:

  • ile bir formdaki EditContextgiriş bileşenleri için varsayılan doğrulama davranışı, alan CSS sınıfını temel alınan HTML öğesinin doğrulama stiliyle alanın durumunu geçerli veya geçersiz olarak yansıtacak şekilde güncelleştirmeyi içerir.
  • olmayan denetimler EditContextiçin, varsayılan doğrulama geçerli veya geçersiz durumu yansıtır, ancak temel alınan HTML öğesine doğrulama stili sağlamaz.

Bazı bileşenler yararlı ayrıştırma mantığı içerir. Örneğin, InputDate<TValue> InputNumber<TValue> ayrıştırılamayan değerleri doğrulama hataları olarak kaydederek ayrıştırılamaz değerleri düzgün bir şekilde işleyin. Null değerleri kabul edebilen türler, hedef alanın null atanmasını da destekler (örneğin, int? null atanabilir tamsayı için).

InputNumber<TValue> Bileşen, genellikle metin kutusu yerine kaydırıcı veya arama denetimi olarak işlenen model bağlamayı ve form doğrulamayı destekleyen bir aralık girişi oluşturan özniteliğini desteklertype="range":

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

Bileşen hakkında InputFile daha fazla bilgi için bkz . ASP.NET Çekirdek Blazor dosya yüklemeleri.

Örnek form

Bu makalenin diğer Forms düğümü makalelerindeki örnek ve örneklerinden birkaçında kullanılan aşağıdaki Starship tür, veri ek açıklamalarıyla çeşitli özellikler kümesini tanımlar:

  • Id , ile ek açıklama eklendiğinden RequiredAttributegereklidir. Id , kullanarak StringLengthAttributeen az bir karakter ancak en fazla 16 karakterlik bir değer gerektirir.
  • Description isteğe bağlıdır çünkü ile ek açıklama eklenmemiştir RequiredAttribute.
  • Classification gereklidir.
  • MaximumAccommodation özelliği varsayılan olarak sıfır olur, ancak her biri için bir ile 100.000 arasında RangeAttributebir değer gerektirir.
  • IsValidatedDesign, özelliğin kullanıcı arabirimindeki (<input type="checkbox">) bir true onay kutusuna bağlı olduğunda seçili durumla eşleşen bir değere sahip olmasını gerektirir.
  • ProductionDate ve DateTime gereklidir.

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

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

using System.ComponentModel.DataAnnotations;

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 = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

using System.ComponentModel.DataAnnotations;

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 = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

using System;
using System.ComponentModel.DataAnnotations;

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 = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

using System;
using System.ComponentModel.DataAnnotations;

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 = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

Aşağıdaki form kullanarak kullanıcı girişini kabul eder ve doğrular:

  • Önceki Starship modelde tanımlanan özellikler ve doğrulama.
  • Blazor'nin yerleşik giriş bileşenlerinden birkaçı.

Geminin sınıflandırması (Classification) için model özelliği ayarlandığında, modelle eşleşen seçenek işaretlenir. Örneğin, checked="@(Model!.Classification == "Exploration")" bir keşif gemisinin sınıflandırması için. İşaretli seçeneği açıkça ayarlamanın nedeni, bir <select> öğenin değerinin yalnızca tarayıcıda mevcut olmasıdır. Form gönderildikten sonra sunucuda işlenirse, istemcideki herhangi bir durum sunucudan gelen durumla geçersiz kılınabilir ve normalde bir seçeneği işaretli olarak işaretlemez. Model özelliğinden işaretli seçeneği ayarlayarak sınıflandırma her zaman modelin durumunu yansıtır. Bu, form gönderimleri arasında yapılan sınıflandırma seçimini korur ve bu da sunucuda formun yeniden yenilenmesiyle sonuçlanır. Etkileşimli Sunucu işleme modu doğrudan bileşene uygulandığında, formun sunucuda yeniden oluşturulmadığı durumlarda, istemcideki öğenin durumunu koruduğundan <select> modelden işaretli seçeneğin açıkça atanması gerekli Blazor değildir.

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

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

@page "/starship-3"
@inject ILogger<Starship3> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="Model" OnValidSubmit="Submit">
    <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 value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option 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 {
    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);
    }
}

EditForm Yukarıdaki örnekte, atanan Starship örneği (Model="...") temel alan bir EditContext oluşturur ve geçerli bir formu işler. Sonraki örnekte bir forma nasıl atanacağı EditContext ve formun gönderildiğinde nasıl doğrulanacağı gösterilmektedir.

Aşağıdaki örnekte:

  • Önceki formun Starfleet Starship Database kısaltılmış bir sürümü (Starship3bileşen) yalnızca yıldız gemisinin kimliği için bir değer kabul eden kullanılır. Türün bir örneği Starship oluşturulduğunda diğer Starship özellikler geçerli varsayılan değerler alır.
  • Submit Düğme seçildiğinde yöntemi yürütülürSubmit.
  • Form, yönteminde Submit çağrılarak EditContext.Validate doğrulanır.
  • Günlük, doğrulama sonucuna bağlı olarak yürütülür.

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

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

@page "/starship-4"
@inject ILogger<Starship4> Logger

<EditForm EditContext="editContext" OnSubmit="Submit">
    <DataAnnotationsValidator />
    <div>
        <label>
            Identifier:
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    private EditContext? editContext;

    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 async Task Submit()
    {
        if (editContext != null && editContext.Validate())
        {
            Logger.LogInformation("Submit called: Form is valid");

            // await ...
        }
        else
        {
            Logger.LogInformation("Submit called: Form is INVALID");
        }
    }
}

Not

atandıktan sonra öğesinin EditContext değiştirilmesi desteklenmez.

Bileşenle InputSelect birden çok seçenek seçimi

Bağlama, bileşenle InputSelect<TValue> seçenek seçimini desteklermultiple. Olay, @onchange olay bağımsız değişkenleri (ChangeEventArgs) aracılığıyla seçilen seçeneklerin bir dizisini sağlar. Değerin bir dizi türüne bağlı olması gerekir ve bir dizi türüne bağlanmak özniteliği etikette InputSelect<TValue> isteğe bağlı hale getirirmultiple.

Aşağıdaki örnekte kullanıcının en az iki yıldız gemisi sınıflandırması seçmesi gerekir, ancak en fazla üç sınıflandırma seçmelidir.

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

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

@page "/starship-5"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship5> Logger

<h1>Bind Multiple <code>InputSelect</code> Example</h1>

<EditForm EditContext="editContext" OnValidSubmit="Submit">
    <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;

    private Starship? Model { get; set; }

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

    private void Submit()
    {
        Logger.LogInformation("Submit called: Processing the 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 }
}

Boş dizelerin ve null değerlerin veri bağlamada nasıl işleneceğini öğrenmek için C# nesne null değerlerine bağlama InputSelect seçenekleri bölümüne bakın.

C# nesne null değerlerine bağlama InputSelect seçenekleri

Veri bağlamada boş dizelerin ve null değerlerin nasıl işleneceğini öğrenmek için bkz . ASP.NET Çekirdek Blazor veri bağlama.

Görünen ad desteği

Çeşitli yerleşik bileşenler, parametresiyle InputBase<TValue>.DisplayName görünen adları destekler.

Starfleet Starship Database Örnek form bölümünün formunda (Starship3bileşen), yeni bir yıldızgeminin üretim tarihi bir görünen ad belirtmez:

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

Alan, form gönderildiğinde geçersiz bir tarih içeriyorsa, hata iletisi kolay bir ad görüntülemez. "ProductionDate" alan adının geçerlilik özetinde göründüğünde "Production" ile "Date" arasında boşluk yoktur:

ProductionDate alanı bir tarih olmalıdır.

DisplayName özelliğini "" veDate "Production" sözcükleri arasında boşluk olan kolay bir ada ayarlayın:

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

Alanın değeri geçersiz olduğunda doğrulama özeti kolay adı görüntüler:

Üretim Tarihi alanı bir tarih olmalıdır.

Hata iletisi şablonu desteği

InputDate<TValue> ve InputNumber<TValue> destek hata iletisi şablonları:

Starfleet Starship Database Örnek form bölümünün kolay görünen adı atanmış Production Date formda (Starship3bileşen), alan aşağıdaki varsayılan hata iletisi şablonunu kullanarak bir hata iletisi oluşturur:

The {0} field must be a date.

Yer tutucunun {0} konumu, hata kullanıcıya görüntülendiğinde özelliğin DisplayName değerinin göründüğü yerdir.

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

Üretim Tarihi alanı bir tarih olmalıdır.

Özel ileti sağlamak için 'a ParsingErrorMessage özel şablon atayın:

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

Üretim Tarihi alanında yanlış bir tarih değeri var.

Starfleet Starship Database Örnek form bölümünün formunda (Starship3 bileşeni) varsayılan bir hata iletisi şablonu kullanılır:

The {0} field must be a date.

Yer tutucunun {0} konumu, hata kullanıcıya görüntülendiğinde özelliğin DisplayName değerinin göründüğü yerdir.

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

ProductionDate alanı bir tarih olmalıdır.

Özel ileti sağlamak için 'a ParsingErrorMessage özel şablon atayın:

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

ProductionDate alanında yanlış bir tarih değeri var.