BlazorASP.NET Core formlar ve doğrulama

Çerçeve, Blazor veri ek açıklamalarını kullanan bir modele bağlı bileşeni kullanarak doğrulama ile web EditForm formlarını destekler.

Bir bileşenin veri EditForm açıklamaları doğrulamasıyla nasıl çalıştığını göstermek için aşağıdaki türü göz önünde ExampleModel bulundurabilirsiniz. özelliği Name ile gerekli olarak işaretlenir ve maksimum dize uzunluğu sınırını ve hata iletisini RequiredAttribute StringLengthAttribute belirtir.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string? Name { get; set; }
}

Form, çerçevenin Blazor bileşeni kullanılarak EditForm tanımlanır. Aşağıdaki bileşen, bir webformu önceki türe bağlı bir bileşen kullanarak işlemek için tipik Razor Razor EditForm öğeleri, bileşenleri ve kodu ExampleModel gösterir.

Pages/FormExample1.razor:

@page "/form-example-1"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample1> Logger

<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>

@code {
    private ExampleModel exampleModel = new();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Yukarıdaki FormExample1 bileşende:

• Bileşen, EditForm öğenin göründüğü <EditForm> yerde işlenir.
• Model bileşenin bloğunda oluşturulur @code ve özel bir alanda ( ) exampleModel oluşturulur. alanı, öğesinin EditForm.Model özniteliğine ( Model ) <EditForm> atanır.
• bileşeni InputText ( ) dize değerlerini id="name" düzenlemeye uygun bir giriş bileşenidir. @bind-Valueyönergesi özniteliği exampleModel.Name model özelliğini bileşenin InputText özelliğine Value bağlar.
• HandleValidSubmityöntemine OnValidSubmit atanır. Form doğrulamayı geçerse işleyici çağrılır.
• Veri ek açıklamaları doğrulayıcı DataAnnotationsValidator † (bileşen), veri ek açıklamalarını kullanarak doğrulama desteği sağlar:
  • Düğme seçildiğinde form alanı boş bırakılırsa doğrulama özette ( bileşen ) (" ") bir <input> Submit hata görünür ve ValidationSummary ‡ The Name field is required. HandleValidSubmit çağrılmamıştır.
  • Düğme seçildiğinde form alanı on karakterden fazla karakter içeriyorsa doğrulama özette (" ") bir <input> Submit hata görünür ve Name is too long. HandleValidSubmit çağrılmamıştır.
  • Düğme <input> seçildiğinde form alanı geçerli bir değer Submit içeriyorsa HandleValidSubmit çağrılır.

†Bileşen DataAnnotationsValidator Validator bileşeni bölümünde ele almaktadır. ‡Bileşen ValidationSummary Doğrulama Özeti ve Doğrulama İletisi bileşenleri bölümünde ele alır. Özellik bağlama hakkında daha fazla bilgi için bkz. BlazorASP.NET Core veri bağlama .

Formu bağlama

, formda diğer bileşenler için basamaklı değer olarak atanan model EditForm örneğini temel alan bir EditContext oluşturur. , EditContext hangi alanların değiştirildiğinden ve geçerli doğrulama iletilerinin dahil olduğu düzenleme işlemiyle ilgili meta verileri izler. veya EditForm.Model ataması, bir formu verilere EditForm.EditContext bağlar.

EditForm.Modelataması:

<EditForm Model="@exampleModel" ...>

@code {
    private ExampleModel exampleModel = new() { ... };
}

EditForm.EditContextataması:

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

@code {
    private ExampleModel exampleModel = new() { ... };
    private EditContext editContext;

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

bir 'a EditContext veya Model EditForm atama. Her ikisinin de ataması desteklenmiyor ve çalışma zamanı hatası oluştur:

İşlenemez özel durum işleme bileşeni: EditForm için model parametresi veya EditContext parametresi gerekir ancak her ikisi birden gerekli değildir.

Form gönderimi işleme

, EditForm form gönderimi işleme için aşağıdaki geri çağırmaları sağlar:

• Geçerli OnValidSubmit alanlara sahip bir form göndererek çalıştıracak bir olay işleyicisi atamak için kullanın.
• Geçersiz OnInvalidSubmit alanlara sahip bir form göndererek çalıştırılacak bir olay işleyicisi atamak için kullanın.
• Form OnSubmit alanlarının doğrulama durumundan bağımsız olarak çalıştırmak üzere bir olay işleyicisi atamak için kullanın. Form, olay işleyicisi EditContext.Validate yönteminde çağrılarak doğrulanır. Validate true döndürürse, form geçerli olur.

Yerleşik form bileşenleri

Çerçeve, Blazor kullanıcı girişini almak ve doğrulamak için yerleşik form bileşenleri sağlar. Girişler değiştirildikleri ve bir form gönderildikleri zaman doğrulanır. Kullanılabilir giriş bileşenleri aşağıdaki tabloda gösterilmiştir.

Giriş bileşeni	Olarak işlenir…
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 grup InputRadio<TValue>
InputSelect<TValue>	<select>
InputText	<input>
InputTextArea	<textarea>

Bileşen hakkında daha fazla InputFile bilgi için bkz. BlazorASP.NET Core dosya karşıya yüklemeleri .

dahil olmak üzere tüm giriş bileşenleri EditForm rastgele öznitelikleri destekler. Bir bileşen parametresiyle eşleşmeen öznitelikler işlenmiş HTML öğesine eklenir.

Giriş bileşenleri, alan CSS sınıfını alanın durumunu geçerli veya geçersiz olarak yansıtacak şekilde güncelleştirmek de dahil olmak üzere, bir alanın ne zaman değiştirdiğini doğrulamaya yönelik varsayılan davranış sağlar. Bazı bileşenler yararlı ayrıştırma mantığı içerir. Örneğin, InputDate<TValue> ve InputNumber<TValue> ayrılamaz değerleri doğrulama hataları olarak kaydederek, ayrılamaz değerleri uygun bir şekilde işle. Null değerleri kabul eden türler, hedef alanın null atılabilirliğini de destekler (örneğin, int? null değer atılabilir bir tamsayı için).

Örnek form

Bu makalenin örneklerinden birkaçsında kullanılan aşağıdaki tür, veri ek açıklamalarını kullanarak çeşitli Starship özellikler kümesi tanımlar:

• Identifier , ile ek açıklama ekli olduğundan RequiredAttribute gereklidir. Identifier , kullanılarak en az bir karakter, ancak 16 karakterden uzun bir değer StringLengthAttribute gerektirir.
• Description isteğe bağlıdır çünkü ile ek açıklama ek açıklama RequiredAttribute değildir.
• Classification gereklidir.
• özelliği MaximumAccommodation varsayılan olarak sıfırdır ancak başına bir ile 100.000 arasında bir değer RangeAttribute gerektirir.
• IsValidatedDesign , özelliğin kullanıcı arabiriminde bir onay kutusuna bağlı olduğunda seçilen durumla eşleşen bir true değere sahip olması gerekir ( <input type="checkbox"> ).
• ProductionDate bir ve DateTime gereklidir.

Starship.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16, ErrorMessage = "Identifier too long (16 character limit).")]
    public string? Identifier { 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 modelde tanımlanan özellikler ve Starship doğrulama.
• 'nin Blazor yerleşik form bileşenlerinden birkaçı.

Pages/FormExample2.razor:

@page "/form-example-2"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample2> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" />
        </label>
    </p>

    <button type="submit">Submit</button>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>, 
        &copy;1966-2019 CBS Studios, Inc. and 
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Yukarıdaki EditForm örnekte , atanan örneği ( ) temel alan bir oluşturur ve geçerli bir formu EditContext Starship Model="@starship" işlemektedir. Sonraki örnek FormExample3 (bileşen), bir forma bir atama ve formun ne zaman gönder olduğunu EditContext doğrulamayı gösterir.

Aşağıdaki örnekte:

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

Pages/FormExample3.razor:

@page "/form-example-3"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample3> Logger

<EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

    <button type="submit">Submit</button>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = 
        new()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private EditContext? editContext;

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

    private async Task HandleSubmit()
    {
        if (editContext != null && editContext.Validate())
        {
            Logger.LogInformation("HandleSubmit called: Form is valid");

            // Process the valid form
            // await ...
            await Task.CompletedTask;
        }
        else
        {
            Logger.LogInformation("HandleSubmit called: Form is INVALID");
        }
    }
}

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

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

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

Pages/BindMultipleWithInputSelect.razor:

@page "/bind-multiple-with-inputselect"
@using System.ComponentModel.DataAnnotations 
@using Microsoft.Extensions.Logging
@inject ILogger<BindMultipleWithInputSelect> Logger 

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

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Select classifications (Minimum: 2, Maximum: 3):
            <InputSelect @bind-Value="starship.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>
    </p>

    <button type="submit">Submit</button>
</EditForm>

<p>
    Selected Classifications: 
    @string.Join(", ", starship.SelectedClassification)
</p>

@code {
    private EditContext editContext;
    private Starship starship = new();

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

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");
    }

    private class Starship
    {
        [Required, MinLength(2), MaxLength(3)]
        public Classification[] SelectedClassification { get; set; } =
            new[] { Classification.Diplomacy };
    }

    private enum Classification { Exploration, Diplomacy, Defense, Research }
}

Boş dizelerin ve değerlerin veri bağlamada nasıl işlen olduğu hakkında bilgi için C# nesne null InputSelect değerlerine null bağlama seçenekleri bölümüne bakın.

InputSelectC# nesne değerlerine bağlama null seçenekleri

Boş dizelerin ve değerlerin veri null bağlamada nasıl işli olduğu hakkında bilgi için BlazorASP.NET Core veri bağlama bkz. .

Görünen ad desteği

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

Örnek form bölümünün formunda ( bileşeni) yeni bir yıldız geminin üretim tarihi Starfleet Starship Database FormExample2 görünen ad belirtmez:

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

Alan, formun gönder tarihi geçersizse, hata iletisi kolay bir ad görüntülemez. Doğrulama özette görünen " ve " " alan adının arasında ProductionDate Production boşluk Date yok:

ProductionDate alanı bir tarih olmalıdır.

özelliğini DisplayName " " ve ": sözcükleri arasında boşluk olacak Production şekilde kolay bir ad olarak Date ayarlayın:

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

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

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

Hata iletisi şablon desteği

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

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

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

The {0} field must be a date.

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

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

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

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

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

Üretim tarihi alanında yanlış bir tarih değeri vardır.

Temel doğrulama

Temel form doğrulama senaryolarında bir örnek, EditForm EditContext ValidationMessageStore form alanlarını doğrulamak için tanımlanmış ve örnekleri kullanabilir. OnValidationRequested EditContext Özel doğrulama mantığını yürüten olay için bir işleyici. İşleyicinin sonucu ValidationMessageStore örneği güncelleştirir.

Temel form doğrulaması, form modelinin, formu barındıran bileşen içinde (doğrudan bileşen üzerinde veya bir alt sınıfta Üyeler olarak) tanımlanmış olduğu durumlarda faydalıdır. Bir Doğrulayıcı bileşeni kullanımı, bağımsız bir model sınıfının birkaç bileşen genelinde kullanıldığı durumlarda önerilir.

Aşağıdaki FormExample4 bileşende, HandleValidationRequested işleyici yöntemi, formu doğrulamadan önce çağırarak mevcut tüm doğrulama iletilerini temizler ValidationMessageStore.Clear .

Pages/FormExample4.razor:

@page "/form-example-4"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample4> Logger

<h2>Ship Holodecks</h2>

<EditForm EditContext="editContext" OnValidSubmit="@HandleValidSubmit">
    <label>
        Type 1:
        <InputCheckbox @bind-Value="holodeck.Type1" />
    </label>

    <label>
        Type 2:
        <InputCheckbox @bind-Value="holodeck.Type2" />
    </label>

    <button type="submit">Update</button>

    <ValidationMessage For="() => holodeck.Options" />

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private EditContext? editContext;
    private Holodeck holodeck = new();
    private ValidationMessageStore? messageStore;

    protected override void OnInitialized()
    {
        editContext = new(holodeck);
        editContext.OnValidationRequested += HandleValidationRequested;
        messageStore = new(editContext);
    }

    private void HandleValidationRequested(object? sender, 
        ValidationRequestedEventArgs args)
    {
        messageStore?.Clear();

        // Custom validation logic
        if (!holodeck.Options)
        {
            messageStore?.Add(() => holodeck.Options, "Select at least one.");
        }
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called: Processing the form");

        // Process the form
    }

    public class Holodeck
    {
        public bool Type1 { get; set; }
        public bool Type2 { get; set; }
        public bool Options => Type1 || Type2;
    }

    public void Dispose()
    {
        if (editContext is not null)
        {
            editContext.OnValidationRequested -= HandleValidationRequested;
        }
    }
}

Veri ek açıklamaları Doğrulayıcı bileşeni ve özel doğrulama

DataAnnotationsValidatorBileşen, veri açıklamaları doğrulamasını basamaklı bir şekilde iliştirir EditContext . Veri ek açıklamaları doğrulamasının etkinleştirilmesi DataAnnotationsValidator bileşeni gerektirir. Veri ek açıklamalarıyla farklı bir doğrulama sistemi kullanmak için bileşen yerine özel bir uygulama kullanın DataAnnotationsValidator . İçin Framework uygulamaları, DataAnnotationsValidator başvuru kaynağında İnceleme için kullanılabilir:

• DataAnnotationsValidator
• AddDataAnnotationsValidation.

Blazor iki tür doğrulama gerçekleştirir:

• Alan doğrulama , Kullanıcı bir alanın dışına eklendiğinde gerçekleştirilir. Alan doğrulama sırasında, DataAnnotationsValidator bileşen bildirilen tüm doğrulama sonuçlarını alanla ilişkilendirir.
• Kullanıcı formu gönderdiğinde model doğrulaması gerçekleştirilir. Model doğrulama sırasında, DataAnnotationsValidator Bileşen, doğrulama sonucunun raporlandığı üye adına göre alanı belirlemeyi dener. Tek bir üyeyle ilişkilendirilmeyen doğrulama sonuçları, bir alan yerine modeliyle ilişkilendirilir.

Doğrulayıcı bileşenleri

Doğrulayıcı bileşenleri, form için bir için yöneterek form doğrulamasını destekler ValidationMessageStore EditContext .

BlazorFramework, DataAnnotationsValidator doğrulama özniteliklerine (veri ek açıklamaları)göre formlara doğrulama desteği eklemek için bileşeni sağlar. Farklı formlar için doğrulama mesajlarını aynı sayfada veya farklı form işleme adımlarında aynı biçimde işlemek için özel Doğrulayıcı bileşenleri oluşturabilirsiniz (örneğin, istemci tarafı doğrulaması ve ardından sunucu tarafı doğrulaması). Bu bölümde gösterilen Doğrulayıcı bileşeni örneği, CustomValidation Bu makalenin aşağıdaki bölümlerinde kullanılır:

• Doğrulayıcı bileşeniyle iş mantığı doğrulaması
• Doğrulayıcı bileşeniyle sunucu doğrulaması

Bir doğrulayıcı bileşeni oluştur ComponentBase :

• Form, EditContext bileşenin geçişli bir parametresidir .
• Doğrulayıcı bileşeni başlatıldığında, ValidationMessageStore form hatalarının geçerli bir listesini korumak için yeni bir oluşturulur.
• İleti deposu, form bileşenindeki geliştirici kodu yöntemi çağırdığında hata alır DisplayErrors . Hatalar, DisplayErrors içindeki yöntemine geçirilir Dictionary<string, List<string>> . Sözlükte, anahtar bir veya daha fazla hata içeren form alanının adıdır. Değer, hata listesidir.
• Aşağıdakilerden herhangi biri oluştuğunda iletiler temizlenir:
  • EditContextOlay oluşturulduğunda doğrulama istenir OnValidationRequested . Tüm hatalar temizlenir.
  • Olay ortaya çıktığında formdaki bir alan değişir OnFieldChanged . Yalnızca alanın hataları temizlenir.
  • ClearErrorsYöntemi geliştirici kodu tarafından çağrılır. Tüm hatalar temizlenir.

