Přehled formulářů ASP.NET Core Blazor

• Svázaný s objektem nebo modelem, který může používat datové poznámky.
  • Formuláře HTML s elementem <form> .
  • EditForm součásti.
• Integrované vstupní komponenty.

• Komponenta EditForm vázaná na objekt nebo model, který může používat datové poznámky.
• Integrované vstupní komponenty.

Podporují se standardní formuláře HTML. Vytvořte formulář pomocí normální značky HTML <form> a zadejte obslužnou rutinu @onsubmit pro zpracování odeslané žádosti o formulář.

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

V předchozí StarshipPlainForm komponentě:

• Formulář se vykreslí tam, kde se <form> prvek zobrazí. Formulář má název s atributem @formname direktivy, který jednoznačně identifikuje formulář pro architekturu Blazor .
• Model se vytvoří v bloku komponenty @code a nachází se ve veřejné vlastnosti (Model). Atribut [SupplyParameterFromForm] označuje, že hodnota přidružené vlastnosti by měla být zadána z dat formuláře. Data v požadavku, který odpovídá názvu vlastnosti, jsou svázaná s vlastností.
• Komponenta InputText je vstupní komponenta pro úpravu řetězcových hodnot. Atribut @bind-Value direktivy Model.Id vytvoří vazbu vlastnosti modelu na InputText vlastnost komponenty Value .
• Metoda Submit je registrována jako obslužná rutina @onsubmit pro zpětné volání. Obslužná rutina je volána při odeslání formuláře uživatelem.

Blazor vylepšuje navigaci na stránce a zpracování formulářů tím, že zachytí požadavek, aby se použila odpověď na stávající model DOM a zachovala co nejvíce vykresleného formuláře. Toto vylepšení se vyhne nutnosti plně načíst stránku a poskytuje mnohem plynulejší uživatelské prostředí, podobně jako jednostránková aplikace (SPA), i když se komponenta vykresluje na serveru. Další informace najdete v tématu ASP.NET Blazor Základní směrování a navigace.

Vykreslování streamování je podporováno pro prosté formuláře HTML.

Předchozí příklad obsahuje antiforgery podporu zahrnutím AntiforgeryToken komponenty ve formuláři. Podpora antiforgery je podrobněji vysvětlena v části Podpora antiforgery tohoto článku.

Pokud chcete odeslat formulář na základě událostí DOM jiného prvku, například oninput pomocí JavaScriptu odešlete formulář (submit (dokumentace MDN)).onblur

Místo použití prostých formulářů v Blazor aplikacích se formulář obvykle definuje s Blazorintegrovanou podporou formulářů pomocí komponenty architektury EditForm . Následující Razor komponenta demonstruje typické prvky, komponenty a Razor kód k vykreslení webového EditForm formuláře pomocí komponenty.

Formulář je definován pomocí Blazor komponenty architektury EditForm . Následující Razor komponenta demonstruje typické prvky, komponenty a Razor kód k vykreslení webového EditForm formuláře pomocí komponenty.

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

V předchozí Starship1 komponentě:

• Komponenta EditForm se vykreslí tam, kde se <EditForm> prvek zobrazí. Formulář má název s atributem @formname direktivy, který jednoznačně identifikuje formulář pro architekturu Blazor .
• Model se vytvoří v bloku komponenty @code a nachází se ve veřejné vlastnosti (Model). Vlastnost je přiřazena k parametru EditForm.Model . Atribut [SupplyParameterFromForm] označuje, že hodnota přidružené vlastnosti by měla být zadána z dat formuláře. Data v požadavku, který odpovídá názvu vlastnosti, jsou svázaná s vlastností.
• Komponenta InputText je vstupní komponenta pro úpravu řetězcových hodnot. Atribut @bind-Value direktivy Model.Id vytvoří vazbu vlastnosti modelu na InputText vlastnost komponenty Value .
• Metoda Submit je registrována jako obslužná rutina OnSubmit pro zpětné volání. Obslužná rutina je volána při odeslání formuláře uživatelem.

