ASP.NET Core Blazor giriş bileşenleri

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 EditFormEditContext.

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.

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

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

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

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.

Not

Submit Form değerlerini depolamak genellikle zaman uyumsuz çağrılar ( kullandığından, sonraki örnekte zaman uyumsuz bir yöntem olarak gösterilmiştirawait .... Form gösterildiği gibi bir test uygulamasında kullanılıyorsa yalnızca Submit zaman uyumlu olarak çalıştırılır. Test amacıyla aşağıdaki derleme uyarısını yoksayın:

Bu zaman uyumsuz yöntemde 'await' işleçleri yok ve zaman uyumlu olarak çalışacaktı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 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 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ı:

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

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.