CustomValidation.cs (bir test uygulamasında kullanılıyorsa, ad alanını BlazorSample uygulamanın ad alanıyla eşleşecek şekilde değiştirin):

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

namespace BlazorSample
{
    public class CustomValidation : ComponentBase
    {
        private ValidationMessageStore? messageStore;
    
        [CascadingParameter]
        private EditContext? CurrentEditContext { get; set; }
    
        protected override void OnInitialized()
        {
            if (CurrentEditContext is null)
            {
                throw new InvalidOperationException(
                    $"{nameof(CustomValidation)} requires a cascading " +
                    $"parameter of type {nameof(EditContext)}. " +
                    $"For example, you can use {nameof(CustomValidation)} " +
                    $"inside an {nameof(EditForm)}.");
            }
    
            messageStore = new(CurrentEditContext);
    
            CurrentEditContext.OnValidationRequested += (s, e) => 
                messageStore?.Clear();
            CurrentEditContext.OnFieldChanged += (s, e) => 
                messageStore?.Clear(e.FieldIdentifier);
        }
    
        public void DisplayErrors(Dictionary<string, List<string>> errors)
        {
            if (CurrentEditContext is not null)
            {
                foreach (var err in errors)
                {
                    messageStore?.Add(CurrentEditContext.Field(err.Key), err.Value);
                }
    
                CurrentEditContext.NotifyValidationStateChanged();
            }
        }
    
        public void ClearErrors()
        {
            messageStore?.Clear();
            CurrentEditContext?.NotifyValidationStateChanged();
        }
    }
}

Doğrulayıcı bileşeniyle iş mantığı doğrulaması

Genel iş mantığı doğrulaması için, bir sözlükte form hataları alan bir Doğrulayıcı bileşeni kullanın.

Temel doğrulama , form modelinin, formu barındıran bileşen içinde (doğrudan bileşen üzerinde veya bir alt sınıfta Üyeler olarak) tanımlanmış olduğu durumlarda faydalıdır. Bir doğrulayıcı bileşeni kullanımı, bağımsız bir model sınıfının birkaç bileşen genelinde kullanıldığı durumlarda önerilir.

Aşağıdaki örnekte:

• Starfleet Starship DatabaseÖrnek form bölümündeki formun kısaltılmış bir sürümü ( FormExample2 Bileşen) yalnızca starsevk 'in sınıflandırmasını ve açıklamasını kabul eden kullanılır. Bileşen forma dahil olmadığından, form gönderimi sırasında veri ek açıklaması doğrulaması tetiklenmez DataAnnotationsValidator .
• CustomValidationBu makalenin Doğrulayıcı bileşenleri bölümündeki bileşen kullanılır.
• DescriptionKullanıcı " Defense " teslim sınıflandırması () seçerse, doğrulama için bir değer gerekir () Classification .

Bir bileşende doğrulama iletileri ayarlandığında, bu, doğrulayıcının ValidationMessageStore ve EditForm doğrulama özetinde gösterilir.

Pages/FormExample5.razor:

@page "/form-example-5"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample5> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>

    <button type="submit">Submit</button>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private CustomValidation? customValidation;
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        customValidation?.ClearErrors();

        var errors = new Dictionary<string, List<string>>();

        if (starship.Classification == "Defense" &&
                string.IsNullOrEmpty(starship.Description))
        {
            errors.Add(nameof(starship.Description),
                new() { "For a 'Defense' ship classification, " +
                "'Description' is required." });
        }

        if (errors.Any())
        {
            customValidation?.DisplayErrors(errors);
        }
        else
        {
            Logger.LogInformation("HandleValidSubmit called: Processing the form");

            // Process the valid form
        }
    }
}

Doğrulayıcı bileşeniyle sunucu doğrulaması

İstemci tarafı doğrulamasına ek olarak sunucu doğrulaması desteklenir:

• Bileşeniyle birlikte istemci tarafı doğrulamayı işleyin DataAnnotationsValidator .
• Form, istemci tarafı doğrulaması ( OnValidSubmit çağrıldığında) geçtiğinde, EditContext.Model Form işleme için bir arka uç sunucu API 'sine gönderin.
• Sunucuda işlem modeli doğrulaması.
• Sunucu API 'SI, geliştirici tarafından sağlanan yerleşik Framework veri ek açıklamaları doğrulama ve özel doğrulama mantığını içerir. Sunucuda doğrulama başarılı olursa, formu işleyin ve bir başarı durum kodu () geri gönderin 200 - OK . Doğrulama başarısız olursa, bir hata durum kodu ( 400 - Bad Request ) ve alan doğrulama hatası döndürün.
• Başarı durumunda formu devre dışı bırakın ya da hataları görüntüleyin.

Temel doğrulama , form modelinin, formu barındıran bileşen içinde (doğrudan bileşen üzerinde veya bir alt sınıfta Üyeler olarak) tanımlanmış olduğu durumlarda faydalıdır. Bir doğrulayıcı bileşeni kullanımı, bağımsız bir model sınıfının birkaç bileşen genelinde kullanıldığı durumlarda önerilir.

Aşağıdaki örnek temel alınarak verilmiştir:

• Blazor WebAssembly Blazor WebAssembly Proje şablonundanoluşturulmuş bir barındırılan çözüm. Yaklaşım, Blazor barındırılan Blazor WebAssembly güvenlik belgelerindeaçıklanan Güvenli barındırılan çözümlerin herhangi biri için desteklenir.
• Starship Starship.cs Örnek form bölümündeki model ().
• CustomValidation Doğrulayıcı bileşenleri bölümünde gösterilen bileşen.

Starship Starship.cs Shared Hem istemci hem de sunucu uygulamalarının modeli kullanabilmesi için modeli () çözümün projesine yerleştirin. Ad alanını paylaşılan uygulamanın ad alanıyla eşleşecek şekilde ekleyin veya güncelleştirin (örneğin, namespace BlazorSample.Shared ). Model veri ek açıklamaları gerektirdiğinden, System.ComponentModel.Annotations projenin proje dosyasına bir paket başvurusu ekleyin Shared :

<ItemGroup>
  <PackageReference Include="System.ComponentModel.Annotations" Version="{VERSION}" />
</ItemGroup>

yer tutucunun paketin en son önizleme dışı sürümünü öğrenmek için {VERSION} System.ComponentModel.Annotations NuGet. orgkonumundaki paket sürümü geçmişine bakın.

Server Projede, starsevkiyat doğrulama isteklerini işlemek için bir denetleyici ekleyin ve başarısız doğrulama iletilerini geri döndürün. usingProje için son deyimdeki ad alanlarını Shared ve namespace Controller sınıfı için güncelleştirin. Veri ek açıklamaları doğrulamasına (istemci tarafı ve sunucu tarafı) ek olarak, denetleyici, Description Kullanıcı sevk sınıflandırmasını () seçerse, sevkıyat açıklaması () için bir değer sağlandığını doğrular Defense Classification .

DefenseGelecek form, form sunucuya gönderildiğinde aynı doğrulama istemci tarafında gerçekleşmediğinden, teslim sınıflandırması için doğrulama yalnızca denetleyicide sunucu tarafında gerçekleşir. İstemci tarafı doğrulaması olmadan sunucu tarafı doğrulama, sunucuda Kullanıcı girişinin özel iş mantığı doğrulamasını gerektiren uygulamalarda ortaktır. Örneğin, bir kullanıcı için depolanan verilerin özel bilgileri Kullanıcı girişini doğrulamak için gerekli olabilir. Özel veriler, istemci tarafı doğrulama için istemciye açıkça gönderilemez.

Controllers/StarshipValidation.cs:

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Microsoft.Identity.Web.Resource;
using BlazorSample.Shared;

namespace BlazorSample.Server.Controllers
{
    [Authorize]
    [ApiController]
    [Route("[controller]")]
    public class StarshipValidationController : ControllerBase
    {
        private readonly ILogger<StarshipValidationController> logger;

        public StarshipValidationController(
            ILogger<StarshipValidationController> logger)
        {
            this.logger = logger;
        }

        static readonly string[] scopeRequiredByApi = new[] { "API.Access" };

        [HttpPost]
        public async Task<IActionResult> Post(Starship starship)
        {
            HttpContext.VerifyUserHasAnyAcceptedScope(scopeRequiredByApi);

            try
            {
                if (starship.Classification == "Defense" && 
                    string.IsNullOrEmpty(starship.Description))
                {
                    ModelState.AddModelError(nameof(starship.Description),
                        "For a 'Defense' ship " +
                        "classification, 'Description' is required.");
                }
                else
                {
                    logger.LogInformation("Processing the form asynchronously");

                    // Process the valid form
                    // async ...

                    return Ok(ModelState);
                }
            }
            catch (Exception ex)
            {
                logger.LogError("Validation Error: {Message}", ex.Message);
            }

            return BadRequest(ModelState);
        }
    }
}

Barındırılan bir uygulamada önceki denetleyiciyi kullanıyorsanız Blazor WebAssembly , ad alanını ( BlazorSample.Server.Controllers ) uygulamanın denetleyiciler ad alanıyla eşleşecek şekilde güncelleştirin.

Sunucuda bir model bağlama doğrulama hatası oluştuğunda, ApiController ( ApiControllerAttribute ) normalde ile varsayılan hatalı istek yanıtı döndürür ValidationProblemDetails . Yanıt, formun tüm alanları Starfleet Starship Database gönderilmediğinde ve form doğrulanamazsa, aşağıdaki örnekte gösterildiği gibi, yalnızca doğrulama hatalarından daha fazla veri içerir:

{
  "title": "One or more validation errors occurred.",
  "status": 400,
  "errors": {
    "Identifier": ["The Identifier field is required."],
    "Classification": ["The Classification field is required."],
    "IsValidatedDesign": ["This form disallows unapproved ships."],
    "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
  }
}

Sunucu API 'SI önceki varsayılan JSON yanıtını döndürürse, istemci, errors form doğrulama hatası işleme için düğümün alt öğelerini elde etmek üzere geliştirici kodundaki yanıtı ayrıştırabilmesi mümkündür. Dosyayı ayrıştırmaya yönelik geliştirici kodu yazmak uygun değildir. JSON el ile ayrıştırılırken, Dictionary<string, List<string>> çağrıldıktan sonra bir hata üretme gerekir ReadFromJsonAsync . İdeal olarak, sunucu API 'SI yalnızca doğrulama hatalarını döndürmelidir:

{
  "Identifier": ["The Identifier field is required."],
  "Classification": ["The Classification field is required."],
  "IsValidatedDesign": ["This form disallows unapproved ships."],
  "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
}

Sunucu API 'sinin yanıtını yalnızca doğrulama hatalarını döndürecek şekilde değiştirmek için, içinde ile açıklanmakta olan eylemlerde çağrılan temsilciyi değiştirin ApiControllerAttribute Program.cs . API uç noktası ( /StarshipValidation ) için ile bir döndürür BadRequestObjectResult ModelStateDictionary . Diğer API uç noktaları için, nesne sonucunu yeni bir ile döndürerek varsayılan davranışı koruyun ValidationProblemDetails .

Microsoft.AspNetCore.MvcAd alanını uygulamadaki dosyanın en üstüne ekleyin Program.cs Server :

using Microsoft.AspNetCore.Mvc;

İçinde Program.cs , AddControllersWithViews genişletme yöntemini bulun ve aşağıdaki çağrıyı öğesine ekleyin ConfigureApiBehaviorOptions :

builder.Services.AddControllersWithViews()
    .ConfigureApiBehaviorOptions(options =>
    {
        options.InvalidModelStateResponseFactory = context =>
        {
            if (context.HttpContext.Request.Path == "/StarshipValidation")
            {
                return new BadRequestObjectResult(context.ModelState);
            }
            else
            {
                return new BadRequestObjectResult(
                    new ValidationProblemDetails(context.ModelState));
            }
        };
    });

Daha fazla bilgi için bkz. Web API'ASP.NET Core hataları işleme.

Client Projesinde, CustomValidation Doğrulayıcı bileşenleri bölümünde gösterilen bileşeni ekleyin. Ad alanını uygulamayla eşleşecek şekilde güncelleştirin (örneğin, namespace BlazorSample.Client ).

Client Projesinde, Starfleet Starship Database form, bileşen yardımı ile sunucu doğrulama hatalarını gösterecek şekilde güncelleştirilir CustomValidation . Sunucu API 'SI doğrulama iletileri döndürdüğünde, bileşen öğesine eklenir CustomValidation ValidationMessageStore . Hatalar formun EditContext doğrulama özeti tarafından görüntülenmek üzere formunda kullanılabilir.

Aşağıdaki FormExample6 bileşende, Shared projenin () ad alanını @using BlazorSample.Shared paylaşılan projenin ad alanı olarak güncelleştirin. Formun yetkilendirme gerektirdiğini, bu nedenle kullanıcının forma gitmek için uygulamada oturum açmış olması gerektiğini unutmayın.

Pages/FormExample6.razor:

@page "/form-example-6"
@using System.Net
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.Extensions.Logging
@using BlazorSample.Shared
@attribute [Authorize]
@inject HttpClient Http
@inject ILogger<FormExample6> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification" disabled="@disabled">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" disabled="@disabled" />
        </label>
    </p>

    <button type="submit" disabled="@disabled">Submit</button>

    <p style="@messageStyles">
        @message
    </p>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private bool disabled;
    private string message;
    private string messageStyles = "visibility:hidden";
    private CustomValidation customValidation;
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private async Task HandleValidSubmit(EditContext editContext)
    {
        customValidation.ClearErrors();

        try
        {
            var response = await Http.PostAsJsonAsync<Starship>(
                "StarshipValidation", (Starship)editContext.Model);

            var errors = await response.Content
                .ReadFromJsonAsync<Dictionary<string, List<string>>>();

            if (response.StatusCode == HttpStatusCode.BadRequest && 
                errors.Any())
            {
                customValidation.DisplayErrors(errors);
            }
            else if (!response.IsSuccessStatusCode)
            {
                throw new HttpRequestException(
                    $"Validation failed. Status Code: {response.StatusCode}");
            }
            else
            {
                disabled = true;
                messageStyles = "color:green";
                message = "The form has been processed.";
            }
        }
        catch (AccessTokenNotAvailableException ex)
        {
            ex.Redirect();
        }
        catch (Exception ex)
        {
            Logger.LogError("Form processing error: {Message}", ex.Message);
            disabled = true;
            messageStyles = "color:red";
            message = "There was an error processing the form.";
        }
    }
}

InputText Giriş olayına göre

InputTextOlayı yerine olayını kullanan özel bir bileşen oluşturmak için bileşenini kullanın input change . inputHer tuş vuruşunda olay tetikleyicileri alan doğrulamasının kullanımı.

Aşağıdaki örnek ExampleModel sınıfını kullanır.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string? Name { get; set; }
}

Aşağıdaki CustomInputText bileşen Framework bileşenini devralır ve olaya InputText olay bağlamayı ayarlar oninput .

Shared/CustomInputText.razor:

@inherits InputText

<input @attributes="AdditionalAttributes" 
       class="@CssClass" 
       @bind="CurrentValueAsString" 
       @bind:event="oninput" />

CustomInputTextBileşen her yerde kullanılabilir InputText . Aşağıdaki FormExample7 bileşen paylaşılan CustomInputText bileşeni kullanır.

Pages/FormExample7.razor:

@page "/form-example-7"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample7> Logger

<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <CustomInputText @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>

<p>
    CurrentValue: @exampleModel.Name
</p>

