ASP.NET Core Blazor-űrlapok áttekintése

• Olyan objektumhoz vagy modellhez van kötve, amely adatjegyzetekethasználhat.
  • HTML-űrlapok a <form> elemmel.
  • EditForm összetevők.
• beépített bemeneti komponensek.

• Egy olyan objektumhoz vagy modellhez kötött EditForm összetevő, amely adatjegyzetekethasználhat.
• beépített bemeneti komponensek.

A szabványos HTML-űrlapok támogatottak. Hozzon létre egy űrlapot a normál HTML-<form> címkével, és adjon meg egy @onsubmit kezelőt a beküldött űrlapkérelem kezeléséhez.

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

Az előző StarshipPlainForm összetevőben:

• Az űrlap ott jelenik meg, ahol a <form> elem megjelenik. Az űrlap neve a @formname direktíva attribútummal van elnevezve, amely egyedileg azonosítja az űrlapot a Blazor keretrendszerben.
• A modell az összetevő @code blokkjában jön létre, és egy nyilvános tulajdonságban (Model) található. A [SupplyParameterFromForm] attribútum azt jelzi, hogy a társított tulajdonság értékét az űrlapadatokból kell megadni. A kérelem azon adatai, amelyek megegyeznek a tulajdonság nevével, a tulajdonsághoz lesznek kötve.
• A InputText összetevő egy bemeneti összetevő a sztringértékek szerkesztéséhez. A @bind-Value irányelv attribútum a Model.Id modelltulajdonságot az InputText összetevő Value tulajdonságához köti.
• A Submit metódus a @onsubmit visszahívás kezelőjeként van regisztrálva. A rendszer meghívja a kezelőt, amikor a felhasználó beküldi az űrlapot.

Blazor a kérés elfogásával javítja az oldalnavigációt és az űrlapkezelést, hogy a választ a meglévő DOM-ra alkalmazza, és a lehető legtöbb renderelt űrlapot megőrizze. A fejlesztés elkerüli az oldal teljes betöltését, és sokkal zökkenőmentesebb felhasználói élményt nyújt, hasonlóan az egyoldalas alkalmazáshoz (SPA), bár az összetevő a kiszolgálón jelenik meg. További információért lásd: ASP.NET Core Blazor útválasztás és navigáció.

Streaming renderelés egyszerű HTML-űrlapoknál támogatott.

Az előző példa az űrlapba beiktatott AntiforgeryToken összetevővel támogatja a hamisítás elleni védelmet. Az Antiforgery támogatás részleteit a cikk Antiforgery támogatás szakaszában találhatja meg.

Ha egy űrlapot egy másik elem DOM-eseményei, például oninput vagy onbluralapján szeretne elküldeni, a JavaScript használatával küldje el az űrlapot (submit (MDN-dokumentáció)).

Ahelyett, hogy egyszerű űrlapokat használnál Blazor alkalmazásokban, az űrlapokat általában a Blazorbeépített űrlaptámogatásával, a keretrendszernek a EditForm összetevőjét használva definiálják. Az alábbi Razor összetevő bemutatja a tipikus elemeket, összetevőket és Razor kódot egy webforma EditForm összetevő használatával történő megjelenítéséhez.

Az űrlap a Blazor keretrendszer EditForm összetevőjének használatával van definiálva. Az alábbi Razor összetevő bemutatja a tipikus elemeket, összetevőket és Razor kódot egy webforma EditForm összetevő használatával történő megjelenítéséhez.

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

Az előző Starship1 összetevőben:

• A EditForm összetevő ott jelenik meg, ahol a <EditForm> elem megjelenik. Az űrlap neve a FormName tulajdonsággal van elnevezve, amely egyedileg azonosítja az űrlapot a Blazor-keretrendszerben.
• A modell az összetevő @code blokkjában jön létre, és egy nyilvános tulajdonságban (Model) található. A tulajdonság a EditForm.Model paraméterhez van rendelve. A [SupplyParameterFromForm] attribútum azt jelzi, hogy a társított tulajdonság értékét az űrlapadatokból kell megadni. A kérelem azon adatai, amelyek megegyeznek a tulajdonság nevével, a tulajdonsághoz lesznek kötve.
• A InputText összetevő egy bemeneti összetevő, a sztringértékek szerkesztéséhez. A @bind-Value irányelv attribútum a Model.Id modelltulajdonságot az InputText összetevő Value tulajdonságához köti.
• A Submit metódus a OnSubmit visszahívás kezelőjeként van regisztrálva. A rendszer meghívja a kezelőt, amikor a felhasználó beküldi az űrlapot.

