Aracılığıyla paylaş


ASP.NET Core Blazor formlara genel bakış

Not

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

Uyarı

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

Bu makalede, içindeki Blazorformların nasıl kullanılacağı açıklanmaktadır.

Giriş bileşenleri ve formları

Çerçeve Blazor formları destekler ve yerleşik giriş bileşenleri sağlar:

Not

Desteklenmeyen ASP.NET Temel doğrulama özellikleri, Desteklenmeyen doğrulama özellikleri bölümünde ele alınmıştır.

Ad Microsoft.AspNetCore.Components.Forms alanı aşağıdakileri sağlar:

  • Form öğelerini, durumunu ve doğrulamasını yönetmeye yönelik sınıflar.
  • Yerleşik Input* bileşenlere erişim.

Proje şablonundan Blazor oluşturulan bir proje, uygulamanın _Imports.razor dosyasındaki ad alanını içerir ve bu da ad alanını uygulamanın Razor bileşenleri için kullanılabilir hale getirir.

Standart HTML formları desteklenir. Normal HTML <form> etiketini kullanarak bir form oluşturun ve gönderilen form isteğini işlemek için bir @onsubmit işleyici belirtin.

StarshipPlainForm.razor:

@page "/starship-plain-form"
@inject ILogger<StarshipPlainForm> Logger

<form method="post" @onsubmit="Submit" @formname="starship-plain-form">
    <AntiforgeryToken />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

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

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

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        public string? Id { get; set; }
    }
}
@page "/starship-plain-form"
@inject ILogger<StarshipPlainForm> Logger

<form method="post" @onsubmit="Submit" @formname="starship-plain-form">
    <AntiforgeryToken />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

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

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

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        public string? Id { get; set; }
    }
}

Önceki StarshipPlainForm bileşende:

  • Form, <form> öğesinin göründüğü yerde işlenir. Form, formu çerçeveye @formname benzersiz olarak tanımlayan Blazor yönerge özniteliğiyle adlandırılır.
  • Model, bileşenin @code bloğunda oluşturulur ve bir ortak özellikte (Model ) tutulur. özniteliği, [SupplyParameterFromForm] ilişkili özelliğin değerinin form verilerinden sağlanması gerektiğini gösterir. İstekteki, özelliğin adıyla eşleşen veriler, o özelliğe bağlanır.
  • Bileşen InputText , dize değerlerini düzenlemeye yönelik bir giriş bileşenidir. @bind-Value yönerge özniteliği model özelliğini bileşenin Model.Id özelliğine InputText bağlarValue.
  • Submit yöntemi, geri çağırma için @onsubmit işleyici olarak kaydedilir. İşleyici, form kullanıcı tarafından gönderildiğinde çağrılır.

Önemli

Yönerge özniteliğini @formname her zaman benzersiz bir form adıyla kullanın.

Blazor , yanıtı mevcut DOM'a uygulamak için isteği keserek sayfa gezintisini ve form işlemeyi geliştirir ve işlenen formun mümkün olduğunca çoğunu korur. Geliştirme, sayfayı tam olarak yükleme gereksinimini önler ve bileşen sunucuda işlenmiş olsa da tek sayfalı bir uygulamaya (SPA) benzer şekilde çok daha sorunsuz bir kullanıcı deneyimi sağlar. Daha fazla bilgi için bkz. ASP.NET Çekirdek Blazor gezintisi.

Akış işleme , düz HTML formları için desteklenir. Bir form oluşturulurken POST, yalnızca formun işleyicileri içindeki DOM güncelleştirmelerinin akışla aktarıldığını unutmayın (örneğin, @onsubmit). OnInitializedAsync içindeki güncellemeler yalnızca GET istekleri için sürekli olarak aktarılır. Daha fazla bilgi için bkz. POST yanıtlarının yükleme aşamasında akışa izin verme (dotnet/aspnetcore #50994).

Not

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

Önceki örnek, formun içinde AntiforgeryToken bileşenini ekleyerek antiforgery desteği içerir. Antiforgery desteği, bu makalenin Antiforgery desteği bölümünde daha ayrıntılı olarak açıklanmıştır.

Başka bir öğenin DOM olaylarını temel alarak bir form göndermek için, örneğin oninput veya onblur gibi, formu göndermek üzere JavaScript kullanın.

Basit formlar kullanmak yerine, uygulamalarda bir form genel olarak, çerçevenin Blazor bileşenini kullanarak Blazor'in yerleşik form desteğiyle tanımlanır. Aşağıdaki Razor bileşen, bir Razor bileşeni kullanarak bir web formunu görüntülemek için tipik öğeleri, bileşenleri ve EditForm kodu gösterir.

Form, çerçevenin BlazorEditForm bileşeni kullanılarak tanımlanır. Aşağıdaki Razor bileşen, bir Razor bileşeni kullanarak bir web formunu görüntülemek için tipik öğeleri, bileşenleri ve EditForm kodu gösterir.

Starship1.razor:

@page "/starship-1"
@inject ILogger<Starship1> Logger

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

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

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

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        public string? Id { get; set; }
    }
}
@page "/starship-1"
@inject ILogger<Starship1> Logger

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

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

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

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        public string? Id { get; set; }
    }
}