@code {
    private ExampleModel exampleModel = new();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Radyo düğmeleri

Bu bölümdeki örnek, Starfleet Starship Database Bu makalenin örnek form bölümünün biçimini temel alır.

Aşağıdaki enum türleri uygulamaya ekleyin. Bunları tutacak yeni bir dosya oluşturun veya Starship.cs dosyayı dosyaya ekleyin.

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

Şu enums şekilde erişilebilir yapın:

• Starship içindeki model Starship.cs (örneğin, using static ComponentEnums; enums sınıfının adı ise ComponentEnums ).
• Starfleet Starship Database Form (örneğin, @using static ComponentEnums numaralandırmalar sınıfı olarak adlandırılmışsa ComponentEnums ).

InputRadio<TValue> InputRadioGroup<TValue> Radyo düğmesi grubu oluşturmak için bileşeni olan bileşenleri kullanın. Aşağıdaki örnekte, Özellikler Starship örnek formu 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;

Starfleet Starship DatabaseForm ( FormExample2 Bileşen) öğesini örnek form bölümünden güncelleştirin. Üretilecek bileşenleri ekleyin:

• Sevk üreticisi için bir radyo düğmesi grubu.
• Motor ve gönderim rengi için iç içe bir radyo düğmesi grubu.

<p>
    <InputRadioGroup @bind-Value="starship.Manufacturer">
        Manufacturer:
        <br>
        @foreach (var manufacturer in (Manufacturer[])Enum
            .GetValues(typeof(Manufacturer)))
        {
            <InputRadio Value="manufacturer" />
            <text>&nbsp;</text>@manufacturer<br>
        }
    </InputRadioGroup>
</p>
<p>
    Select one engine and one color. Recommendations are paired but any 
    combination of engine and color is allowed:<br>
    <InputRadioGroup Name="engine" @bind-Value="starship.Engine">
        <InputRadioGroup Name="color" @bind-Value="starship.Color">
            <InputRadio Name="engine" Value="Engine.Ion" />
            Engine: Ion<br>
            <InputRadio Name="color" Value="Color.ImperialRed" />
            Color: Imperial Red<br><br>
            <InputRadio Name="engine" Value="Engine.Plasma" />
            Engine: Plasma<br>
            <InputRadio Name="color" Value="Color.SpacecruiserGreen" />
            Color: Spacecruiser Green<br><br>
            <InputRadio Name="engine" Value="Engine.Fusion" />
            Engine: Fusion<br>
            <InputRadio Name="color" Value="Color.StarshipBlue" />
            Color: Starship Blue<br><br>
            <InputRadio Name="engine" Value="Engine.Warp" />
            Engine: Warp<br>
            <InputRadio Name="color" Value="Color.VoyagerOrange" />
            Color: Voyager Orange
        </InputRadioGroup>
    </InputRadioGroup>
</p>

Doğrulama özeti ve doğrulama Iletisi bileşenleri

ValidationSummaryBileşen, doğrulama özeti etiketi Yardımcısı'na benzer olan tüm doğrulama iletilerini özetler:

<ValidationSummary />

Parametresi ile belirli bir model için çıkış doğrulama iletileri Model :

<ValidationSummary Model="@starship" />

ValidationMessage<TValue>Bileşeni, doğrulama Iletisi etiketi Yardımcısı'na benzer şekilde belirli bir alan için doğrulama iletileri görüntüler. Özniteliği ile doğrulama için alanı For ve model özelliğini adlandırırken bir lambda ifadesini belirtin:

<ValidationMessage For="@(() => starship.MaximumAccommodation)" />

ValidationMessage<TValue>Ve ValidationSummary bileşenleri, rastgele öznitelikleri destekler. Bir bileşen parametresiyle eşleşmeyen herhangi bir öznitelik oluşturulan <div> or <ul> öğesine eklenir.

Uygulamanın stil sayfasındaki (veya) doğrulama iletilerinin stilini denetleyin wwwroot/css/app.css wwwroot/css/site.css . Varsayılan validation-message sınıf, doğrulama iletilerinin metin rengini kırmızı olarak ayarlar:

.validation-message {
    color: red;
}

Özel doğrulama öznitelikleri

Bir doğrulama sonucunun özel bir doğrulama özniteliğikullanılırken bir alanla doğru şekilde ilişkilendirildiğinden emin olmak için, oluştururken doğrulama bağlamını geçirin MemberName ValidationResult .

CustomValidator.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class CustomValidator : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, 
        ValidationContext validationContext)
    {
        ...

        return new ValidationResult("Validation message to user.",
            new[] { validationContext.MemberName });
    }
}

Özel doğrulama CSS sınıfı öznitelikleri

Özel doğrulama CSS sınıfı öznitelikleri, önyüklemegibi CSS çerçeveleri ile tümleştirilirken faydalıdır.

Aşağıdaki örnek ExampleModel sınıfını kullanır.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string? Name { get; set; }
}

Özel doğrulama CSS sınıfı özniteliklerini belirtmek için, özel doğrulama için CSS stilleri sağlayarak ' ı başlatın. Aşağıdaki örnekte, geçerli ( validField ) ve geçersiz ( invalidField ) stilleri belirtilmiştir.

wwwroot/css/app.css ( Blazor WebAssembly ) veya wwwroot/css/site.css (Blazor Server):

.validField {
    border-color: lawngreen;
}

.invalidField {
    background-color: tomato;
}

Alan doğrulama iletilerini denetleyerek ondan türetilmiş bir sınıf oluşturun FieldCssClassProvider ve uygun geçerli veya geçersiz stili uygular.

CustomFieldClassProvider.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, 
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        return isValid ? "validField" : "invalidField";
    }
}

Sınıfını, CustomFieldClassProvider form ÖRNEĞINDEKI CSS sınıfı sağlayıcı olarak ayarlayın EditContext SetFieldCssClassProvider .

Pages/FormExample8.razor:

@page "/form-example-8"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample8> Logger

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>

@code {
    private ExampleModel exampleModel = new();
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        editContext = new(exampleModel);
        editContext.SetFieldCssClassProvider(new CustomFieldClassProvider());
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Önceki örnek, tüm form alanlarının geçerliliğini denetler ve her alana bir stil uygular. Form yalnızca alanların bir alt kümesine özel stiller uygulayabilmelidir, CustomFieldClassProvider stilleri koşullu olarak uygulayın. Aşağıdaki CustomFieldClassProvider2 örnek yalnızca alana bir stil uygular Name . Adları eşleşmeyen tüm alanlar için Name string.Empty döndürülür ve hiçbir stil uygulanmaz.

CustomFieldClassProvider2.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider2 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        if (fieldIdentifier.FieldName == "Name")
        {
            var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

            return isValid ? "validField" : "invalidField";
        }

        return string.Empty;
    }
}

İçin ek bir özellik ekleyin ExampleModel , örneğin:

[StringLength(10, ErrorMessage = "Description is too long.")]
public string Description { get; set; } 

Description ExampleForm7 Bileşenini bileşenin formuna ekleyin:

<InputText id="description" @bind-Value="exampleModel.Description" />

EditContext OnInitialized Yenı alan CSS sınıfı sağlayıcısını kullanmak için bileşenin yöntemindeki örneği güncelleştirin:

editContext.SetFieldCssClassProvider(new CustomFieldClassProvider2());

Bir CSS doğrulama sınıfı Description alana () uygulanmadığından id="description" , stili stilsiz değildir. Ancak, alan doğrulama normal şekilde çalışır. 10 ' dan fazla karakter sağlandıysa, doğrulama özeti hatayı gösterir:

Açıklama çok uzun.

Aşağıdaki örnekte:

• Özel CSS stili Name alana uygulanır.

• Diğer tüm alanlar Blazor , varsayılan mantığa benzer mantığı uygular ve Blazor , veya ile varsayılan alan CSS doğrulama stillerini modified kullanmaktır valid invalid . Varsayılan stiller için, uygulama bir proje şablonunu temel alıyorsa, bunları uygulamanın stil sayfasına eklemeniz gerekmediğini unutmayın Blazor . Proje şablonunu temel alan uygulamalar için Blazor , varsayılan stiller uygulamanın stil sayfasına eklenebilir:

  .valid.modified:not([type=checkbox]) {
      outline: 1px solid #26b050;
  }
  
  .invalid {
      outline: 1px solid red;
  }
  

CustomFieldClassProvider3.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider3 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        if (fieldIdentifier.FieldName == "Name")
        {
            return isValid ? "validField" : "invalidField";
        }
        else
        {
            if (editContext.IsModified(fieldIdentifier))
            {
                return isValid ? "modified valid" : "modified invalid";
            }
            else
            {
                return isValid ? "valid" : "invalid";
            }
        }
    }
}

EditContext OnInitialized ÖNCEKI alan CSS sınıfı sağlayıcısını kullanmak için bileşenin yöntemindeki örneği güncelleştirin:

editContext.SetFieldCssClassProvider(new CustomFieldClassProvider3());

Şunu kullanarak CustomFieldClassProvider3 :

• NameAlan, uygulamanın özel doğrulama CSS stillerini kullanır.
• DescriptionAlan, mantığa benzer mantığı Blazor ve Blazor varsayılan alan CSS doğrulama stillerini kullanır.

Blazor veri ek açıklamaları doğrulama paketi

, Microsoft.AspNetCore.Components.DataAnnotations.Validation Bileşeni kullanarak doğrulama deneyimini boşlukları dolduran bir pakettir DataAnnotationsValidator . Paketi şu anda deneyseldir.

İç içe geçmiş modeller, koleksiyon türleri ve karmaşık türler

Blazor yerleşik ile veri ek açıklamalarını kullanarak form girişini doğrulama desteği DataAnnotationsValidator sağlar. Ancak, yalnızca koleksiyon veya karmaşık tür özellikleri olmayan forma bağlı modelin üst DataAnnotationsValidator düzey özelliklerini doğrular.

Bağlı modelin koleksiyon ve karmaşık tür özellikleri de dahil olmak üzere nesne grafın tamamını doğrulamak için deneysel ObjectGraphDataAnnotationsValidator paket tarafından sağlanan nesnesini Microsoft.AspNetCore.Components.DataAnnotations.Validation kullanın:

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
    <ObjectGraphDataAnnotationsValidator />
    ...
</EditForm>

ile model özelliklerine açıklama ek açıklama. [ValidateComplexType] Aşağıdaki model sınıflarında sınıfı, modelin forma ne zaman bağlı olduğunu ShipDescription doğrulamak için ek veri ek açıklamaları içerir:

Starship.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    ...

    [ValidateComplexType]
    public ShipDescription ShipDescription { get; set; } = new();

    ...
}

ShipDescription.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class ShipDescription
{
    [Required]
    [StringLength(40, ErrorMessage = "Description too long (40 char).")]
    public string ShortDescription { get; set; }

    [Required]
    [StringLength(240, ErrorMessage = "Description too long (240 char).")]
    public string LongDescription { get; set; }
}

Form doğrulamasına göre gönder düğmesini etkinleştirme

Form doğrulamaya göre gönder düğmesini etkinleştirmek ve devre dışı bırakmak için aşağıdaki örnek:

• Önceki formun (bileşen) yalnızca gemi tanımlayıcısı için bir değer kabul eden Starfleet Starship Database FormExample2 kısaltılmış bir sürümünü kullanır. Türün Starship bir örneği oluşturulduğunda diğer özellikler geçerli varsayılan Starship değerleri alır.
• Bileşen başlatılırken EditContext modeli atamak için formun 'larını kullanır.
• Gönder düğmesini etkinleştirmek ve devre dışı bırakmak OnFieldChanged için bağlamın geri çağırmada formu doğrular.
• yönteminde IDisposable olay işleyicisini uygulayan ve aboneliğini Dispose kaldıran. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Pages/FormExample9.razor:

@page "/form-example-9"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample9> Logger

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private Starship starship = 
        new()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private bool formInvalid = false;
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        editContext = new(starship);
        editContext.OnFieldChanged += HandleFieldChanged;
    }

    private void HandleFieldChanged(object? sender, FieldChangedEventArgs e)
    {
        if (editContext is not null)
        {
            formInvalid = !editContext.Validate();
            StateHasChanged();
        }
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }

    public void Dispose()
    {
        if (editContext is not null)
        {
            editContext.OnFieldChanged -= HandleFieldChanged;
        }
    }
}

Bir form geçerli değerlerle önceden yüklenmemişse ve form yüklemede düğmeyi devre dışı bırakmak Submit isterseniz olarak formInvalid true ayarlayın.

Önceki yaklaşımın yan etkisi, kullanıcı herhangi bir alanla etkileşime girdikten sonra doğrulama özetinin (bileşen) geçersiz ValidationSummary alanlarla doldurulmasıdır. Bu senaryoyu aşağıdaki yöntemlerden birini kullanabilirsiniz:

• Formda bileşen ValidationSummary kullanma.
• Gönder ValidationSummary düğmesi seçildiğinde bileşeni görünür hale (örneğin, bir HandleValidSubmit yöntemde).

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary style="@displaySummary" />

    ...

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private string displaySummary = "display:none";

    ...

    private void HandleValidSubmit()
    {
        displaySummary = "display:block";
    }
}

Sorun giderme

InvalidOperationException: EditForm için model parametresi veya EditContext parametresi gerekir ancak her ikisi birden gerekli değildir.

bir veya EditForm atadığınız Model onaylayın. EditContext Aynı form için her ikisini birden kullanmayın.

uygulamasına Model atarken, aşağıdaki örnekte olduğu gibi model türünün örneği ekli olduğunu onaylayın:

private ExampleModel exampleModel = new();

Ek kaynaklar

• BlazorASP.NET Core dosya karşıya yüklemeleri
• ASP.NET Core Blazor WebAssembly barındırılan bir uygulamanın güvenliğini Azure Active Directory
• Blazor WebAssemblyAzure Active Directory B2C ile ASP.NET Core barındırılan bir uygulamanın güvenliğini sağlama
• barındırılan bir ASP.NET Core Blazor WebAssembly uygulamasının sunucuyla güvenliğini Identity sağlama

Çerçeve, Blazor veri ek açıklamalarını kullanan bir modele bağlı bileşeni kullanarak doğrulama ile web EditForm formlarını destekler.

Bir bileşenin veri EditForm açıklamaları doğrulamasıyla nasıl çalıştığını göstermek için aşağıdaki türü göz önünde ExampleModel bulundurabilirsiniz. özelliği Name ile gerekli olarak işaretlenir ve maksimum dize uzunluğu sınırını ve hata iletisini RequiredAttribute StringLengthAttribute belirtir.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string Name { get; set; }
}

Form, çerçevenin Blazor bileşeni kullanılarak EditForm tanımlanır. Aşağıdaki bileşen, bir webformu önceki türe bağlı bir bileşen kullanarak işlemek için tipik Razor Razor EditForm öğeleri, bileşenleri ve kodu ExampleModel gösterir.

Pages/FormExample1.razor:

@page "/form-example-1"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample1> Logger

<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>

