ASP.NET Core Blazor formlara genel bakış

• Veri ek açıklamalarını kullanabilen bir nesneye veya modele bağlı.
  • öğesini içeren <form> HTML formları.
  • EditForm Bileşen.
• Yerleşik giriş bileşenleri.

• Veri EditForm ek açıklamalarını kullanabilen bir nesneye veya modele bağlı bileşen.
• Yerleşik giriş bileşenleri.

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, öğenin göründüğü yerde <form> 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 özelliğine bağlıdı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 Value özelliğine InputText bağlarModel.Id.
• 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.

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 Temel Blazor yönlendirme ve gezinti.

Akış işleme , düz HTML formları için desteklenir.

Yukarıdaki örnek, forma bir AntiforgeryToken bileşen ekleyerek antiforgery desteğini içerir. Antiforgery desteği, bu makalenin Antiforgery desteği bölümünde daha ayrıntılı olarak açıklanmıştır.

Örneğin oninput veya gibi başka bir öğenin DOM olaylarını temel alan bir form göndermek için JavaScript kullanarak formu gönderin (submit (MDN belgeleri)).onblur

Uygulamalarda düz formlar Blazor kullanmak yerine, bir form genellikle çerçevenin EditForm bileşeni kullanılarak 'nin yerleşik form desteğiyle Blazortanımlanır. Aşağıdaki Razor bileşen, bir bileşeni kullanarak EditForm bir web formunu işlemek için tipik öğeleri, bileşenleri ve Razor kodu gösterir.

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

@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şen, öğenin göründüğü yerde <EditForm> 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. ö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 özelliğine bağlıdı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 Value özelliğine InputText bağlarModel.Id.
• 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.

Blazor , bileşenler için EditForm sayfa gezintisini ve form işlemeyi geliştirir. Daha fazla bilgi için bkz . ASP.NET Temel Blazor yönlendirme ve gezinti.

Akış işleme için desteklenir EditForm.

@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şen, öğenin göründüğü yerde <EditForm> işlenir.
• Model, bileşenin @code bloğunda oluşturulur ve bir özel alanda (model ) tutulur. alanı parametresine EditForm.Model 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 Value özelliğine InputText bağlar†.
• 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.

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

Antiforgery desteği

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

Uygulama, dosyadaki istek işleme işlem hattını Program çağırarak UseAntiforgery Antiforgery Ara Yazılımını kullanır. UseAntiforgery çağrısından sonra çağrılır UseRouting. ve UseEndpointsçağrıları UseRouting varsa, çağrısı UseAntiforgery bunların arasına girmelidir. ve UseAuthorizationçağrılarının UseAntiforgery ardından için bir çağrı UseAuthentication 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;
}

@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

Genellikle form modeline sahip bir veritabanında kayıt oluşturan ve düzenleyen bileşenlerde kullanılanlar gibi statik olarak işlenmiş sunucu tarafı formlar, toplu atama saldırısı olarak da bilinen aşırı paylaşım saldırısına karşı savunmasız olabilir. Kötü amaçlı bir kullanıcı, işlenen formun parçası olmayan özellikler için verileri işleyen ve geliştiricinin kullanıcıların değiştirmesine izin vermek istemediği bir HTML formu POST'unu sunucuya yayınladığında bir paylaşım saldırısı oluşur. "Overposting" terimi, kötü amaçlı kullanıcının formla aşırı poz verdiğ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, bakımını yaptığınız statik SSR tabanlı Blazor formlarla çalışırken üst paylaşıma dikkat etmek ö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

Formlar için parametresiyle EditForm veya HTML formlarının özniteliğiyle Enhance form POST istekleri için gezintiyi geliştirin data-enhance (<form>):

<EditForm ... Enhance ...>
    ...
</EditForm>

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

❌Desteklenmeyen: Gelişmiş form işlemeyi etkinleştirmek için formun atası öğesinde gelişmiş gezinti ayarlayamazsınız.

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

Gelişmiş form gönderileri yalnızca uç noktalarla Blazor çalışır. Gelişmiş formu uç nokta olmayanBlazor bir forma göndermek hatayla sonuçlanır.

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

• için EditForm, parametresini Enhance form öğesinden kaldırın (veya olarak falseayarlayın: Enhance="false").
• HTML <form>için, form öğesinden özniteliğini kaldırın data-enhance (veya olarak falseayarlayın: data-enhance="false").

Blazor'nin gelişmiş gezintisi ve form teslimi, 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üncelleştirmelerini dinlemek için olayı kullanma enhancedload hakkında yönergeler için bkz . ASP.NET Temel Blazor yönlendirme ve gezinti.

Ö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.0 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.0 veya önceki bir sürüm (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. ASP.NET Core 5.0'den 6.0'a geçiş.

C# 9.0 veya öncesi (.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 Microsoft.Extensions.Logging bir @using yönerge belirtmek gerekmez. Daha fazla bilgi için bkz . .NET proje SDK'ları: Örtük kullanım yönergeleri.

C# 9.0 veya öncesi (.NET 5 veya öncesi) kullanıyorsanız, örneğin gerektirdiği herhangi bir API için yönergeden @page sonra bileşenin en üstüne yönergeleri ekleyin@using. 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ı.

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

• ASP.NET Core Blazor dosyası karşıya yüklemeleri
• Blazorörnekler GitHub deposu () (dotnet/blazor-samplesnasıl indirilir)
• ASP.NET Core GitHub deposu (dotnet/aspnetcore) test varlıklarını oluşturur

• ASP.NET Core Blazor dosyası karşıya yüklemeleri
• Microsoft Entra ID ile barındırılan ASP.NET Core Blazor WebAssembly uygulamasının güvenliğini sağlama
• Azure Active Directory B2C ile barındırılan ASP.NET Core Blazor WebAssembly uygulamasının güvenliğini sağlama
• Sunucu ile Identity barındırılan ASP.NET Core uygulamasının Blazor WebAssembly güvenliğini sağlama
• Blazorörnekler GitHub deposu () (dotnet/blazor-samplesnasıl indirilir)
• ASP.NET Core GitHub deposu (dotnet/aspnetcore) test varlıklarını oluşturur