Önceki Starship1 bileşende:

  • EditForm bileşeni, <EditForm> ögesinin göründüğü yerde oluşturulur. Form, formu FormName çerçevesine benzersiz olarak tanımlayan Blazor özelliğiyle adlandırılır.
  • Model, bileşenin @code bloğunda oluşturulur ve bir ortak özellikte (Model ) tutulur. özelliği parametresine EditForm.Model atanır. özniteliği, [SupplyParameterFromForm] ilişkili özelliğin değerinin form verilerinden sağlanması gerektiğini gösterir. İstekteki, özelliğin adıyla eşleşen veriler, o özelliğe bağlanır.
  • Bileşen InputText , dize değerlerini düzenlemeye yönelik bir giriş bileşenidir . @bind-Value yönerge özniteliği model özelliğini bileşenin Model.Id özelliğine InputText bağlarValue.
  • Submit yöntemi, OnSubmit geri çağırma işleyicisi olarak kaydedilir. İşleyici, form kullanıcı tarafından gönderildiğinde çağrılır.

Önemli

FormName özelliğini her zaman benzersiz bir form adıyla kullanın.

Blazor , bileşenler için EditForm sayfa gezintisini ve form işlemeyi geliştirir. Daha fazla bilgi için bkz. ASP.NET Çekirdek Blazor gezintisi.

Akış işlemeEditForm için desteklenmektedir. Bir form oluşturulurken POST, yalnızca formun işleyicileri içindeki DOM güncelleştirmelerinin akışla aktarıldığını unutmayın (örneğin, OnValidSubmit). OnInitializedAsync içindeki güncellemeler yalnızca GET istekleri için sürekli olarak aktarılır. Daha fazla bilgi için bkz. POST yanıtlarının yükleme aşamasında akışa izin verme (dotnet/aspnetcore #50994).

Not

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

@page "/starship-1"
@inject ILogger<Starship1> Logger

<EditForm Model="Model" OnSubmit="Submit">
    <InputText @bind-Value="Model!.Id" />
    <button type="submit">Submit</button>
</EditForm>

@code {
    public Starship? Model { get; set; }

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

    private void Submit()
    {
        Logger.LogInformation("Model.Id = {Id}", Model?.Id);
    }

    public class Starship
    {
        public string? Id { get; set; }
    }
}

Önceki Starship1 bileşende:

  • EditForm bileşeni, <EditForm> ögesinin göründüğü yerde oluşturulur.
  • Model, bileşenin @code bloğunda oluşturulur ve bir özel alanda (model ) tutulur. Alan, EditForm.Model parametresine atanır.
  • Bileşen InputText , dize değerlerini düzenlemeye yönelik bir giriş bileşenidir. @bind-Value yönerge özniteliği Model.Id model özelliğini bileşenin InputText özelliğine Value bağlar†.
  • Submit yöntemi, OnSubmit geri çağırma işleyicisi olarak kaydedilir. İşleyici, form kullanıcı tarafından gönderildiğinde çağrılır.

† Özellik bağlama hakkında daha fazla bilgi için bkz. ASP.NET Core Blazor veri bağlama.

Sonraki örnekte, önceki bileşen, bileşeninde Starship2 formu oluşturmak için değiştirilmiştir:

  • OnSubmit , form kullanıcı tarafından gönderildiğinde geçerliyse OnValidSubmit ile değiştirilir ve bu, atanan olay işleyicisini işler.
  • ValidationSummary Form gönderiminde form geçersiz olduğunda doğrulama iletilerini görüntülemek için bir bileşen eklenir.
  • Veri ek açıklamaları doğrulayıcı (DataAnnotationsValidator bileşen†), veri ek açıklamalarını kullanarak doğrulama desteği ekler:
    • <input> Düğme seçildiğinde form alanı boş Submit bırakılırsa, doğrulama özetinde (ValidationSummarybileşen‡) ("The Id field is required.") bir hata görüntülenir ve Submitçağrılmaz.
    • <input> Düğme seçildiğinde form alanı on karakterden fazla karakter Submit içeriyorsa, doğrulama özetinde ("Id is too long.") bir hata görüntülenir. Submit çağrılmaz.
    • <input> Düğme seçildiğinde form alanı geçerli bir değer Submit içeriyorsa, Submit çağrılır.

†Birleşen DataAnnotationsValidator, Doğrulayıcı bileşeni bölümünde ele alınmıştır. ValidationSummary‡Bileşen, Doğrulama Özeti ve Doğrulama İletisi bileşenleri bölümünde ele alınmıştır.

Starship2.razor:

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

<EditForm Model="Model" OnValidSubmit="Submit" FormName="Starship2">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <label>
        Identifier: 
        <InputText @bind-Value="Model!.Id" />
    </label>
    <button type="submit">Submit</button>
</EditForm>

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

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

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}
@page "/starship-2"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship2> Logger