@code {
    private ExampleModel exampleModel = new();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Yukarıdaki FormExample1 bileşende:

• Bileşen, EditForm öğenin göründüğü <EditForm> yerde işlenir.
• Model bileşenin bloğunda oluşturulur @code ve özel bir alanda ( ) exampleModel oluşturulur. alanı, öğesinin EditForm.Model özniteliğine ( Model ) <EditForm> atanır.
• bileşeni InputText ( ) dize değerlerini id="name" düzenlemeye uygun bir giriş bileşenidir. @bind-Valueyönergesi özniteliği exampleModel.Name model özelliğini bileşenin InputText özelliğine Value bağlar.
• HandleValidSubmityöntemine OnValidSubmit atanır. Form doğrulamayı geçerse işleyici çağrılır.
• Veri ek açıklamaları doğrulayıcı DataAnnotationsValidator † (bileşen), veri ek açıklamalarını kullanarak doğrulama desteği sağlar:
  • Düğme seçildiğinde form alanı boş bırakılırsa doğrulama özette ( bileşen ) (" ") bir <input> Submit hata görünür ve ValidationSummary ‡ The Name field is required. HandleValidSubmit çağrılmamıştır.
  • Düğme seçildiğinde form alanı on karakterden fazla karakter içeriyorsa doğrulama özette (" ") bir <input> Submit hata görünür ve Name is too long. HandleValidSubmit çağrılmamıştır.
  • Düğme <input> seçildiğinde form alanı geçerli bir değer Submit içeriyorsa HandleValidSubmit çağrılır.

†Bileşen DataAnnotationsValidator Validator bileşeni bölümünde ele almaktadır. ‡Bileşen ValidationSummary Doğrulama Özeti ve Doğrulama İletisi bileşenleri bölümünde ele alır. Özellik bağlama hakkında daha fazla bilgi için bkz. BlazorASP.NET Core veri bağlama .

Formu bağlama

, formda diğer bileşenler için basamaklı değer olarak atanan model EditForm örneğini temel alan bir EditContext oluşturur. , hangi alanların değiştiril olduğu ve geçerli doğrulama iletileri de EditContext dahil olmak üzere düzenleme işlemiyle ilgili meta verileri izler. veya ataması EditForm.Model bir EditForm.EditContext forma veriye bağlanabilir.

EditForm.Modelataması:

<EditForm Model="@exampleModel" ...>

@code {
    private ExampleModel exampleModel = new() { ... };
}

EditForm.EditContextataması:

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

@code {
    private ExampleModel exampleModel = new() { ... };
    private EditContext editContext;

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

bir 'a EditContext veya Model EditForm atama. Her ikisinin de ataması desteklenmiyor ve çalışma zamanı hatası oluştur:

İşlenemez özel durum işleme bileşeni: EditForm için model parametresi veya EditContext parametresi gerekir ancak her ikisi birden gerekli değildir.

Form gönderimi işleme

, EditForm form gönderimi işleme için aşağıdaki geri çağırmaları sağlar:

• Geçerli OnValidSubmit alanlara sahip bir form göndererek çalıştıracak bir olay işleyicisi atamak için kullanın.
• Geçersiz OnInvalidSubmit alanlara sahip bir form göndererek çalıştırılacak bir olay işleyicisi atamak için kullanın.
• Form OnSubmit alanlarının doğrulama durumundan bağımsız olarak çalıştırmak üzere bir olay işleyicisi atamak için kullanın. Form, olay işleyicisi EditContext.Validate yönteminde çağrılarak doğrulanır. Validate true döndürürse, form geçerli olur.

Yerleşik form bileşenleri

Çerçeve, Blazor kullanıcı girişini almak ve doğrulamak için yerleşik form bileşenleri sağlar. Girişler değiştirildikleri ve bir form gönderildikleri zaman doğrulanır. Kullanılabilir giriş bileşenleri aşağıdaki tabloda gösterilmiştir.

Giriş bileşeni	Olarak işlenir…
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 grup InputRadio<TValue>
InputSelect<TValue>	<select>
InputText	<input>
InputTextArea	<textarea>

Bileşen hakkında daha fazla InputFile bilgi için bkz. BlazorASP.NET Core dosya karşıya yüklemeleri .

dahil olmak üzere tüm giriş bileşenleri EditForm rastgele öznitelikleri destekler. Bir bileşen parametresiyle eşleşmeen öznitelikler işlenmiş HTML öğesine eklenir.

Giriş bileşenleri, alan CSS sınıfını alanın durumunu geçerli veya geçersiz olarak yansıtacak şekilde güncelleştirmek de dahil olmak üzere, bir alanın ne zaman değiştirdiğini doğrulamaya yönelik varsayılan davranışı sağlar. Bazı bileşenler yararlı ayrıştırma mantığı içerir. Örneğin, InputDate<TValue> ve InputNumber<TValue> ayrılamaz değerleri doğrulama hataları olarak kaydederek, ayrılamaz değerleri uygun bir şekilde işle. Null değerleri kabul eden türler, hedef alanın null atılabilirliğini de destekler (örneğin, int? null değer atılabilir bir tamsayı için).

Örnek form

Bu makalenin örneklerinden birkaçsında kullanılan aşağıdaki tür, veri ek açıklamalarını kullanarak çeşitli Starship özellikler kümesi tanımlar:

• Identifier , ile ek açıklama ekli olduğundan RequiredAttribute gereklidir. Identifier , kullanılarak en az bir karakter, ancak 16 karakterden uzun bir değer StringLengthAttribute gerektirir.
• Description isteğe bağlıdır çünkü ile ek açıklama ek açıklama RequiredAttribute değildir.
• Classification gereklidir.
• özelliği MaximumAccommodation varsayılan olarak sıfırdır ancak başına bir ile 100.000 arasında bir değer RangeAttribute gerektirir.
• IsValidatedDesign özelliğin kullanıcı arabiriminde ( ) bir onay kutusuna bağlı olduğunda seçili bir durumla true eşleşen bir değere sahip olması <input type="checkbox"> gerekir.
• ProductionDate bir ve DateTime gereklidir.

Starship.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16, ErrorMessage = "Identifier too long (16 character limit).")]
    public string Identifier { 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 modelde tanımlanan özellikler ve Starship doğrulama.
• 'nin Blazor yerleşik form bileşenlerinden birkaçı.

Pages/FormExample2.razor:

@page "/form-example-2"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample2> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" />
        </label>
    </p>

    <button type="submit">Submit</button>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>, 
        &copy;1966-2019 CBS Studios, Inc. and 
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Yukarıdaki EditForm örnekte , atanan örneği ( ) temel alan bir oluşturur ve geçerli bir formu EditContext Starship Model="@starship" işlemektedir. Sonraki örnek FormExample3 (bileşen), bir forma bir atama ve formun ne zaman gönder olduğunu EditContext doğrulamayı gösterir.

Aşağıdaki örnekte:

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

Pages/FormExample3.razor:

@page "/form-example-3"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample3> Logger

<EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

    <button type="submit">Submit</button>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = 
        new()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private EditContext editContext;

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

    private async Task HandleSubmit()
    {
        if (editContext.Validate())
        {
            Logger.LogInformation("HandleSubmit called: Form is valid");

            // Process the valid form
            // await ...
        }
        else
        {
            Logger.LogInformation("HandleSubmit called: Form is INVALID");
        }
    }
}

InputSelectC# nesne değerlerine bağlama null seçenekleri

Boş dizelerin ve değerlerin veri null bağlamada nasıl işli olduğu hakkında bilgi için BlazorASP.NET Core veri bağlama bkz. .

Görünen ad desteği

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

Örnek form bölümünün formunda ( bileşeni) yeni bir yıldız geminin üretim tarihi Starfleet Starship Database FormExample2 görünen ad belirtmez:

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

Alan, formun gönder tarihi geçersizse, hata iletisi kolay bir ad görüntülemez. Doğrulama özette görünen " " " ve " " alan adının arasında ProductionDate Production boşluk Date yok:

ProductionDate alanı bir tarih olmalıdır.

özelliğini DisplayName " " ve ": sözcükleri arasında boşluk olacak Production şekilde kolay bir ad olarak Date ayarlayın:

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

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

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

Hata iletisi şablon desteği

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

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

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

The {0} field must be a date.

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

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

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

Özel bir ileti sağlamak ParsingErrorMessage için özel bir şablon attayabilirsiniz:

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

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

Temel doğrulama

Temel form doğrulama senaryolarında bir EditForm örnek, form alanlarını doğrulamak için EditContext bildirilen ve ValidationMessageStore örneklerini kullanabilir. olayı için bir OnValidationRequested işleyici EditContext özel doğrulama mantığını yürütür. İşleyicinin sonucu örneği ValidationMessageStore günceller.

Temel form doğrulaması, formu barındıran bileşen içinde formun doğrudan bileşende veya bir alt sınıfta üye olarak tanımlandığı durumlarda kullanışlıdır. Bağımsız bir model sınıfının çeşitli bileşenlerde kullanılması için doğrulayıcı bileşeninin kullanılması önerilir.

Aşağıdaki FormExample4 bileşende, HandleValidationRequested işleyici yöntemi formu doğrulamadan önce çağırarak ValidationMessageStore.Clear mevcut doğrulama iletilerini temizler.

Pages/FormExample4.razor:

@page "/form-example-4"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample4> Logger

<h2>Ship Holodecks</h2>

<EditForm EditContext="editContext" OnValidSubmit="@HandleValidSubmit">
    <label>
        Type 1:
        <InputCheckbox @bind-Value="holodeck.Type1" />
    </label>

    <label>
        Type 2:
        <InputCheckbox @bind-Value="holodeck.Type2" />
    </label>

    <button type="submit">Update</button>

    <ValidationMessage For="() => holodeck.Options" />

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private EditContext editContext;
    private Holodeck holodeck = new();
    private ValidationMessageStore messageStore;

    protected override void OnInitialized()
    {
        editContext = new(holodeck);
        editContext.OnValidationRequested += HandleValidationRequested;
        messageStore = new(editContext);
    }

    private void HandleValidationRequested(object sender, 
        ValidationRequestedEventArgs args)
    {
        messageStore.Clear();

        // Custom validation logic
        if (!holodeck.Options)
        {
            messageStore.Add(() => holodeck.Options, "Select at least one.");
        }
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called: Processing the form");

        // Process the form
    }

    public class Holodeck
    {
        public bool Type1 { get; set; }
        public bool Type2 { get; set; }
        public bool Options => Type1 || Type2;
    }

    public void Dispose()
    {
        editContext.OnValidationRequested -= HandleValidationRequested;
    }
}

Veri Ek Açıklamaları Doğrulayıcı bileşeni ve özel doğrulama

Bileşen, DataAnnotationsValidator basamaklı bir 'a veri ek açıklamaları doğrulaması iliştirer. EditContext Veri ek açıklamalarını doğrulamayı etkinleştirmek için bileşeni DataAnnotationsValidator gerekir. Veri açıklamalarının aksine farklı bir doğrulama sistemi kullanmak için bileşen yerine özel bir uygulama DataAnnotationsValidator kullanın. için çerçeve DataAnnotationsValidator uygulamaları, başvuru kaynağında inceleme için kullanılabilir:

• DataAnnotationsValidator
• AddDataAnnotationsValidation.

Blazor iki tür doğrulama gerçekleştirir:

• Alan doğrulaması, kullanıcı bir alandan dışarı sekmelerken gerçekleştirilir. Alan doğrulaması sırasında bileşen DataAnnotationsValidator bildirilen tüm doğrulama sonuçlarını alanıyla ilişkilendirin.
• Kullanıcı formu gönderdiğinizde model doğrulaması gerçekleştirilir. Model doğrulaması sırasında bileşen, doğrulama sonucu tarafından rapor edilen üye DataAnnotationsValidator adına göre alanı belirlemeye çalışır. Tek bir üyeyle ilişkilendirilen doğrulama sonuçları alan yerine modelle ilişkilendirilr.

Doğrulayıcı bileşenleri

Doğrulayıcı bileşenleri, formun için bir ValidationMessageStore yöneterek form doğrulamayı EditContext destekler.

Çerçeve, Blazor doğrulama DataAnnotationsValidator özniteliklerine (veri ek açıklamaları)göre formlara doğrulama desteği eklemek için bileşeni sağlar. Form işlemenin farklı adımlarında (örneğin, istemci tarafı doğrulama ve ardından sunucu tarafı doğrulama) aynı sayfada veya aynı formda farklı formlar için doğrulama iletilerini işlemeye yönelik özel doğrulayıcı bileşenleri oluşturabilirsiniz. Bu bölümde gösterilen doğrulayıcı bileşen örneği, CustomValidation bu makalenin aşağıdaki bölümlerinde kullanılır:

• Doğrulayıcı bileşeniyle iş mantığı doğrulaması
• Doğrulayıcı bileşeniyle sunucu doğrulaması

konumundan bir doğrulayıcı bileşeni ComponentBase oluşturun:

• Formun, EditContext bileşenin basamaklı bir parametresidir.
• Doğrulayıcı bileşeni başlatılırken, geçerli form ValidationMessageStore hatalarının listesini korumak için yeni bir oluşturulur.
• Formun bileşeninde geliştirici kodu yöntemini çağıran ileti deposu hataları DisplayErrors alır. Hatalar bir içinde DisplayErrors yöntemine Dictionary<string, List<string>> geçirildi. Sözlükte anahtar, bir veya daha fazla hata içeren form alanı adıdır. Değer, hata listesidir.
• İletiler, aşağıdakilerden herhangi biri meydana geldiğinde temizlir:
  • Doğrulama, olayın EditContext ne zaman ortaya çıkar OnValidationRequested olduğuyla ilgili olarak istenmiş. Tüm hatalar temiz.
  • Olay ortaya çıkarken formda OnFieldChanged bir alan değişir. Yalnızca alanın hataları temiz.
  • yöntemi, ClearErrors geliştirici kodu tarafından çağrılır. Tüm hatalar temiz.

CustomValidation.cs (bir test uygulamasında kullanılıyorsa, ad BlazorSample alanını, uygulamanın ad alanıyla eş olacak şekilde değiştirebilirsiniz):

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

namespace BlazorSample
{
    public class CustomValidation : ComponentBase
    {
        private ValidationMessageStore messageStore;
    
        [CascadingParameter]
        private EditContext CurrentEditContext { get; set; }
    
        protected override void OnInitialized()
        {
            if (CurrentEditContext == null)
            {
                throw new InvalidOperationException(
                    $"{nameof(CustomValidation)} requires a cascading " +
                    $"parameter of type {nameof(EditContext)}. " +
                    $"For example, you can use {nameof(CustomValidation)} " +
                    $"inside an {nameof(EditForm)}.");
            }
    
            messageStore = new(CurrentEditContext);
    
            CurrentEditContext.OnValidationRequested += (s, e) => 
                messageStore.Clear();
            CurrentEditContext.OnFieldChanged += (s, e) => 
                messageStore.Clear(e.FieldIdentifier);
        }
    
        public void DisplayErrors(Dictionary<string, List<string>> errors)
        {
            foreach (var err in errors)
            {
                messageStore.Add(CurrentEditContext.Field(err.Key), err.Value);
            }
    
            CurrentEditContext.NotifyValidationStateChanged();
        }
    
        public void ClearErrors()
        {
            messageStore.Clear();
            CurrentEditContext.NotifyValidationStateChanged();
        }
    }
}

Doğrulayıcı bileşeniyle iş mantığı doğrulaması

Genel iş mantığı doğrulaması için sözlükte form hataları alan bir doğrulayıcı bileşeni kullanın.

Temel doğrulama, formun modelinin, formu barındıran bileşen içinde, doğrudan bileşende veya bir alt sınıfta üye olarak tanımlandığı durumlarda kullanışlıdır. Bağımsız bir model sınıfının çeşitli bileşenlerde kullanılması için doğrulayıcı bileşeninin kullanılması önerilir.

Aşağıdaki örnekte:

• Örnek form bölümündeki Starfleet Starship Database formun kısaltılmış bir sürümü (bileşen), yalnızca FormExample2 starship'in sınıflandırma ve açıklamasını kabul eden kullanılır. Bileşen forma dahil etmey olduğundan, form DataAnnotationsValidator gönderimi üzerinde veri açıklaması doğrulaması tetiklanmaz.
• Bu CustomValidation makalenin Doğrulayıcı bileşenleri bölümündeki bileşen kullanılır.
• Kullanıcı " " ship classification ( ) öğesini seçerse doğrulama, geminin açıklaması ( Description ) için bir değer Defense Classification gerektirir.

Bileşende doğrulama iletileri ayarlanırsa doğrulayıcıya eklenir ve ValidationMessageStore 'nin doğrulama EditForm özetini gösterir.

Pages/FormExample5.razor:

@page "/form-example-5"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample5> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>

    <button type="submit">Submit</button>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private CustomValidation customValidation;
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        customValidation.ClearErrors();

        var errors = new Dictionary<string, List<string>>();

        if (starship.Classification == "Defense" &&
                string.IsNullOrEmpty(starship.Description))
        {
            errors.Add(nameof(starship.Description),
                new() { "For a 'Defense' ship classification, " +
                "'Description' is required." });
        }

        if (errors.Any())
        {
            customValidation.DisplayErrors(errors);
        }
        else
        {
            Logger.LogInformation("HandleValidSubmit called: Processing the form");

            // Process the valid form
        }
    }
}

Doğrulayıcı bileşeniyle sunucu doğrulaması

Sunucu doğrulaması, istemci tarafı doğrulamaya ek olarak de kullanılabilir:

• bileşeniyle formda istemci tarafı doğrulamasını DataAnnotationsValidator işleme.
• Form istemci tarafı doğrulamasını geçtiğinde ( çağrılır), form işleme için bir OnValidSubmit arka uç sunucu EditContext.Model API'sini gönderin.
• Sunucuda işlem modeli doğrulaması.
• Sunucu API'si hem yerleşik çerçeve veri açıklamalarını doğrulamayı hem de geliştirici tarafından sağlanan özel doğrulama mantığını içerir. Doğrulama sunucuda başarılı olursa, formu işle ve bir başarı durum kodu () geri 200 - OK gönder. Doğrulama başarısız olursa, bir hata durum kodu ( 400 - Bad Request ) ve alan doğrulama hataları geri döner.
• Formu başarıyla devre dışı bırakma veya hataları görüntüleme.

