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, bir EditForm içinde ve bir EditContext ile desteklenir.

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

Giriş bileşeni	Olarak oluşturuldu...
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>	Çocuk grubu InputRadio<TValue>
InputSelect<TValue>	<select>
InputText	<input>
InputTextArea	<textarea>

InputFile bileşeni hakkında daha fazla bilgi için ASP.NET Core Blazor dosya yüklemeleri bölümüne bakın.

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.
• Bir EditContext olmayan denetimler için, varsayılan doğrulama durumu geçerli veya geçersiz olarak yansıtır, ancak HTML öğesine doğrulama stili sağlamaz.

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

InputNumber<TValue> Bileşeni, modeli bağlama ve form doğrulamayı destekleyen ve genellikle metin kutusu yerine kaydırıcı veya çevirmeli kontrol olarak işlenen bir aralık girişi oluşturan type="range" özniteliğini destekler:

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

InputFile bileşeni hakkında daha fazla bilgi için ASP.NET Core Blazor dosya yüklemeleri bölümüne bakın.

Örnek form

Makalenin birkaç örneğinde ve diğer Starship düğümü makalelerindeki örneklerde kullanılan aşağıdaki tür, veri açıklamalarıyla çeşitli özellik setlerini tanımlar.

• Id RequiredAttribute ile işaretlendiği için gereklidir. Id , kullanarak StringLengthAttributeen az bir karakter ancak en fazla 16 karakterlik bir değer gerektirir.
• Description isteğe bağlıdır çünkü RequiredAttribute ile ek açıklama yapılmamıştır.
• 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 (true) bir <input type="checkbox"> 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 görüntülenirse, istemcideki herhangi bir durum sunucudan gelen durumla geçersiz kılınır ve bu da normalde bir seçeneğin işaretli olmasını sağlamaz. 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, Blazor istemci üzerindeki <select> öğesinin durumunu koruduğundan, modelden işaretli seçeneğin açıkça atanması gerekli 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);
    }
}

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

Aşağıdaki örnekte:

• Önceki Starfleet Starship Database formunun, yalnızca uzay gemisinin kimliği için bir değer kabul eden kısaltılmış bir sürümü (Starship3 bileşeni) kullanılır. Starship türünün bir örneği oluşturulduğunda, diğer Starship özellikler geçerli varsayılan değerler alır.
• Submit düğme seçildiğinde, Submit yöntemi yürütülür.
• Form, EditContext.Validate yönteminde Submit çağrılarak kontrol edilir.
• Doğrulama sonucuna bağlı olarak loglama yapı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");
        }
    }
}

Not

Öğesinin atandıktan sonra EditContext değiştirilmesi desteklenmemektedir.

InputSelect öğesiyle çoklu seçenek seçimi

Bağlama, multiple seçenek seçimini InputSelect<TValue> bileşeni ile destekler. Olay, @onchangeseçilen seçeneklerin bir dizisini sağlar. Değerin bir dizi türüne bağlı olması gerekir, bu da InputSelect<TValue> bileşen işlendiğinde bileşenin multiple öğeye<select> özniteliğini otomatik olarak eklemesine neden olur.

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; } =
            [ 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 InputSelect değerlerine bağlama null seçenekleri bölümüne bakın.

C# InputSelect nesne değerlerini null seçeneklere bağlama

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, InputBase<TValue>.DisplayName parametresiyle görünen adları destekler.

Starfleet Starship Database bölümünün Starship3 formundaki ( bileşeni), 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 kullanıcı dostu bir isim 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, "Production" ve "Date" sözcükleri arasında boşluk bulunan dostça bir adla 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 tanımlayıcı adı gösterir.

Ü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 formunda (Starship3 bileşeni) Örnek form bölümünden atanmış dostça görünen ad ile Production Date 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.

InputHidden formlardaki gizli giriş alanlarını işlemek için bileşen

Bileşen, InputHidden dize değerlerini depolamak için gizli bir giriş alanı sağlar.

Aşağıdaki örnekte, formun Parameter özelliği için gizli bir giriş alanı oluşturulur. Form gönderildiğinde, gizli alanın değeri görüntülenir:

<EditForm Model="Parameter" OnValidSubmit="Submit" FormName="InputHidden Example">
    <InputHidden id="hidden" @bind-Value="Parameter" />
    <button type="submit">Submit</button>
</EditForm>

@if (submitted)
{
    <p>Hello @Parameter!</p>
}

@code {
    private bool submitted;

    [SupplyParameterFromForm] 
    public string Parameter { get; set; } = "stranger";

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