<EditForm Model="Model" OnValidSubmit="Submit" FormName="Starship2">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <label>
        Identifier: 
        <InputText @bind-Value="Model!.Id" />
    </label>
    <button type="submit">Submit</button>
</EditForm>

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

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

    private void Submit() => Logger.LogInformation("Id = {Id}", Model?.Id);

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}
@page "/starship-2"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship2> Logger

<EditForm Model="Model" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText @bind-Value="Model!.Id" />
    <button type="submit">Submit</button>
</EditForm>

@code {
    public Starship? Model { get; set; }

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

    private void Submit()
    {
        Logger.LogInformation("Id = {Id}", Model?.Id);
    }

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

Form gönderimini işleme

form EditForm gönderimini işlemek için aşağıdaki geri çağırmaları sağlar:

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

Form veya alanı temizleme

Modeli varsayılan durumuna geri döndürerek formu sıfırlayın; bu durum bir EditFormişaretlemenin içinde veya dışında gerçekleştirilebilir:

<button @onclick="ClearForm">Clear form</button>

...

private void ClearForm() => Model = new();

Alternatif olarak, açık Razor bir ifade kullanın:

<button @onclick="@(() => Model = new())">Clear form</button>

Model değerini varsayılan durumuna döndürerek bir alanı sıfırlayın:

<button @onclick="ResetId">Reset Identifier</button>

...

private void ResetId() => Model!.Id = string.Empty;

Alternatif olarak, açık Razor bir ifade kullanın:

<button @onclick="@(() => Model!.Id = string.Empty)">Reset Identifier</button>

Bir olay işleyicisi çağrıldıktan sonra bileşeni yeniden başlatmak için çerçeve tarafından StateHasChanged otomatik olarak çağrıldığından yukarıdaki örneklerde StateHasChanged çağrı Blazor yapmanız gerekmez. Bir form veya alanı temizleyen yöntemleri çağırmak için bir olay işleyicisi kullanılmıyorsa geliştirici kodu bileşeni yeniden oluşturmak için çağırmalıdır StateHasChanged .

Antiforgery desteği

Antiforgery hizmetleri, dosyada Blazor çağrıldığında AddRazorComponents uygulamalara otomatik olarak eklenirProgram.

Uygulama, dosyadaki istek işleme işlem hattını UseAntiforgery çağırarak Program Antiforgery Ara Yazılımını kullanır. UseAntiforgery çağrısından sonra UseRouting çağrılır. ve UseRoutingçağrıları UseEndpoints varsa, çağrısı UseAntiforgery bunların arasına girmelidir. ve UseAntiforgeryçağrılarının UseAuthentication ardından için bir çağrı UseAuthorization yapılmalıdır.

Bileşen AntiforgeryToken , bir kötü amaçlı yazılımdan koruma belirtecini gizli bir alan olarak işler ve [RequireAntiforgeryToken] özniteliği, kötü amaçlı yazılımdan korumayı etkinleştirir. Bir antiforgery denetimi başarısız olursa, bir 400 - Bad Request yanıt oluşturulur ve form işlenmez.

tabanlı EditFormAntiforgeryToken formlar için bileşen ve [RequireAntiforgeryToken] öznitelik otomatik olarak eklenerek kötü amaçlı yazılımdan koruma sağlanır.

HTML <form> öğesini temel alan formlar için, bileşeni forma el ile ekleyin AntiforgeryToken :

<form method="post" @onsubmit="Submit" @formname="starshipForm">
    <AntiforgeryToken />
    <input id="send" type="submit" value="Send" />
</form>

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

@code{
    private bool submitted = false;

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

Uyarı

ya da EditForm HTML <form> öğesini temel alan formlar için, özniteliğine required: false geçirilerek [RequireAntiforgeryToken] sahte koruma devre dışı bırakılabilir. Aşağıdaki örnek, sahteciliği devre dışı bırakır ve genel uygulamalar için önerilmez :

@using Microsoft.AspNetCore.Antiforgery
@attribute [RequireAntiforgeryToken(required: false)]

Daha fazla bilgi için bkz. ASP.NET Çekirdek Blazor kimlik doğrulaması ve yetkilendirme.

Fazla paylaşım saldırılarını azaltma

Durağan olarak işlenmiş sunucu tarafı formlar, genellikle form modeline sahip bir veritabanında kayıt oluşturan ve düzenleyen bileşenlerde kullanılanlar gibi, aşırı gönderim saldırısı olarak da bilinen toplu atama saldırısına karşı savunmasız olabilir. Kötü amaçlı bir kullanıcı, sunucunun işlediği ancak geliştiricinin kullanıcıların değiştirmesine izin vermek istemediği ve işlenen formda yer almayan özellikler için veri içeren bir HTML formu POST gönderdiğinde bir aşırı gönderim saldırısı oluşur. "Overposting" terimi, kötü amaçlı kullanıcının formla aşırı veri gönderdiği anlamına gelir.

Model oluşturma ve güncelleştirme işlemleri için kısıtlanmış özellikler içermediğinde aşırı paylaşım önemli değildir. Ancak, sürdürdüğünüz statik SSR tabanlı Blazor formlarla çalışırken aşırı paylaşımı göz önünde bulundurmak önemlidir.

Fazla göndermeyi azaltmak için oluşturma (ekleme) ve güncelleştirme işlemleriyle form ve veritabanı için ayrı bir görünüm modeli/veri aktarım nesnesi (DTO) kullanmanızı öneririz. Form gönderildiğinde, veritabanını değiştirmek için bileşen ve C# kodu tarafından yalnızca görünüm modelinin/DTO'nun özellikleri kullanılır. Kötü amaçlı bir kullanıcı tarafından eklenen tüm ek veriler atılır, bu nedenle kötü amaçlı kullanıcının aşırı paylaşım saldırısı gerçekleştirmesi engellenir.

Gelişmiş form işleme

Form POST istekleri için gezintiyi geliştirin; Enhance parametresiyle formlar için veya EditForm özniteliğiyle HTML formları için (data-enhance):

<EditForm ... Enhance ...>
    ...
</EditForm>
<form ... data-enhance ...>
    ...
</form>

Desteklenmiyor: Bir formun ata öğesinde gelişmiş gezinti ayarlarını yaparak gelişmiş form işlemesini etkinleştiremezsiniz.

<div ... data-enhance ...>
    <form ...>
        <!-- NOT enhanced -->
    </form>
</div>

Gelişmiş form gönderileri yalnızca Blazor uç noktalarıyla çalışır. Blazor uç noktası olmayan bir yere gelişmiş bir form göndermek hatayla sonuçlanır.

Gelişmiş form işlemeyi devre dışı bırakmak için:

  • EditForm içi̇n, Enhance parȧmetrėsi̇ni̇ form öğesinden kaldırın (veya onu false olarak ayarlayın: Enhance="false").
  • HTML <form> için, form öğesinden data-enhance özniteliğini kaldırın (veya false olarak ayarlayın: data-enhance="false").

Blazor'nin gelişmiş gezinti ve form işlemesi, güncelleştirilmiş içerik sunucu işlemenin parçası değilse DOM'da yapılan dinamik değişiklikleri geri alabilir. Bir öğenin içeriğini korumak için özniteliğini data-permanent kullanın.

Aşağıdaki örnekte, sayfa yüklendiğinde öğenin içeriği <div> bir betik tarafından dinamik olarak güncelleştirilir:

<div data-permanent>
    ...
</div>

Gelişmiş gezinti ve form işlemeyi genel olarak devre dışı bırakmak için bkz. ASP.NET Core Blazor başlatma.

Gelişmiş sayfa güncellemelerini dinlemek için enhancedload olayını kullanmayla ilgili kılavuz için ASP.NET Core Blazor gezintisi bölümüne bakın.

Örnekler

Örnekler, form POST istekleri için gelişmiş form işlemeyi benimsemez, ancak tüm örnekler Gelişmiş form işleme bölümündeki yönergeleri izleyerek gelişmiş özellikleri benimseyecek şekilde güncelleştirilebilir.

Örneklerde, C# 9 ve .NET 5 ile tanıtılan hedef türündeki new işleç kullanılır. Aşağıdaki örnekte, türü işleç için new açıkça belirtilmeyen:

public ShipDescription ShipDescription { get; set; } = new();

C# 8 veya öncesi (ASP.NET Core 3.1) kullanıyorsanız, türü işleç olarak belirtmek için new örnek kodu değiştirin:

public ShipDescription ShipDescription { get; set; } = new ShipDescription();

Bileşenler null atanabilir başvuru türlerini (NTS) kullanır ve .NET derleyicisi null durum statik çözümlemesi gerçekleştirir ve her ikisi de .NET 6 veya sonraki sürümlerde desteklenir. Daha fazla bilgi için bkz. .NET 5'te ASP.NET Core'dan .NET 6'ya geçiş.

C# 9 veya önceki bir sürüm (.NET 5 veya öncesi) kullanıyorsanız, örneklerden NRT'leri kaldırın. Genellikle, bu yalnızca soru işaretlerinin (?) ve ünlem noktalarının (!) örnek koddaki türlerden kaldırılmasını içerir.

.NET SDK,.NET 6 veya üzerini hedeflerken projelere örtük genel using yönergeler uygular. Örneklerde form işleme hakkındaki bilgileri günlüğe kaydetmek için günlükçü kullanılır, ancak bileşen örneklerinde ad alanı için @using bir Microsoft.Extensions.Logging yönerge belirtmek gerekmez. Daha fazla bilgi için bkz. .NET proje SDK'ları: Örtük kullanım yönergeleri.

C# 9 veya daha önceki bir sürümünü (.NET 5 veya daha önceki) kullanıyorsanız, örneğin gerektirdiği herhangi bir API için @using yönergesinden sonra bileşenin en üstüne @page yönergelerini ekleyin. Visual Studio aracılığıyla API ad alanlarını bulun (nesneye sağ tıklayın ve Tanıma Göz At'ı seçin) veya .NET API tarayıcısı.

Formların veri ek açıklamaları doğrulamasıyla nasıl çalıştığını göstermek için örnek bileşenler API'yi System.ComponentModel.DataAnnotations kullanır. Veri ek açıklamalarını kullanan bileşenlerde fazladan bir kod satırından kaçınmak istiyorsanız, ad alanını uygulamanın bileşenlerinde içeri aktarma dosyasıyla (_Imports.razor):

@using System.ComponentModel.DataAnnotations

Form örnekleri, Star Trek evreninin referans alınan yönleridir. Star Trek, CBS Studios ve Paramount'un telif hakkı ©1966-2023'tür.

İstemci tarafı doğrulama için bir bağlantı hattı gerekir

s'de Blazor Web App, istemci tarafı doğrulama için etkin BlazorSignalR bir bağlantı hattı gerekir. İstemci tarafı doğrulaması, statik sunucu tarafı işlemeyi (statik SSR) benimseyen bileşenlerdeki formlar için kullanılamaz. Statik SSR'yi benimseyen formlar, form gönderildikten sonra sunucuda doğrulanır.

Desteklenmeyen doğrulama özellikleri

Veri ek açıklaması yerleşik doğrulayıcılarının tümü Blazor desteklenir, ancak [Remote] doğrulama özniteliği hariç.

jQuery doğrulaması Razor bileşenlerinde desteklenmiyor. Aşağıdaki yaklaşımlardan herhangi birini öneririz:

  • aşağıdakilerden biri için ASP.NET Core Blazor form doğrulamasındaki yönergeleri izleyin:
    • Etkileşimli işleme modunu benimseyen bir Blazor Web App içinde sunucu tarafı doğrulama.
    • Bağımsız bir Blazor WebAssembly uygulamasında istemci tarafı doğrulama.
  • Yerel HTML doğrulama özniteliklerini kullanın (bkz. İstemci tarafı form doğrulaması).
  • Üçüncü taraf doğrulama JavaScript kitaplığını benimseyin.

Sunucuda statik olarak işlenmiş formlar için istemci tarafı doğrulama üzerine yeni bir mekanizma düşünülüyor. Daha fazla bilgi için bkz. Bir döngü olmadan Blazor kullanarak istemci doğrulaması ile sunucu tarafından işlenen formlar oluşturma (dotnet/aspnetcore #51040).

Ek kaynaklar