Temel doğrulama, formun modelinin, formu barındıran bileşen içinde, doğrudan bileşende veya bir alt sınıfta üye olarak tanımlandığı durumlarda kullanışlıdır. Bağımsız bir model sınıfının çeşitli bileşenlerde kullanılması için doğrulayıcı bileşeninin kullanılması önerilir.

Aşağıdaki örnek temel alınarak verilmiştir:

• Blazor WebAssembly Blazor WebAssembly Proje şablonundanoluşturulmuş bir barındırılan çözüm. Yaklaşım, Blazor barındırılan Blazor WebAssembly güvenlik belgelerindeaçıklanan Güvenli barındırılan çözümlerin herhangi biri için desteklenir.
• Starship Starship.cs Örnek form bölümündeki model ().
• CustomValidation Doğrulayıcı bileşenleri bölümünde gösterilen bileşen.

Starship Starship.cs Shared Hem istemci hem de sunucu uygulamalarının modeli kullanabilmesi için modeli () çözümün projesine yerleştirin. Ad alanını paylaşılan uygulamanın ad alanıyla eşleşecek şekilde ekleyin veya güncelleştirin (örneğin, namespace BlazorSample.Shared ). Model veri ek açıklamaları gerektirdiğinden, System.ComponentModel.Annotations projenin proje dosyasına bir paket başvurusu ekleyin Shared :

<ItemGroup>
  <PackageReference Include="System.ComponentModel.Annotations" Version="{VERSION}" />
</ItemGroup>

yer tutucunun paketin en son önizleme dışı sürümünü öğrenmek için {VERSION} System.ComponentModel.Annotations NuGet. orgkonumundaki paket sürümü geçmişine bakın.

Server Projede, starsevkiyat doğrulama isteklerini işlemek için bir denetleyici ekleyin ve başarısız doğrulama iletilerini geri döndürün. usingProje için son deyimdeki ad alanlarını Shared ve namespace Controller sınıfı için güncelleştirin. Veri ek açıklamaları doğrulamasına (istemci tarafı ve sunucu tarafı) ek olarak, denetleyici, Description Kullanıcı sevk sınıflandırmasını () seçerse, sevkıyat açıklaması () için bir değer sağlandığını doğrular Defense Classification .

DefenseGelecek form, form sunucuya gönderildiğinde aynı doğrulama istemci tarafında gerçekleşmediğinden, teslim sınıflandırması için doğrulama yalnızca denetleyicide sunucu tarafında gerçekleşir. İstemci tarafı doğrulaması olmadan sunucu tarafı doğrulama, sunucuda Kullanıcı girişinin özel iş mantığı doğrulamasını gerektiren uygulamalarda ortaktır. Örneğin, bir kullanıcı için depolanan verilerin özel bilgileri Kullanıcı girişini doğrulamak için gerekli olabilir. Özel veriler, istemci tarafı doğrulama için istemciye açıkça gönderilemez.

Controllers/StarshipValidation.cs:

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Microsoft.Identity.Web.Resource;
using BlazorSample.Shared;

namespace BlazorSample.Server.Controllers
{
    [Authorize]
    [ApiController]
    [Route("[controller]")]
    public class StarshipValidationController : ControllerBase
    {
        private readonly ILogger<StarshipValidationController> logger;

        public StarshipValidationController(
            ILogger<StarshipValidationController> logger)
        {
            this.logger = logger;
        }

        static readonly string[] scopeRequiredByApi = new[] { "API.Access" };

        [HttpPost]
        public async Task<IActionResult> Post(Starship starship)
        {
            HttpContext.VerifyUserHasAnyAcceptedScope(scopeRequiredByApi);

            try
            {
                if (starship.Classification == "Defense" && 
                    string.IsNullOrEmpty(starship.Description))
                {
                    ModelState.AddModelError(nameof(starship.Description),
                        "For a 'Defense' ship " +
                        "classification, 'Description' is required.");
                }
                else
                {
                    logger.LogInformation("Processing the form asynchronously");

                    // Process the valid form
                    // async ...

                    return Ok(ModelState);
                }
            }
            catch (Exception ex)
            {
                logger.LogError("Validation Error: {Message}", ex.Message);
            }

            return BadRequest(ModelState);
        }
    }
}

Barındırılan bir uygulamada önceki denetleyiciyi kullanıyorsanız Blazor WebAssembly , ad alanını ( BlazorSample.Server.Controllers ) uygulamanın denetleyiciler ad alanıyla eşleşecek şekilde güncelleştirin.

Sunucuda bir model bağlama doğrulama hatası oluştuğunda, ApiController ( ApiControllerAttribute ) normalde ile varsayılan hatalı istek yanıtı döndürür ValidationProblemDetails . Yanıt, formun tüm alanları Starfleet Starship Database gönderilmediğinde ve form doğrulanamazsa, aşağıdaki örnekte gösterildiği gibi, yalnızca doğrulama hatalarından daha fazla veri içerir:

{
  "title": "One or more validation errors occurred.",
  "status": 400,
  "errors": {
    "Identifier": ["The Identifier field is required."],
    "Classification": ["The Classification field is required."],
    "IsValidatedDesign": ["This form disallows unapproved ships."],
    "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
  }
}

Sunucu API 'SI önceki varsayılan JSON yanıtını döndürürse, istemci, errors form doğrulama hatası işleme için düğümün alt öğelerini elde etmek üzere geliştirici kodundaki yanıtı ayrıştırabilmesi mümkündür. Dosyayı ayrıştırmaya yönelik geliştirici kodu yazmak uygun değildir. JSON el ile ayrıştırılırken, Dictionary<string, List<string>> çağrıldıktan sonra bir hata üretme gerekir ReadFromJsonAsync . İdeal olarak, sunucu API 'SI yalnızca doğrulama hatalarını döndürmelidir:

{
  "Identifier": ["The Identifier field is required."],
  "Classification": ["The Classification field is required."],
  "IsValidatedDesign": ["This form disallows unapproved ships."],
  "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
}

Sunucu API 'sinin yanıtını yalnızca doğrulama hatalarını döndürecek şekilde değiştirmek için, içinde ile açıklanmakta olan eylemlerde çağrılan temsilciyi değiştirin ApiControllerAttribute Startup.ConfigureServices . API uç noktası ( /StarshipValidation ) için ile bir döndürür BadRequestObjectResult ModelStateDictionary . Diğer API uç noktaları için, nesne sonucunu yeni bir ile döndürerek varsayılan davranışı koruyun ValidationProblemDetails .

Microsoft.AspNetCore.MvcAd alanını uygulamadaki dosyanın en üstüne ekleyin Startup.cs Server :

using Microsoft.AspNetCore.Mvc;

İçinde Startup.ConfigureServices , AddControllersWithViews genişletme yöntemini bulun ve aşağıdaki çağrıyı öğesine ekleyin ConfigureApiBehaviorOptions :

services.AddControllersWithViews()
    .ConfigureApiBehaviorOptions(options =>
    {
        options.InvalidModelStateResponseFactory = context =>
        {
            if (context.HttpContext.Request.Path == "/StarshipValidation")
            {
                return new BadRequestObjectResult(context.ModelState);
            }
            else
            {
                return new BadRequestObjectResult(
                    new ValidationProblemDetails(context.ModelState));
            }
        };
    });

Daha fazla bilgi için bkz. Web API'ASP.NET Core hataları işleme.

Client Projesinde, CustomValidation Doğrulayıcı bileşenleri bölümünde gösterilen bileşeni ekleyin. Ad alanını uygulamayla eşleşecek şekilde güncelleştirin (örneğin, namespace BlazorSample.Client ).

Client Projesinde, Starfleet Starship Database form, bileşen yardımı ile sunucu doğrulama hatalarını gösterecek şekilde güncelleştirilir CustomValidation . Sunucu API 'SI doğrulama iletileri döndürdüğünde, bileşen öğesine eklenir CustomValidation ValidationMessageStore . Hatalar formun EditContext doğrulama özeti tarafından görüntülenmek üzere formunda kullanılabilir.

Aşağıdaki FormExample6 bileşende, Shared projenin () ad alanını @using BlazorSample.Shared paylaşılan projenin ad alanı olarak güncelleştirin. Formun yetkilendirme gerektirdiğini, bu nedenle kullanıcının forma gitmek için uygulamada oturum açmış olması gerektiğini unutmayın.

Pages/FormExample6.razor:

@page "/form-example-6"
@using System.Net
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.Extensions.Logging
@using BlazorSample.Shared
@attribute [Authorize]
@inject HttpClient Http
@inject ILogger<FormExample6> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification" disabled="@disabled">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" disabled="@disabled" />
        </label>
    </p>

    <button type="submit" disabled="@disabled">Submit</button>

    <p style="@messageStyles">
        @message
    </p>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private bool disabled;
    private string message;
    private string messageStyles = "visibility:hidden";
    private CustomValidation customValidation;
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private async Task HandleValidSubmit(EditContext editContext)
    {
        customValidation.ClearErrors();

        try
        {
            var response = await Http.PostAsJsonAsync<Starship>(
                "StarshipValidation", (Starship)editContext.Model);

            var errors = await response.Content
                .ReadFromJsonAsync<Dictionary<string, List<string>>>();

            if (response.StatusCode == HttpStatusCode.BadRequest && 
                errors.Any())
            {
                customValidation.DisplayErrors(errors);
            }
            else if (!response.IsSuccessStatusCode)
            {
                throw new HttpRequestException(
                    $"Validation failed. Status Code: {response.StatusCode}");
            }
            else
            {
                disabled = true;
                messageStyles = "color:green";
                message = "The form has been processed.";
            }
        }
        catch (AccessTokenNotAvailableException ex)
        {
            ex.Redirect();
        }
        catch (Exception ex)
        {
            Logger.LogError("Form processing error: {Message}", ex.Message);
            disabled = true;
            messageStyles = "color:red";
            message = "There was an error processing the form.";
        }
    }
}

InputText Giriş olayına göre

InputTextOlayı yerine olayını kullanan özel bir bileşen oluşturmak için bileşenini kullanın input change . inputHer tuş vuruşunda olay tetikleyicileri alan doğrulamasının kullanımı.

Aşağıdaki örnek ExampleModel sınıfını kullanır.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string Name { get; set; }
}

Aşağıdaki CustomInputText bileşen Framework bileşenini devralır ve olaya InputText olay bağlamayı ayarlar oninput .

Shared/CustomInputText.razor:

@inherits InputText

<input @attributes="AdditionalAttributes" 
       class="@CssClass" 
       @bind="CurrentValueAsString" 
       @bind:event="oninput" />

CustomInputTextBileşen her yerde kullanılabilir InputText . Aşağıdaki FormExample7 bileşen paylaşılan CustomInputText bileşeni kullanır.

Pages/FormExample7.razor:

@page "/form-example-7"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample7> Logger

<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <CustomInputText @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>

<p>
    CurrentValue: @exampleModel.Name
</p>

@code {
    private ExampleModel exampleModel = new();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Radyo düğmeleri

Bu bölümdeki örnek, Starfleet Starship Database Bu makalenin örnek form bölümünün biçimini temel alır.

Aşağıdaki enum türleri uygulamaya ekleyin. Bunları tutacak yeni bir dosya oluşturun veya Starship.cs dosyayı dosyaya ekleyin.

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

Şu enums şekilde erişilebilir yapın:

• Starship içindeki model Starship.cs (örneğin, using static ComponentEnums; enums sınıfının adı ise ComponentEnums ).
• Starfleet Starship Database Form (örneğin, @using static ComponentEnums numaralandırmalar sınıfı olarak adlandırılmışsa ComponentEnums ).

InputRadio<TValue> InputRadioGroup<TValue> Radyo düğmesi grubu oluşturmak için bileşeni olan bileşenleri kullanın. Aşağıdaki örnekte, Özellikler Starship örnek formu 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;

Starfleet Starship DatabaseForm ( FormExample2 Bileşen) öğesini örnek form bölümünden güncelleştirin. Üretilecek bileşenleri ekleyin:

• Sevk üreticisi için bir radyo düğmesi grubu.
• Motor ve gönderim rengi için iç içe bir radyo düğmesi grubu.

<p>
    <InputRadioGroup @bind-Value="starship.Manufacturer">
        Manufacturer:
        <br>
        @foreach (var manufacturer in (Manufacturer[])Enum
            .GetValues(typeof(Manufacturer)))
        {
            <InputRadio Value="manufacturer" />
            <text>&nbsp;</text>@manufacturer<br>
        }
    </InputRadioGroup>
</p>
<p>
    Select one engine and one color. Recommendations are paired but any 
    combination of engine and color is allowed:<br>
    <InputRadioGroup Name="engine" @bind-Value="starship.Engine">
        <InputRadioGroup Name="color" @bind-Value="starship.Color">
            <InputRadio Name="engine" Value="Engine.Ion" />
            Engine: Ion<br>
            <InputRadio Name="color" Value="Color.ImperialRed" />
            Color: Imperial Red<br><br>
            <InputRadio Name="engine" Value="Engine.Plasma" />
            Engine: Plasma<br>
            <InputRadio Name="color" Value="Color.SpacecruiserGreen" />
            Color: Spacecruiser Green<br><br>
            <InputRadio Name="engine" Value="Engine.Fusion" />
            Engine: Fusion<br>
            <InputRadio Name="color" Value="Color.StarshipBlue" />
            Color: Starship Blue<br><br>
            <InputRadio Name="engine" Value="Engine.Warp" />
            Engine: Warp<br>
            <InputRadio Name="color" Value="Color.VoyagerOrange" />
            Color: Voyager Orange
        </InputRadioGroup>
    </InputRadioGroup>
</p>

Doğrulama özeti ve doğrulama Iletisi bileşenleri

ValidationSummaryBileşen, doğrulama özeti etiketi Yardımcısı'na benzer olan tüm doğrulama iletilerini özetler:

<ValidationSummary />

Parametresi ile belirli bir model için çıkış doğrulama iletileri Model :

<ValidationSummary Model="@starship" />

ValidationMessage<TValue>Bileşeni, doğrulama Iletisi etiketi Yardımcısı'na benzer şekilde belirli bir alan için doğrulama iletileri görüntüler. Özniteliği ile doğrulama için alanı For ve model özelliğini adlandırırken bir lambda ifadesini belirtin:

<ValidationMessage For="@(() => starship.MaximumAccommodation)" />

ValidationMessage<TValue>Ve ValidationSummary bileşenleri, rastgele öznitelikleri destekler. Bir bileşen parametresiyle eşleşmeyen herhangi bir öznitelik oluşturulan <div> or <ul> öğesine eklenir.

Uygulamanın stil sayfasındaki (veya) doğrulama iletilerinin stilini denetleyin wwwroot/css/app.css wwwroot/css/site.css . Varsayılan validation-message sınıf, doğrulama iletilerinin metin rengini kırmızı olarak ayarlar:

.validation-message {
    color: red;
}

Özel doğrulama öznitelikleri

Bir doğrulama sonucunun özel bir doğrulama özniteliğikullanılırken bir alanla doğru şekilde ilişkilendirildiğinden emin olmak için, oluştururken doğrulama bağlamını geçirin MemberName ValidationResult .

CustomValidator.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class CustomValidator : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, 
        ValidationContext validationContext)
    {
        ...

        return new ValidationResult("Validation message to user.",
            new[] { validationContext.MemberName });
    }
}

Özel doğrulama CSS sınıfı öznitelikleri

Özel doğrulama CSS sınıfı öznitelikleri, önyüklemegibi CSS çerçeveleri ile tümleştirilirken faydalıdır.

Aşağıdaki örnek ExampleModel sınıfını kullanır.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string Name { get; set; }
}

Özel doğrulama CSS sınıfı özniteliklerini belirtmek için, özel doğrulama için CSS stilleri sağlayarak ' ı başlatın. Aşağıdaki örnekte, geçerli ( validField ) ve geçersiz ( invalidField ) stilleri belirtilmiştir.