Blazor javítja a lapnavigációt és az űrlapkezelést EditForm összetevők esetében. További információért lásd: ASP.NET Core Blazor útválasztás és navigáció.

streameléses renderelés van támogatva a 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; }
    }
}

Az előző Starship1 összetevőben:

• A EditForm összetevő ott jelenik meg, ahol a <EditForm> elem megjelenik.
• A modell az összetevő @code blokkjában jön létre, és egy privát mezőben (model) található. A mező a EditForm.Model paraméterhez van rendelve.
• A InputText összetevő egy bemeneti összetevő a sztringértékek szerkesztéséhez. A @bind-Value irányelv attribútum a Model.Id modelltulajdonságot az InputText összetevő Value tulajdonságához köti†.
• A Submit metódus a OnSubmit visszahívás kezelőjeként van regisztrálva. A rendszer meghívja a kezelőt, amikor a felhasználó beküldi az űrlapot.

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

Hamisítás elleni támogatás

Az antiforgery szolgáltatások automatikusan hozzáadódnak a Blazor alkalmazásokhoz, amikor a Program fájlban a AddRazorComponents hívásra kerül.

Az alkalmazás az Antiforgery Middleware-t használja, meghívva a UseAntiforgery-t a kérésfeldolgozási folyamatában a Program fájlban. UseAntiforgery hívása a UseRoutinghívása után történik. Ha vannak hívások a UseRouting és a UseEndpointsszámára, akkor a UseAntiforgery hívásának UseRouting és UseEndpointsközött kell megtörténnie. A UseAntiforgery hívását UseAuthentication és UseAuthorizationhívása után kell végrehajtani.

A AntiforgeryToken összetevő rejtett mezőként jeleníti meg az antiforgery tokent, és a [RequireAntiforgeryToken] attribútum engedélyezi az antiforgery védelmet. Ha egy antiforgery-ellenőrzés sikertelen, a rendszer 400 - Bad Request választ ad, és az űrlap nem lesz feldolgozva.

A EditFormalapuló űrlapok esetében a rendszer automatikusan hozzáadja a AntiforgeryToken összetevőt és [RequireAntiforgeryToken] attribútumot az antiforgery elleni védelem érdekében.

A HTML-<form> elemen alapuló űrlapok esetében manuálisan adja hozzá a AntiforgeryToken összetevőt az űrlaphoz:

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

További információért lásd: ASP.NET Core Blazor hitelesítés és engedélyezés.

A túlpostolásos támadások elhárítása

A statikusan renderelt kiszolgálóoldali űrlapok, például az olyan összetevőkben, amelyek űrlapmodellel rendelkező adatbázis rekordjait hozzák létre és szerkesztik, sebezhetők lehetnek egy túlpostazó támadással szemben, más néven tömeges hozzárendelési támadással szemben. A túlpostolásos támadás akkor fordul elő, ha egy rosszindulatú felhasználó egy POST HTML-űrlapot ad ki a kiszolgálónak, amely olyan tulajdonságok adatait dolgozza fel, amelyek nem részei a renderelt űrlapnak, és hogy a fejlesztő nem kívánja engedélyezni a felhasználók számára a módosítást. A "túl sok posztolás" kifejezés szó szerint azt jelenti, hogy a rosszindulatú felhasználó túllépett az űrlappal történő posztoláskor, alkalommal ahelyett.

A túlfoglalás nem okoz problémát, ha a modell nem tartalmaz korlátozott tulajdonságokat a létrehozási és frissítési műveletekhez. A statikus SSR-alapú Blazor által karbantartott űrlapok használatakor azonban fontos szem előtt tartani a túlpostolást.

A túlpostolás csökkentése érdekében javasoljuk, hogy hozzon létre (beszúrási) és frissítési műveletekkel egy külön nézetmodellt/adatátviteli objektumot (DTO) az űrlaphoz és az adatbázishoz. Az űrlap elküldésekor az összetevő és a C# kód csak a nézetmodell/DTO tulajdonságait használja az adatbázis módosításához. A rosszindulatú felhasználó által küldött extra adatok elvetésre kerülnek, így a rosszindulatú felhasználó nem hajthat végre túlpostolási támadást.

Továbbfejlesztett űrlapkezelés

A POST űrlapkérések navigációs javítása EditForm űrlapok Enhance paraméterével vagy a HTML-űrlapok data-enhance attribútumával (<form>):

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

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

❌ Nem támogatott: Az űrlap elődelemén nem állíthat be továbbfejlesztett navigációt a továbbfejlesztett űrlapkezelés engedélyezéséhez.

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

A továbbfejlesztett űrlapbejegyzések csak Blazor végpontokkal működnek. A továbbfejlesztett űrlap nemBlazor végpontra való közzététele hibát eredményez.