Blazor vylepšuje navigaci na stránce a zpracování formulářů pro EditForm komponenty. Další informace najdete v tématu ASP.NET Blazor Základní směrování a navigace.

Vykreslování streamování je podporováno pro 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; }
    }
}

V předchozí Starship1 komponentě:

• Komponenta EditForm se vykreslí tam, kde se <EditForm> prvek zobrazí.
• Model se vytvoří v bloku komponenty @code a nachází se v privátním poli (model). Pole je přiřazeno k parametru EditForm.Model .
• Komponenta InputText je vstupní komponenta pro úpravu řetězcových hodnot. Atribut @bind-Value direktivy Model.Id sváže vlastnost modelu s InputText vlastností komponenty Value †.
• Metoda Submit je registrována jako obslužná rutina OnSubmit pro zpětné volání. Obslužná rutina je volána při odeslání formuláře uživatelem.

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

Podpora antiforgery

Antiforgery služby se automaticky přidají do Blazor aplikací, když AddRazorComponents je volána v Program souboru.

Aplikace používá Middleware Antiforgery voláním UseAntiforgery v kanálu zpracování požadavků v Program souboru. UseAntiforgery je volána po volání UseRouting. Pokud existují volání UseRouting a UseEndpointsvolání musí UseAntiforgery jít mezi nimi. Hovor UseAntiforgery musí být umístěn po volání a UseAuthentication UseAuthorization.

Komponenta AntiforgeryToken vykresluje antiforgery token jako skryté pole a [RequireAntiforgeryToken] atribut umožňuje ochranu proti padělání. Pokud se kontrola antiforgery nezdaří, 400 - Bad Request vyvolá se odpověď a formulář se nezpracuje.

U formulářů založených na EditFormkomponentě a [RequireAntiforgeryToken] atributu AntiforgeryToken se automaticky přidají za účelem zajištění ochrany proti padělání.

Pro formuláře založené na elementu HTML <form> ručně přidejte komponentu AntiforgeryToken do formuláře:

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

Další informace najdete v tématu ASP.NET ověřování a autorizace jádraBlazor.

Zmírnění nadměrného příspěvku útoků

Staticky vykreslené formuláře na straně serveru, například formuláře, které se obvykle používají v komponentách, které vytvářejí a upravují záznamy v databázi s modelem formuláře, můžou být zranitelné vůči útoku, který se označuje také jako útok hromadného přiřazení . Útok na nadměrné odeslání nastane, když uživatel se zlými úmysly vydá formulář HTML POST na server, který zpracovává data pro vlastnosti, které nejsou součástí vykresleného formuláře a že vývojář nechce uživatelům povolit úpravy. Pojem "overposting" doslova znamená, že uživatel se zlými úmysly přetáčí s formulářem.

Overposting není problém, pokud model neobsahuje omezené vlastnosti pro operace vytváření a aktualizace. Při práci se statickými formuláři založenými na Blazor SSR, které spravujete, je ale důležité mít na paměti.

Pokud chcete zmírnit nadměrné umístění, doporučujeme pro formulář a databázi použít samostatný model zobrazení nebo objekt pro přenos dat (DTO) s operacemi vytvoření (vložení) a aktualizace. Při odeslání formuláře se k úpravě databáze používají pouze vlastnosti modelu zobrazení nebo DTO komponenty a kódu jazyka C#. Veškerá další data zahrnutá uživatelem se zlými úmysly se zahodí, takže škodlivému uživateli se zabrání v provedení útoku proti útoku.

Vylepšené zpracování formulářů

Vylepšení navigace pro požadavky POST formuláře s parametrem Enhance formulářů EditForm nebo atributem data-enhance pro formuláře HTML (<form>):

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

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

❌Nepodporováno: U nadřazeného prvku formuláře nelze nastavit rozšířenou navigaci, která umožňuje rozšířené zpracování formulářů.

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

Vylepšené příspěvky formulářů fungují jenom s Blazor koncovými body. Publikování rozšířeného formuláře do jinéhoBlazor koncového bodu způsobí chybu.

Zakázání rozšířeného zpracování formulářů:

• Pro parametr odeberte EditFormEnhance z elementu formuláře parametr (nebo ho nastavte na false: Enhance="false").
• Pro HTML <form>odeberte data-enhance atribut z elementu formuláře (nebo ho nastavte na false: data-enhance="false").

BlazorVylepšená navigace a předávání formulářů můžou vrátit dynamické změny modelu DOM, pokud aktualizovaný obsah není součástí vykreslování serveru. Chcete-li zachovat obsah elementu, použijte data-permanent atribut.

V následujícím příkladu se obsah elementu <div> dynamicky aktualizuje skriptem při načtení stránky:

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

Pokud chcete zakázat rozšířenou navigaci a zpracování formulářů globálně, přečtěte si informace o spuštění ASP.NET CoreBlazor.

Pokyny k používání enhancedload události k naslouchání rozšířeným aktualizacím stránek najdete v tématu ASP.NET Směrování a navigace v jádruBlazor.

Příklady nepodporují rozšířené zpracování formulářů pro žádosti POST, ale všechny příklady je možné aktualizovat, aby přijaly vylepšené funkce podle pokynů v části Rozšířené zpracování formulářů.

Příklady používají operátor typu new cíl, který byl zaveden v jazyce C# 9.0 a .NET 5. V následujícím příkladu není pro operátor explicitně uvedený new typ:

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

Pokud používáte C# 8.0 nebo starší (ASP.NET Core 3.1), upravte ukázkový kód tak, aby uvedl typ operátoru new :

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

Komponenty používají odkazové typy s možnou hodnotou null (NRT) a kompilátor .NET provádí statickou analýzu stavu null, z nichž obě jsou podporovány v .NET 6 nebo novějším. Další informace najdete v tématu Migrace z ASP.NET Core 5.0 na verzi 6.0.

Pokud používáte C# 9.0 nebo starší (.NET 5 nebo starší), odeberte z příkladů nrT. Obvykle se jedná pouze o odebrání otazníků (?) a vykřičníků (!) z typů v ukázkovém kódu.

Sada .NET SDK použije implicitní globální using direktivy pro projekty při cílení na .NET 6 nebo novější. Příklady používají protokolovací nástroj k protokolování informací o zpracování formulářů, ale není nutné zadat @using direktivu Microsoft.Extensions.Logging pro obor názvů v příkladech komponent. Další informace naleznete v tématu Sady SDK projektu .NET: Implicit using direktivy.

Pokud používáte C# 9.0 nebo starší (.NET 5 nebo starší), přidejte @using direktivy na začátek komponenty za direktivu @page pro jakékoli rozhraní API požadované v příkladu. Vyhledejte obory názvů rozhraní API prostřednictvím sady Visual Studio (klikněte pravým tlačítkem myši na objekt a vyberte Náhled definice) nebo prohlížeče rozhraní .NET API.

Ověření na straně klienta vyžaduje okruh.

Ověření Blazor Web Appna straně klienta vyžaduje aktivní BlazorSignalR okruh. Ověřování na straně klienta není k dispozici pro formuláře v součástech, které přijaly statické vykreslování na straně serveru (statické SSR). Formuláře, které přijímají statické služby SSR, se po odeslání formuláře ověřují na serveru.

• nahrávání souborů ASP.NET Core Blazor
• Blazorukázky úložiště GitHub () (dotnet/blazor-samplespostup stažení)
• ASP.NET základních testovacích prostředků GitHubudotnet/aspnetcore

• nahrávání souborů ASP.NET Core Blazor
• Zabezpečení hostované aplikace ASP.NET Core Blazor WebAssembly pomocí ID Microsoft Entra
• Zabezpečení hostované aplikace ASP.NET Core Blazor WebAssembly pomocí Azure Active Directory B2C
• Zabezpečení hostované aplikace ASP.NET Core Blazor WebAssembly pomocí Identity serveru
• Blazorukázky úložiště GitHub () (dotnet/blazor-samplespostup stažení)
• ASP.NET základních testovacích prostředků GitHubudotnet/aspnetcore