wwwroot/css/app.css ( Blazor WebAssembly ) veya wwwroot/css/site.css (Blazor Server):

.validField {
    border-color: lawngreen;
}

.invalidField {
    background-color: tomato;
}

Alan doğrulama iletilerini denetleyerek ondan türetilmiş bir sınıf oluşturun FieldCssClassProvider ve uygun geçerli veya geçersiz stili uygular.

CustomFieldClassProvider.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, 
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        return isValid ? "validField" : "invalidField";
    }
}

Sınıfını, CustomFieldClassProvider form ÖRNEĞINDEKI CSS sınıfı sağlayıcı olarak ayarlayın EditContext SetFieldCssClassProvider .

Pages/FormExample8.razor:

@page "/form-example-8"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample8> Logger

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>

@code {
    private ExampleModel exampleModel = new();
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new(exampleModel);
        editContext.SetFieldCssClassProvider(new CustomFieldClassProvider());
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Önceki örnek, tüm form alanlarının geçerliliğini denetler ve her alana bir stil uygular. Formun alanların bir alt kümesine yalnızca özel stiller uygulaması gerekirse, stilleri CustomFieldClassProvider koşullu olarak uygula'ya tıklayın. Aşağıdaki CustomFieldClassProvider2 örnek alana yalnızca bir stil Name uygular. Adları eşleşmeden herhangi bir alan Name için döndürülür ve hiçbir stil string.Empty uygulanmaz.

CustomFieldClassProvider2.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider2 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        if (fieldIdentifier.FieldName == "Name")
        {
            var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

            return isValid ? "validField" : "invalidField";
        }

        return string.Empty;
    }
}

için ek bir özellik ExampleModel ekleyin, örneğin:

[StringLength(10, ErrorMessage = "Description is too long.")]
public string Description { get; set; } 

bileşenini Description ExampleForm7 bileşenin formuna ekleyin:

<InputText id="description" @bind-Value="exampleModel.Description" />

Bileşenin EditContext yönteminde örneğini yeni OnInitialized Field CSS Sınıf Sağlayıcısını kullanmak için güncelleştirin:

editContext.SetFieldCssClassProvider(new CustomFieldClassProvider2());

ALANA () CSS doğrulama sınıfı Description id="description" uygulanmaz, bu stile sahip değildir. Ancak, alan doğrulaması normal şekilde çalışır. 10 karakterden fazla karakter sağlanırsa doğrulama özeti hatayı gösterir:

Açıklama çok uzun.

Aşağıdaki örnekte:

• Alana özel CSS stili Name uygulanır.

• Diğer tüm alanlar, 'nin varsayılan mantığına benzer bir mantık kullanır ve veya ile Blazor Blazor 'nin varsayılan alan CSS doğrulama modified stillerini valid invalid kullanır. Varsayılan stiller için, uygulama bir proje şablonunu temel aldısa bunları uygulamanın stil sayfasına eklemeniz gerek Blazor olmadığını unutmayın. Proje şablonunu temel alan Blazor uygulamalar için varsayılan stiller uygulamanın stil sayfasına eklenebilir:

  .valid.modified:not([type=checkbox]) {
      outline: 1px solid #26b050;
  }
  
  .invalid {
      outline: 1px solid red;
  }
  

CustomFieldClassProvider3.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider3 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        if (fieldIdentifier.FieldName == "Name")
        {
            return isValid ? "validField" : "invalidField";
        }
        else
        {
            if (editContext.IsModified(fieldIdentifier))
            {
                return isValid ? "modified valid" : "modified invalid";
            }
            else
            {
                return isValid ? "valid" : "invalid";
            }
        }
    }
}

Bileşenin yönteminde örneğini önceki Alan EditContext CSS Sınıf OnInitialized Sağlayıcısını kullanmak için güncelleştirin:

editContext.SetFieldCssClassProvider(new CustomFieldClassProvider3());

CustomFieldClassProvider3kullanarak:

• alanı, Name uygulamanın özel doğrulama CSS stillerini kullanır.
• alanı, Description 'nin mantığına ve 'nin varsayılan alan Blazor CSS doğrulama Blazor stillerine benzer bir mantık kullanır.

Blazor veri ek açıklamaları doğrulama paketi

Microsoft.AspNetCore.Components.DataAnnotations.Validation, bileşenini kullanarak doğrulama deneyimi boşluklarını dolduran bir DataAnnotationsValidator pakettir. Paketi şu anda deneyseldir.

İç içe geçmiş modeller, koleksiyon türleri ve karmaşık türler

Blazor yerleşik ile veri ek açıklamalarını kullanarak form girişini doğrulama desteği DataAnnotationsValidator sağlar. Ancak, yalnızca koleksiyon veya karmaşık tür özellikleri olmayan forma bağlı modelin üst DataAnnotationsValidator düzey özelliklerini doğrular.

Bağlı modelin koleksiyon ve karmaşık tür özellikleri de dahil olmak üzere nesne grafın tamamını doğrulamak için deneysel ObjectGraphDataAnnotationsValidator paket tarafından sağlanan nesnesini Microsoft.AspNetCore.Components.DataAnnotations.Validation kullanın:

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
    <ObjectGraphDataAnnotationsValidator />
    ...
</EditForm>

ile model özelliklerine açıklama ek açıklama. [ValidateComplexType] Aşağıdaki model sınıflarında sınıfı, modelin forma ne zaman bağlı olduğunu ShipDescription doğrulamak için ek veri ek açıklamaları içerir:

Starship.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    ...

    [ValidateComplexType]
    public ShipDescription ShipDescription { get; set; } = new();

    ...
}

ShipDescription.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class ShipDescription
{
    [Required]
    [StringLength(40, ErrorMessage = "Description too long (40 char).")]
    public string ShortDescription { get; set; }

    [Required]
    [StringLength(240, ErrorMessage = "Description too long (240 char).")]
    public string LongDescription { get; set; }
}

Form doğrulamasına göre gönder düğmesini etkinleştirme

Form doğrulamaya göre gönder düğmesini etkinleştirmek ve devre dışı bırakmak için aşağıdaki örnek:

• Önceki formun (bileşen) yalnızca gemi tanımlayıcısı için bir değer kabul eden Starfleet Starship Database FormExample2 kısaltılmış bir sürümünü kullanır. Türün Starship bir örneği oluşturulduğunda diğer özellikler geçerli varsayılan Starship değerleri alır.
• Bileşen başlatılırken EditContext modeli atamak için formun 'larını kullanır.
• Gönder düğmesini etkinleştirmek ve devre dışı bırakmak OnFieldChanged için bağlamın geri çağırmada formu doğrular.
• yönteminde IDisposable olay işleyicisini uygulayan ve aboneliğini Dispose kaldıran. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Pages/FormExample9.razor:

@page "/form-example-9"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample9> Logger

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private Starship starship = 
        new()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private bool formInvalid = false;
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new(starship);
        editContext.OnFieldChanged += HandleFieldChanged;
    }

    private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
    {
        formInvalid = !editContext.Validate();
        StateHasChanged();
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }

    public void Dispose()
    {
        editContext.OnFieldChanged -= HandleFieldChanged;
    }
}

Bir form geçerli değerlerle önceden yüklenmemişse ve form yüklemede düğmeyi devre dışı bırakmak Submit isterseniz olarak formInvalid true ayarlayın.

Önceki yaklaşımın yan etkisi, kullanıcı herhangi bir alanla etkileşime girdikten sonra doğrulama özetinin (bileşen) geçersiz ValidationSummary alanlarla doldurulmasıdır. Bu senaryoyu aşağıdaki yöntemlerden birini kullanabilirsiniz:

• Formda bileşen ValidationSummary kullanma.
• Gönder ValidationSummary düğmesi seçildiğinde bileşeni görünür hale (örneğin, bir HandleValidSubmit yöntemde).

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary style="@displaySummary" />

    ...

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private string displaySummary = "display:none";

    ...

    private void HandleValidSubmit()
    {
        displaySummary = "display:block";
    }
}

Sorun giderme

InvalidOperationException: EditForm için model parametresi veya EditContext parametresi gerekir ancak her ikisi birden gerekli değildir.

bir veya EditForm atadığınız Model onaylayın. EditContext Aynı form için ikisini birden kullanmayın.

uygulamasına Model atarken, aşağıdaki örnekte de olduğu gibi model türünün örneklenmiş olduğunu onaylayın:

private ExampleModel exampleModel = new();

Ek kaynaklar

• BlazorASP.NET Core dosya karşıya yüklemeleri
• ASP.NET Core Blazor WebAssembly barındırılan bir uygulamanın güvenliğini Azure Active Directory
• Blazor WebAssemblyAzure Active Directory B2C ile ASP.NET Core barındırılan bir uygulamanın güvenliğini sağlama
• barındırılan bir ASP.NET Core Blazor WebAssembly uygulamasının sunucuyla güvenliğini Identity sağlama

Çerçeve, Blazor veri ek açıklamalarını kullanan bir modele bağlı bileşeni kullanarak doğrulama ile web EditForm formlarını destekler.

Bir bileşenin veri EditForm açıklamaları doğrulamasıyla nasıl çalıştığını göstermek için aşağıdaki türü göz önünde ExampleModel bulundurabilirsiniz. özelliği Name ile gerekli olarak işaretlenir ve maksimum dize uzunluğu sınırını ve hata iletisini RequiredAttribute StringLengthAttribute belirtir.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string Name { get; set; }
}

Form, çerçevenin Blazor bileşeni kullanılarak EditForm tanımlanır. Aşağıdaki bileşen, bir webformu önceki türe bağlı bir bileşen kullanarak işlemek için tipik Razor Razor EditForm öğeleri, bileşenleri ve kodu ExampleModel gösterir.

Pages/FormExample1.razor:

@page "/form-example-1"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample1> Logger

<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>

@code {
    private ExampleModel exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Yukarıdaki FormExample1 bileşende:

• Bileşen, EditForm öğenin göründüğü <EditForm> yerde işlenir.
• Model bileşenin bloğunda oluşturulur @code ve özel bir alanda ( ). exampleModel alanı, öğesinin EditForm.Model özniteliğine ( Model ) <EditForm> atanır.
• bileşeni InputText ( ) dize değerlerini id="name" düzenlemeye uygun bir giriş bileşenidir. @bind-Valueyönergesi özniteliği exampleModel.Name model özelliğini bileşenin InputText özelliğine Value bağlar.
• HandleValidSubmityöntemine OnValidSubmit atanır. Form doğrulamayı geçerse işleyici çağrılır.
• Veri ek açıklamaları doğrulayıcı DataAnnotationsValidator † (bileşen), veri ek açıklamalarını kullanarak doğrulama desteği sağlar:
  • Düğme seçildiğinde form alanı boş bırakılırsa doğrulama özette ( bileşen ) (" ") bir <input> Submit hata görünür ve ValidationSummary ‡ The Name field is required. HandleValidSubmit çağrılmamıştır.
  • Düğme seçildiğinde form alanı on karakterden fazla karakter içeriyorsa doğrulama özette (" ") bir <input> Submit hata görünür ve Name is too long. HandleValidSubmit çağrılmamıştır.
  • Düğme <input> seçildiğinde form alanı geçerli bir Submit değer içeriyorsa HandleValidSubmit çağrılır.

†Bileşen DataAnnotationsValidator Validator bileşeni bölümünde ele almaktadır. ‡Bileşen ValidationSummary Doğrulama Özeti ve Doğrulama İletisi bileşenleri bölümünde ele alır. Özellik bağlama hakkında daha fazla bilgi için bkz. BlazorASP.NET Core veri bağlama .

Formu bağlama

, formda diğer bileşenler için basamaklı değer olarak atanan model EditForm örneğini temel alan bir EditContext oluşturur. , hangi alanların değiştiril olduğu ve geçerli doğrulama iletileri de EditContext dahil olmak üzere düzenleme işlemiyle ilgili meta verileri izler. veya EditForm.Model ataması, bir formu verilere EditForm.EditContext bağlar.

EditForm.Modelataması:

<EditForm Model="@exampleModel" ...>

@code {
    private ExampleModel exampleModel = new ExampleModel() { ... };
}

EditForm.EditContextataması:

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

@code {
    private ExampleModel exampleModel = new ExampleModel() { ... };
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(exampleModel);
    }
}

bir 'a EditContext veya Model EditForm atama. Her ikisinin de ataması desteklenmiyor ve çalışma zamanı hatası oluştur:

İşlenemez özel durum işleme bileşeni: EditForm için model parametresi veya EditContext parametresi gerekir ancak her ikisi birden gerekli değildir.

Form gönderimi işleme

, EditForm form gönderimi işleme için aşağıdaki geri çağırmaları sağlar:

• Geçerli OnValidSubmit alanlara sahip bir form göndererek çalıştıracak bir olay işleyicisi atamak için kullanın.
• Geçersiz OnInvalidSubmit alanlara sahip bir form göndererek çalıştırılacak bir olay işleyicisi atamak için kullanın.
• Form OnSubmit alanlarının doğrulama durumundan bağımsız olarak çalıştırmak üzere bir olay işleyicisi atamak için kullanın. Form, olay işleyicisi EditContext.Validate yönteminde çağrılarak doğrulanır. Validate true döndürürse, form geçerli olur.

Yerleşik form bileşenleri

Çerçeve, Blazor kullanıcı girişini almak ve doğrulamak için yerleşik form bileşenleri sağlar. Girişler değiştirildikleri ve bir form gönderildikleri zaman doğrulanır. Kullanılabilir giriş bileşenleri aşağıdaki tabloda gösterilmiştir.

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

dahil olmak üzere tüm giriş bileşenleri EditForm rastgele öznitelikleri destekler. Bir bileşen parametresiyle eşleşmeen öznitelikler işlenmiş HTML öğesine eklenir.

Giriş bileşenleri, alan CSS sınıfını alanın durumunu geçerli veya geçersiz olarak yansıtacak şekilde güncelleştirmek de dahil olmak üzere, bir alanın ne zaman değiştirdiğini doğrulamaya yönelik varsayılan davranışı sağlar. Bazı bileşenler yararlı ayrıştırma mantığı içerir. Örneğin, InputDate<TValue> ve InputNumber<TValue> ayrılamaz değerleri doğrulama hataları olarak kaydederek, ayrılamaz değerleri uygun bir şekilde işle. Null değerleri kabul edebilecek türler, hedef alanın null değer alabilme durumunu da destekler (örneğin, int? null atanabilir tamsayı için).

Örnek form

StarshipBu makalenin birkaç örneğinde kullanılan aşağıdaki tür, veri ek açıklamalarıyla çeşitli özellikler kümesi tanımlar:

• Identifier , ile açıklandığından gereklidir RequiredAttribute . Identifier en az bir karakter değeri gerektirir, ancak öğesini kullanarak 16 karakterden daha fazla karakter gerektirir StringLengthAttribute .
• Description , ile açıklanmadığı için isteğe bağlıdır RequiredAttribute .
• Classification gereklidir.
• MaximumAccommodationÖzelliğin varsayılan değeri 0 ' dır, ancak tek başına 100.000 arasında bir değer gerekir RangeAttribute .
• IsValidatedDesign özelliği, true Kullanıcı arabirimindeki () bir onay kutusuna bağlandığında, özelliği seçili durumla eşleşen bir değere sahip olmasını gerektirir <input type="checkbox"> .
• ProductionDate bir DateTime ve gereklidir.