A továbbfejlesztett űrlapkezelés letiltása:

• Egy EditFormesetén távolítsa el a Enhance paramétert az űrlapelemből (vagy állítsa false: Enhance="false").
• HTML-<form>esetén távolítsa el a data-enhance attribútumot az űrlapelemből (vagy állítsa false: data-enhance="false").

Blazortovábbfejlesztett navigációja és űrlap-átadása visszavonhatja a DOM dinamikus módosításait, ha a frissített tartalom nem része a kiszolgáló renderelésének. Egy elem tartalmának megőrzéséhez használja a data-permanent attribútumot.

Az alábbi példában a <div> elem tartalmát egy szkript dinamikusan frissíti az oldal betöltésekor:

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

Ha globálisan szeretné letiltani a továbbfejlesztett navigációt és űrlapkezelést, olvassa el az ASP.NET Core Blazor indításról szóló részt.

A enhancedload esemény továbbfejlesztett lapfrissítések figyeléséhez való használatával kapcsolatos útmutatásért tekintse meg ASP.NET Core Blazor útválasztási és navigációscímű témakört.

A példák nem vezetnek be továbbfejlesztett űrlapkezelést az űrlap POST-kérelmekhez, de az összes példa frissíthető a továbbfejlesztett funkciók bevezetéséhez a Továbbfejlesztett űrlapkezelés című szakaszban található útmutatást követve.

Ilyen például a cél típusú new operátor, amely a C# 9.0 és a .NET 5 használatával lett bevezetve. Az alábbi példában a típus nem szerepel explicit módon a new operátor esetében:

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

Ha c# 8.0-s vagy korábbi verziót használ (ASP.NET Core 3.1), módosítsa a példakódot úgy, hogy a típust a new operátornak adja meg:

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

Az összetevők null értékű referenciatípusokat (NRT-ket) használnak, a .NET-fordító pedig nullállapotú statikus elemzést végez, amelyek mindegyike támogatott a .NET 6-os vagy újabb verzióiban. További információ: Migrálás ASP.NET Core 5.0-ról 6.0-ra.

C# 9.0 vagy korábbi (.NET 5 vagy korábbi) használata esetén távolítsa el az NRT-eket a példákból. Ez általában csupán a kérdőjelek (?) és felkiáltójelek (!) eltávolítását foglalja magában a példakód típusok közül.

A .NET SDK implicit globális using irányelveket alkalmaz a projektekre a .NET 6-os vagy újabb verziójának megcélzásakor. A példák egy naplózó használatával naplóznak az űrlapfeldolgozással kapcsolatos információkat, de az összetevők példáiban nem szükséges @using irányelveket megadni a Microsoft.Extensions.Logging névtérhez. További információért lásd: .NET projekt SDK-k: Implicit using irányelvek.

C# 9.0 vagy korábbi (.NET 5 vagy korábbi) használata esetén @using irányelvek hozzáadása az összetevő elejéhez a @page irányelv után a példa által megkövetelt API-khoz. Keresse meg az API-névtereket a Visual Studióban (kattintson a jobb gombbal az objektumra, és válassza a Definíció megtekintése) vagy a .NET API böngésző.

Az ügyféloldali ellenőrzéshez áramkör szükséges.

Az Blazor Web App-ek esetében az ügyféloldali ellenőrzéshez aktív BlazorSignalR kapcsolatcsoport szükséges. Az ügyféloldali ellenőrzés nem érhető el a statikus kiszolgálóoldali renderelést (statikus SSR) használó összetevők űrlapjai számára. A statikus SSR-t alkalmazó űrlapok az űrlap elküldése után érvényesítve lesznek a kiszolgálón.

• ASP.NET Core Blazor fájlok feltöltése
• Blazor GitHub-adattár mintái (dotnet/blazor-samples) (hogyan lehet letölteni)
• ASP.NET Core GitHub-adattár (dotnet/aspnetcore) tartalmazza a tesztelési elemeket

• ASP.NET Core Blazor-fájl feltöltése
• hu-HU: Biztosítsa egy üzemeltetett ASP.NET Core Blazor WebAssembly-alkalmazás biztonságát a Microsoft Entra ID-vel
• Üzemeltetett ASP.NET Core Blazor WebAssembly-alkalmazás védelme az Azure Active Directory B2C
• Üzemeltetett ASP.NET Core Blazor WebAssembly-alkalmazás védelme Identity Server
• Blazor GitHub-adattár (dotnet/blazor-samples) példák (hogyan lehet letölteni)
• ASP.NET Core GitHub-adattár (dotnet/aspnetcore) teszteszközöket