Starship.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16, ErrorMessage = "Identifier too long (16 character limit).")]
    public string Identifier { 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 modelde tanımlanan özellikler ve doğrulama Starship .
• Birçok Blazor yerleşik form bileşeni.

Pages/FormExample2.razor:

@page "/form-example-2"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample2> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" />
        </label>
    </p>

    <button type="submit">Submit</button>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>, 
        &copy;1966-2019 CBS Studios, Inc. and 
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = new Starship() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

EditFormÖnceki örnekte, EditContext atanan Starship örneğe () göre bir oluşturur Model="@starship" ve geçerli bir form işler. Sonraki örnek ( FormExample3 Bileşen) bir forma nasıl atanacağını EditContext ve formun gönderildiği zaman doğrulanmasını gösterir.

Aşağıdaki örnekte:

• Önceki Starfleet Starship Database formun ( FormExample2 Bileşen) kısaltılmış sürümü yalnızca starsevk 'nın tanımlayıcısı için bir değer kabul eden kullanılır. Diğer Starship Özellikler, türün bir örneği oluşturulduğunda geçerli varsayılan değerleri alır Starship .
• HandleSubmit Submit Düğme seçildiğinde Yöntem yürütülür.
• Form EditContext.Validate , yöntemi çağırarak onaylanır HandleSubmit .
• Günlüğe kaydetme, doğrulama sonucuna göre yürütülür.

Pages/FormExample3.razor:

@page "/form-example-3"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample3> Logger

<EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

    <button type="submit">Submit</button>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = 
        new Starship()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(starship);
    }

    private async Task HandleSubmit()
    {
        if (editContext.Validate())
        {
            Logger.LogInformation("HandleSubmit called: Form is valid");

            // Process the valid form
            // await ...
        }
        else
        {
            Logger.LogInformation("HandleSubmit called: Form is INVALID");
        }
    }
}

InputSelectC# nesne değerlerine bağlama seçenekleri null

Boş dizelerin ve değerlerin Veri bağlamada nasıl işlendiği hakkında daha fazla bilgi için null bkz BlazorASP.NET Core veri bağlama ..

Hata iletisi şablonu desteği

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

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

Starfleet Starship Database FormExample2 Örnek formu bölümünde (bileşen), varsayılan bir hata iletisi şablonu kullanır:

The {0} field must be a date.

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

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

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

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

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

Üretim tarihi alanı yanlış bir tarih değeri içeriyor.

Temel doğrulama

Temel form doğrulama senaryolarında bir örnek, EditForm EditContext ValidationMessageStore form alanlarını doğrulamak için tanımlanmış ve örnekleri kullanabilir. OnValidationRequested EditContext Özel doğrulama mantığını yürüten olay için bir işleyici. İşleyicinin sonucu ValidationMessageStore örneği güncelleştirir.

Temel form doğrulaması, form modelinin, formu barındıran bileşen içinde (doğrudan bileşen üzerinde veya bir alt sınıfta Üyeler olarak) tanımlanmış olduğu durumlarda faydalıdır. Bir Doğrulayıcı bileşeni kullanımı, bağımsız bir model sınıfının birkaç bileşen genelinde kullanıldığı durumlarda önerilir.

Aşağıdaki FormExample4 bileşende, HandleValidationRequested işleyici yöntemi, formu doğrulamadan önce çağırarak mevcut tüm doğrulama iletilerini temizler ValidationMessageStore.Clear .

Pages/FormExample4.razor:

@page "/form-example-4"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample4> Logger

<h2>Ship Holodecks</h2>

<EditForm EditContext="editContext" OnValidSubmit="@HandleValidSubmit">
    <label>
        Type 1:
        <InputCheckbox @bind-Value="holodeck.Type1" />
    </label>

    <label>
        Type 2:
        <InputCheckbox @bind-Value="holodeck.Type2" />
    </label>

    <button type="submit">Update</button>

    <ValidationMessage For="() => holodeck.Options" />

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private EditContext editContext;
    private Holodeck holodeck = new Holodeck();
    private ValidationMessageStore messageStore;

    protected override void OnInitialized()
    {
        editContext = new EditContext(holodeck);
        editContext.OnValidationRequested += HandleValidationRequested;
        messageStore = new ValidationMessageStore(editContext);
    }

    private void HandleValidationRequested(object sender, 
        ValidationRequestedEventArgs args)
    {
        messageStore.Clear();

        // Custom validation logic
        if (!holodeck.Options)
        {
            messageStore.Add(() => holodeck.Options, "Select at least one.");
        }
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called: Processing the form");

        // Process the form
    }

    public class Holodeck
    {
        public bool Type1 { get; set; }
        public bool Type2 { get; set; }
        public bool Options => Type1 || Type2;
    }

    public void Dispose()
    {
        editContext.OnValidationRequested -= HandleValidationRequested;
    }
}

Veri ek açıklamaları Doğrulayıcı bileşeni ve özel doğrulama

DataAnnotationsValidatorBileşen, veri açıklamaları doğrulamasını basamaklı bir şekilde iliştirir EditContext . Veri ek açıklamaları doğrulamasının etkinleştirilmesi DataAnnotationsValidator bileşeni gerektirir. Veri ek açıklamalarıyla farklı bir doğrulama sistemi kullanmak için bileşen yerine özel bir uygulama kullanın DataAnnotationsValidator . İçin Framework uygulamaları, DataAnnotationsValidator başvuru kaynağında İnceleme için kullanılabilir:

• DataAnnotationsValidator
• AddDataAnnotationsValidation.

Blazor iki tür doğrulama gerçekleştirir:

• Alan doğrulama , Kullanıcı bir alanın dışına eklendiğinde gerçekleştirilir. Alan doğrulama sırasında, DataAnnotationsValidator bileşen bildirilen tüm doğrulama sonuçlarını alanla ilişkilendirir.
• Kullanıcı formu gönderdiğinde model doğrulaması gerçekleştirilir. Model doğrulama sırasında, DataAnnotationsValidator Bileşen, doğrulama sonucunun raporlandığı üye adına göre alanı belirlemeyi dener. Tek bir üyeyle ilişkilendirilmeyen doğrulama sonuçları, bir alan yerine modeliyle ilişkilendirilir.

Doğrulayıcı bileşenleri

Doğrulayıcı bileşenleri, form için bir için yöneterek form doğrulamasını destekler ValidationMessageStore EditContext .

BlazorFramework, DataAnnotationsValidator doğrulama özniteliklerine (veri ek açıklamaları)göre formlara doğrulama desteği eklemek için bileşeni sağlar. Farklı formlar için doğrulama mesajlarını aynı sayfada veya farklı form işleme adımlarında aynı biçimde işlemek için özel Doğrulayıcı bileşenleri oluşturabilirsiniz (örneğin, istemci tarafı doğrulaması ve ardından sunucu tarafı doğrulaması). Bu bölümde gösterilen Doğrulayıcı bileşeni örneği, CustomValidation Bu makalenin aşağıdaki bölümlerinde kullanılır:

• Doğrulayıcı bileşeniyle iş mantığı doğrulaması
• Doğrulayıcı bileşeniyle sunucu doğrulaması

Bir doğrulayıcı bileşeni oluştur ComponentBase :

• Form, EditContext bileşenin geçişli bir parametresidir .
• Doğrulayıcı bileşeni başlatıldığında, ValidationMessageStore form hatalarının geçerli bir listesini korumak için yeni bir oluşturulur.
• İleti deposu, form bileşenindeki geliştirici kodu yöntemi çağırdığında hata alır DisplayErrors . Hatalar, DisplayErrors içindeki yöntemine geçirilir Dictionary<string, List<string>> . Sözlükte, anahtar bir veya daha fazla hata içeren form alanının adıdır. Değer, hata listesidir.
• Aşağıdakilerden herhangi biri oluştuğunda iletiler temizlenir:
  • EditContextOlay oluşturulduğunda doğrulama istenir OnValidationRequested . Tüm hatalar temizlenir.
  • Olay ortaya çıktığında formdaki bir alan değişir OnFieldChanged . Yalnızca alanın hataları temizlenir.
  • ClearErrorsYöntemi geliştirici kodu tarafından çağrılır. Tüm hatalar temizlenir.

CustomValidation.cs (bir test uygulamasında kullanılıyorsa, ad alanını BlazorSample uygulamanın ad alanıyla eşleşecek şekilde değiştirin):

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

namespace BlazorSample
{
    public class CustomValidation : ComponentBase
    {
        private ValidationMessageStore messageStore;
    
        [CascadingParameter]
        private EditContext CurrentEditContext { get; set; }
    
        protected override void OnInitialized()
        {
            if (CurrentEditContext == null)
            {
                throw new InvalidOperationException(
                    $"{nameof(CustomValidation)} requires a cascading " +
                    $"parameter of type {nameof(EditContext)}. " +
                    $"For example, you can use {nameof(CustomValidation)} " +
                    $"inside an {nameof(EditForm)}.");
            }
    
            messageStore = new ValidationMessageStore(CurrentEditContext);
    
            CurrentEditContext.OnValidationRequested += (s, e) => 
                messageStore.Clear();
            CurrentEditContext.OnFieldChanged += (s, e) => 
                messageStore.Clear(e.FieldIdentifier);
        }
    
        public void DisplayErrors(Dictionary<string, List<string>> errors)
        {
            foreach (var err in errors)
            {
                messageStore.Add(CurrentEditContext.Field(err.Key), err.Value);
            }
    
            CurrentEditContext.NotifyValidationStateChanged();
        }
    
        public void ClearErrors()
        {
            messageStore.Clear();
            CurrentEditContext.NotifyValidationStateChanged();
        }
    }
}

Doğrulayıcı bileşeniyle iş mantığı doğrulaması

Genel iş mantığı doğrulaması için, bir sözlükte form hataları alan bir Doğrulayıcı bileşeni kullanın.

Temel doğrulama , form modelinin, formu barındıran bileşen içinde (doğrudan bileşen üzerinde veya bir alt sınıfta Üyeler olarak) tanımlanmış olduğu durumlarda faydalıdır. Bir doğrulayıcı bileşeni kullanımı, bağımsız bir model sınıfının birkaç bileşen genelinde kullanıldığı durumlarda önerilir.

Aşağıdaki örnekte:

• Starfleet Starship DatabaseÖrnek form bölümündeki formun kısaltılmış bir sürümü ( FormExample2 Bileşen) yalnızca starsevk 'in sınıflandırmasını ve açıklamasını kabul eden kullanılır. Bileşen forma dahil olmadığından, form gönderimi sırasında veri ek açıklaması doğrulaması tetiklenmez DataAnnotationsValidator .
• CustomValidationBu makalenin Doğrulayıcı bileşenleri bölümündeki bileşen kullanılır.
• DescriptionKullanıcı " Defense " teslim sınıflandırması () seçerse, doğrulama için bir değer gerekir () Classification .

Bir bileşende doğrulama iletileri ayarlandığında, bu, doğrulayıcının ValidationMessageStore ve EditForm doğrulama özetinde gösterilir.

Pages/FormExample5.razor:

@page "/form-example-5"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample5> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>

    <button type="submit">Submit</button>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private CustomValidation customValidation;
    private Starship starship = new Starship() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        customValidation.ClearErrors();

        var errors = new Dictionary<string, List<string>>();

        if (starship.Classification == "Defense" &&
                string.IsNullOrEmpty(starship.Description))
        {
            errors.Add(nameof(starship.Description),
                new List<string>() { "For a 'Defense' ship classification, " +
                "'Description' is required." });
        }

        if (errors.Any())
        {
            customValidation.DisplayErrors(errors);
        }
        else
        {
            Logger.LogInformation("HandleValidSubmit called: Processing the form");

            // Process the valid form
        }
    }
}

Doğrulayıcı bileşeniyle sunucu doğrulaması

Sunucu doğrulaması, istemci tarafı doğrulamaya ek olarak de kullanılabilir:

• bileşeniyle formda istemci tarafı doğrulamasını DataAnnotationsValidator işleme.
• Form istemci tarafı doğrulamasını geçtiğinde ( çağrılır), form işleme için bir OnValidSubmit arka uç sunucu EditContext.Model API'sini gönderin.
• Sunucuda işlem modeli doğrulaması.
• Sunucu API'si hem yerleşik çerçeve veri açıklamalarını doğrulamayı hem de geliştirici tarafından sağlanan özel doğrulama mantığını içerir. Doğrulama sunucuda başarılı olursa, formu işle ve bir başarı durum kodu () geri 200 - OK gönder. Doğrulama başarısız olursa, bir hata durum kodu ( 400 - Bad Request ) ve alan doğrulama hataları girin.
• Formu başarıyla devre dışı bırakma veya hataları görüntüleme.

Temel doğrulama, formun modelinin, formu barındıran bileşen içinde, doğrudan bileşende veya bir alt sınıfta üye olarak tanımlandığı durumlarda kullanışlıdır. Bağımsız bir model sınıfının çeşitli bileşenlerde kullanılması için doğrulayıcı bileşeninin kullanılması önerilir.

Aşağıdaki örnek temel alınan bir örnektir:

• Proje Blazor WebAssembly şablonundan oluşturulan barındırılan Blazor WebAssembly bir çözüm. Bu yaklaşım, barındırılan güvenlik belgelerinde açıklanan Blazor güvenli barındırılan çözümlerden herhangi biri Blazor WebAssembly için de desteklemektedir.
• Örnek Starship form bölümündeki model ( Starship.cs ).
• Doğrulayıcı CustomValidation bileşenleri bölümünde gösterilen bileşen.

Modeli Starship ( Starship.cs ) çözümün projesine, böylece hem istemci hem de sunucu uygulamaları modeli Shared kullanabilir. Ad alanını paylaşılan uygulamanın ad alanıyla eş olacak şekilde ekleyin veya güncelleştirin (örneğin, namespace BlazorSample.Shared ). Model için veri ek açıklamaları gerekli olduğu için projenin proje dosyasına için System.ComponentModel.Annotations Shared bir paket başvurusu ekleyin:

<ItemGroup>
  <PackageReference Include="System.ComponentModel.Annotations" Version="{VERSION}" />
</ItemGroup>

Yer tutucus un the latest non-preview version for the {VERSION} package, see the package Version History at NuGet.org for . System.ComponentModel.Annotations

Projede, Server yıldızlık doğrulama isteklerini işlemesi ve başarısız doğrulama iletilerini geri göndermesi için bir denetleyici ekleyin. Projenin son deyiminde ve denetleyici using sınıfı için ad alanlarını Shared namespace güncelleştirin. Denetleyici, veri açıklamalarını doğrulamaya (istemci tarafı ve sunucu tarafı) ek olarak, kullanıcı gemi sınıflandırmasını () seçerse, geminin açıklaması ( ) için bir değer Description Defense sağlanmış olduğunu Classification doğrular.

Form sunucuya gönderiken gelecek form aynı doğrulama istemci tarafını gerçekleştirmey olduğundan, sevk sınıflandırması için doğrulama yalnızca denetleyicide sunucu Defense tarafında gerçekleşir. İstemci tarafı doğrulama olmadan sunucu tarafı doğrulama, sunucu üzerinde kullanıcı girişinin özel iş mantığı doğrulaması gerektiren uygulamalarda yaygındır. Örneğin, bir kullanıcı için depolanan verilerden alınan özel bilgilerin kullanıcı girişini doğrulamak için gerekli olabilir. Özel verilerin istemci tarafı doğrulama için istemciye gönderilene olmadığı açıktır.

Controllers/StarshipValidation.cs:

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Microsoft.Identity.Web.Resource;
using BlazorSample.Shared;

namespace BlazorSample.Server.Controllers
{
    [Authorize]
    [ApiController]
    [Route("[controller]")]
    public class StarshipValidationController : ControllerBase
    {
        private readonly ILogger<StarshipValidationController> logger;

        public StarshipValidationController(
            ILogger<StarshipValidationController> logger)
        {
            this.logger = logger;
        }

        [HttpPost]
        public async Task<IActionResult> Post(Starship starship)
        {
            try
            {
                if (starship.Classification == "Defense" && 
                    string.IsNullOrEmpty(starship.Description))
                {
                    ModelState.AddModelError(nameof(starship.Description),
                        "For a 'Defense' ship " +
                        "classification, 'Description' is required.");
                }
                else
                {
                    logger.LogInformation("Processing the form asynchronously");

                    // Process the valid form
                    // async ...

                    return Ok(ModelState);
                }
            }
            catch (Exception ex)
            {
                logger.LogError("Validation Error: {Message}", ex.Message);
            }

            return BadRequest(ModelState);
        }
    }
}

Barındırılan bir uygulamada yukarıdaki denetleyiciyi kullanıyorsanız, ad alanını ( ) uygulamanın denetleyici ad Blazor WebAssembly BlazorSample.Server.Controllers alanıyla eş olacak şekilde güncelleştirin.

Sunucuda model bağlama doğrulama hatası oluştuğunda , ( ) normalde ile varsayılan ApiController bir hatalı istek ApiControllerAttribute yanıtı ValidationProblemDetails döndürür. Aşağıdaki örnekte formun tüm alanları gönderilmez ve form doğrulama başarısız olduğunda gösterildiği gibi yanıt yalnızca doğrulama hatalarına göre daha Starfleet Starship Database fazla veri içerir:

{
  "title": "One or more validation errors occurred.",
  "status": 400,
  "errors": {
    "Identifier": ["The Identifier field is required."],
    "Classification": ["The Classification field is required."],
    "IsValidatedDesign": ["This form disallows unapproved ships."],
    "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
  }
}

Sunucu API'si önceki varsayılan JSON yanıtını döndürürse, istemcinin yanıtı geliştirici kodunda ayrıştırarak form doğrulama hatası işleme için düğümün alt ayarlarını elde errors etmek mümkündür. Dosyayı ayrıştırmak için geliştirici kodu yazmak iyi bir uygulamadır. JSON'u el ile ayrıştırmak için çağrısı sonrasında Dictionary<string, List<string>> bir hata üretmesi ReadFromJsonAsync gerekir. İdeal olarak, sunucu API'si yalnızca doğrulama hatalarını iade eder:

{
  "Identifier": ["The Identifier field is required."],
  "Classification": ["The Classification field is required."],
  "IsValidatedDesign": ["This form disallows unapproved ships."],
  "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
}

Sunucu API'sini yalnızca doğrulama hatalarını iade etmek için yanıtını değiştirmek için, içinde ile açıklama ek açıklamalı eylemlerde çağrılan temsilciyi ApiControllerAttribute Startup.ConfigureServices değiştirme. API uç noktası () /StarshipValidation için ile bir BadRequestObjectResult dönüş. ModelStateDictionary Diğer API uç noktaları için nesne sonucu yeni bir döndürerek varsayılan davranışı ValidationProblemDetails koruyabilirsiniz.

Ad Microsoft.AspNetCore.Mvc alanını uygulamanın en Startup.cs üstüne Server ekleyin:

using Microsoft.AspNetCore.Mvc;

içinde Startup.ConfigureServices uzantı yöntemini bulun ve aşağıdaki AddControllersWithViews çağrıyı ConfigureApiBehaviorOptions ekleyin:

services.AddControllersWithViews()
    .ConfigureApiBehaviorOptions(options =>
    {
        options.InvalidModelStateResponseFactory = context =>
        {
            if (context.HttpContext.Request.Path == "/StarshipValidation")
            {
                return new BadRequestObjectResult(context.ModelState);
            }
            else
            {
                return new BadRequestObjectResult(
                    new ValidationProblemDetails(context.ModelState));
            }
        };
    });

Daha fazla bilgi için bkz. Web API'ASP.NET Core hataları işleme.

Projede Client Doğrulayıcı CustomValidation bileşenleri bölümünde gösterilen bileşeni ekleyin. Ad alanını uygulamayla eş olacak şekilde güncelleştirin (örneğin, namespace BlazorSample.Client ).

Projesinde Client form, Starfleet Starship Database bileşenin yardımıyla sunucu doğrulama hatalarını gösterecek şekilde CustomValidation güncelleştirilir. Sunucu API'si doğrulama iletilerini döndür olduğunda bileşenin CustomValidation değerine ValidationMessageStore eklenir. Hatalar formun doğrulama özeti EditContext tarafından görüntülenmek için formda kullanılabilir.

Aşağıdaki FormExample6 bileşende, projenin ad alanını Shared ( ) paylaşılan projenin ad alanına @using BlazorSample.Shared güncelleştirin. Formun yetkilendirme gerektirdiğini, bu nedenle kullanıcının forma gitmek için uygulamada oturum açtırmış olması gerektiğini unutmayın.

Pages/FormExample6.razor:

@page "/form-example-6"
@using System.Net
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.Extensions.Logging
@using BlazorSample.Shared
@attribute [Authorize]
@inject HttpClient Http
@inject ILogger<FormExample6> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification" disabled="@disabled">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" disabled="@disabled" />
        </label>
    </p>

    <button type="submit" disabled="@disabled">Submit</button>

    <p style="@messageStyles">
        @message
    </p>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private bool disabled;
    private string message;
    private string messageStyles = "visibility:hidden";
    private CustomValidation customValidation;
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private async Task HandleValidSubmit(EditContext editContext)
    {
        customValidation.ClearErrors();

        try
        {
            var response = await Http.PostAsJsonAsync<Starship>(
                "StarshipValidation", (Starship)editContext.Model);

            var errors = await response.Content
                .ReadFromJsonAsync<Dictionary<string, List<string>>>();

            if (response.StatusCode == HttpStatusCode.BadRequest && 
                errors.Any())
            {
                customValidation.DisplayErrors(errors);
            }
            else if (!response.IsSuccessStatusCode)
            {
                throw new HttpRequestException(
                    $"Validation failed. Status Code: {response.StatusCode}");
            }
            else
            {
                disabled = true;
                messageStyles = "color:green";
                message = "The form has been processed.";
            }
        }
        catch (AccessTokenNotAvailableException ex)
        {
            ex.Redirect();
        }
        catch (Exception ex)
        {
            Logger.LogError("Form processing error: {Message}", ex.Message);
            disabled = true;
            messageStyles = "color:red";
            message = "There was an error processing the form.";
        }
    }
}

InputText giriş olayına göre

Olay InputText yerine olayı kullanan özel bir bileşen oluşturmak input için bileşenini change kullanın. Olay input kullanımı, her tuş vuruşu için alan doğrulamasını tetikler.

Aşağıdaki örnek sınıfını ExampleModel kullanır.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string Name { get; set; }
}

Aşağıdaki bileşen CustomInputText çerçevenin bileşenini devralıyor InputText ve olay bağlamayı olayına oninput ayarlar.

Shared/CustomInputText.razor:

@inherits InputText

<input @attributes="AdditionalAttributes" 
       class="@CssClass" 
       @bind="CurrentValueAsString" 
       @bind:event="oninput" />

Bileşen CustomInputText her yerde InputText kullanılabilir. Aşağıdaki bileşen FormExample7 paylaşılan bileşeni CustomInputText kullanır.

Pages/FormExample7.razor:

@page "/form-example-7"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample7> Logger

<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <CustomInputText @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>

<p>
    CurrentValue: @exampleModel.Name
</p>

@code {
    private ExampleModel exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Radyo düğmeleri

Bir formda radyo düğmeleriyle çalışırken, radyo düğmeleri bir grup olarak değerlendirilene veri bağlama diğer öğelerden farklı şekilde ele alınarak değerlendirilir. Her radyo düğmesinin değeri sabittir, ancak radyo düğmesi grubunun değeri seçilen radyo düğmesinin değeridir. Aşağıdaki örnekte şunların nasıl gerçekleştirnli olduğu gösterir:

• Radyo düğmesi grubu için veri bağlamayı işleme.
• Özel bileşen kullanarak doğrulama InputRadio<TValue> desteği.

Shared/InputRadio.razor:

@using System.Globalization
@inherits InputBase<TValue>
@typeparam TValue

<input @attributes="AdditionalAttributes" type="radio" value="@SelectedValue" 
       checked="@(SelectedValue.Equals(Value))" @onchange="OnChange" />

@code {
    [Parameter]
    public TValue SelectedValue { get; set; }

    private void OnChange(ChangeEventArgs args)
    {
        CurrentValueAsString = args.Value.ToString();
    }

    protected override bool TryParseValueFromString(string value, 
        out TValue result, out string errorMessage)
    {
        var success = BindConverter.TryConvertTo<TValue>(
            value, CultureInfo.CurrentCulture, out var parsedValue);
        if (success)
        {
            result = parsedValue;
            errorMessage = null;

            return true;
        }
        else
        {
            result = default;
            errorMessage = $"{FieldIdentifier.FieldName} field isn't valid.";

            return false;
        }
    }
}

Genel tür parametreleri ( ) hakkında daha fazla bilgi @typeparam için aşağıdaki makalelere bakın:

• RazorASP.NET Core için sözdizimi başvurusu
• RazorASP.NET Core Bileşen
• ASP.NET Core Blazor şablonlu bileşenler

Aşağıdaki RadioButtonExample bileşen, kullanıcıdan InputRadio derecelendirme almak ve doğrulamak için önceki bileşeni kullanır:

Pages/RadioButtonExample.razor:

@page "/radio-button-example"
@using System.ComponentModel.DataAnnotations
@using Microsoft.Extensions.Logging
@inject ILogger<RadioButtonExample> Logger

<h1>Radio Button Example</h1>

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    @for (int i = 1; i <= 5; i++)
    {
        <label>
            <InputRadio name="rate" SelectedValue="@i" @bind-Value="model.Rating" />
            @i
        </label>
    }

    <button type="submit">Submit</button>
</EditForm>

<p>You chose: @model.Rating</p>

@code {
    private Model model = new();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }

    public class Model
    {
        [Range(1, 5)]
        public int Rating { get; set; }
    }
}

Doğrulama Özeti ve Doğrulama İletisi bileşenleri

Bileşen, ValidationSummary Doğrulama Özeti Etiketi Yardımcı'sı ile benzer olan tüm doğrulama iletilerini özetler:

<ValidationSummary />

parametresiyle belirli bir model için çıkış doğrulama Model iletileri:

<ValidationSummary Model="@starship" />

Bileşen, ValidationMessage<TValue> Doğrulama İletisi Etiket Yardımcı'sı ile benzer şekilde belirli bir alan için doğrulama iletilerini görüntüler. özniteliğiyle doğrulama alanını ve For model özelliğini adlandıran bir lambda ifadesi belirtin:

<ValidationMessage For="@(() => starship.MaximumAccommodation)" />

ve ValidationMessage<TValue> bileşenleri rastgele öznitelikleri ValidationSummary destekler. Bir bileşen parametresiyle eşleşmez herhangi bir öznitelik, oluşturulan veya öğesine <div> <ul> eklenir.

Uygulamanın stil sayfasında ( veya ) doğrulama iletilerinin stilini wwwroot/css/app.css wwwroot/css/site.css denetleme. Varsayılan sınıf validation-message doğrulama iletilerinin metin rengini kırmızı olarak ayarlar:

.validation-message {
    color: red;
}

Özel doğrulama öznitelikleri

Özel doğrulama özniteliği kullanılırken bir doğrulama sonucuyla doğru ilişkilendirilen bir alan olduğundan emin olmakiçin, oluşturma işlemi için doğrulama MemberName bağlamlarını ValidationResult kullanın.

CustomValidator.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class CustomValidator : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, 
        ValidationContext validationContext)
    {
        ...

        return new ValidationResult("Validation message to user.",
            new[] { validationContext.MemberName });
    }
}

Blazor veri ek açıklamaları doğrulama paketi

Microsoft.AspNetCore.Components.DataAnnotations.Validation, bileşenini kullanarak doğrulama deneyimi boşluklarını dolduran bir DataAnnotationsValidator pakettir. Paketi şu anda deneyseldir.

[CompareProperty] özniteliği

CompareAttribute, doğrulama sonucu belirli bir DataAnnotationsValidator üyeyle ilişkilendirilene kadar bileşenle iyi çalışmaz. Bu durum alan düzeyinde doğrulama ile modelin tamamı göndermede doğrulanması arasında tutarsız davranışa neden olabilir. Deneysel Microsoft.AspNetCore.Components.DataAnnotations.Validation paket, bu sınırlamalara göre çalışan ComparePropertyAttribute ek bir doğrulama özniteliği () sunar. Bir Blazor uygulamada, [CompareProperty] özniteliğinin yerini doğrudan [Compare] alandır.

İç içe geçmiş modeller, koleksiyon türleri ve karmaşık türler

Blazor yerleşik ile veri ek açıklamalarını kullanarak form girişini doğrulama desteği DataAnnotationsValidator sağlar. Ancak, yalnızca koleksiyon veya karmaşık tür özellikleri olmayan forma bağlı modelin üst DataAnnotationsValidator düzey özelliklerini doğrular.

Bağlı modelin koleksiyon ve karmaşık tür özellikleri de dahil olmak üzere nesne grafın tamamını doğrulamak için deneysel ObjectGraphDataAnnotationsValidator paket tarafından sağlanan nesnesini Microsoft.AspNetCore.Components.DataAnnotations.Validation kullanın:

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
    <ObjectGraphDataAnnotationsValidator />
    ...
</EditForm>

ile model özelliklerine açıklama ek açıklama. [ValidateComplexType] Aşağıdaki model sınıflarında sınıfı, modelin forma ne zaman bağlı olduğunu ShipDescription doğrulamak için ek veri ek açıklamaları içerir:

Starship.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    ...

    [ValidateComplexType]
    public ShipDescription ShipDescription { get; set; } = 
        new ShipDescription();

    ...
}

ShipDescription.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class ShipDescription
{
    [Required]
    [StringLength(40, ErrorMessage = "Description too long (40 char).")]
    public string ShortDescription { get; set; }

    [Required]
    [StringLength(240, ErrorMessage = "Description too long (240 char).")]
    public string LongDescription { get; set; }
}

Form doğrulamasına göre gönder düğmesini etkinleştirme

Form doğrulamaya göre gönder düğmesini etkinleştirmek ve devre dışı bırakmak için aşağıdaki örnek:

• Önceki formun (bileşen) yalnızca gemi tanımlayıcısı için bir değer kabul eden Starfleet Starship Database FormExample2 kısaltılmış bir sürümünü kullanır. Türün Starship bir örneği oluşturulduğunda diğer özellikler geçerli varsayılan Starship değerleri alır.
• Bileşen başlatılırken EditContext modeli atamak için formun 'larını kullanır.
• Gönder düğmesini etkinleştirmek ve devre dışı bırakmak OnFieldChanged için bağlamın geri çağırmada formu doğrular.
• yönteminde IDisposable olay işleyicisini uygulayan ve aboneliğini Dispose kaldıran. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Pages/FormExample9.razor:

@page "/form-example-9"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample9> Logger

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private Starship starship = 
        new Starship()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private bool formInvalid = false;
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(starship);
        editContext.OnFieldChanged += HandleFieldChanged;
    }

    private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
    {
        formInvalid = !editContext.Validate();
        StateHasChanged();
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }

    public void Dispose()
    {
        editContext.OnFieldChanged -= HandleFieldChanged;
    }
}

Bir form geçerli değerlerle önceden yüklenmemişse ve form yüklemede düğmeyi devre dışı bırakmak Submit isterseniz olarak formInvalid true ayarlayın.

Önceki yaklaşımın yan etkisi, kullanıcı herhangi bir alanla etkileşime girdikten sonra doğrulama özetinin (bileşen) geçersiz ValidationSummary alanlarla doldurulmasıdır. Bu senaryoyu aşağıdaki yöntemlerden birini kullanabilirsiniz:

• Formda bileşen ValidationSummary kullanma.
• Gönder ValidationSummary düğmesi seçildiğinde bileşeni görünür hale (örneğin, bir HandleValidSubmit yöntemde).

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary style="@displaySummary" />

    ...

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private string displaySummary = "display:none";

    ...

    private void HandleValidSubmit()
    {
        displaySummary = "display:block";
    }
}

Sorun giderme

InvalidOperationException: EditForm için model parametresi veya EditContext parametresi gerekir ancak her ikisi birden gerekli değildir.

bir veya EditForm atadığınız Model onaylayın. EditContext Aynı form için her ikisini birden kullanmayın.

uygulamasına Model atarken, aşağıdaki örnekte olduğu gibi model türünün örneği ekli olduğunu onaylayın:

private ExampleModel exampleModel = new ExampleModel();

Ek kaynaklar

• ASP.NET Core Blazor WebAssembly barındırılan bir uygulamanın güvenliğini Azure Active Directory
• Blazor WebAssemblyAzure Active Directory B2C ile ASP.NET Core barındırılan bir uygulamanın güvenliğini sağlama
• barındırılan bir ASP.NET Core Blazor WebAssembly uygulamasının sunucuyla güvenliğini Identity sağlama