ASP.NET alapszakaszok Blazor

Megjegyzés:

Ez nem a cikk legújabb verziója. Az aktuális kiadásról a cikk .NET 10-es verziójában olvashat.

Ez a cikk ismerteti, hogyan szabályozható a Razor összetevő tartalma egy Razor gyermekkomponensből.

Blazor Szakaszok

Ha egy Razor összetevő tartalmát egy Razor gyermekösszetevőből szeretné szabályozni, a Blazorszakaszokat az alábbi beépített összetevők használatával támogatja:

• SectionOutlet: Az összetevők által SectionContent biztosított tartalmat egyező SectionName vagy SectionId argumentumokkal jeleníti meg. Két vagy több SectionOutlet összetevő nem rendelkezhet ugyanazzal SectionName vagy SectionId.

• SectionContent: Tartalomként szolgál RenderFragment formájában a SectionOutlet komponensekhez, amelyekhez egy SectionName vagy SectionId illeszkedik. Ha több SectionContent összetevő azonos SectionName vagy SectionId-vel rendelkezik, az egyező SectionOutlet összetevő az utoljára renderelt SectionContent tartalmát jeleníti meg.

A szakaszok mind az elrendezésekben, mind a beágyazott szülő-gyermek komponensekben használhatók.

Bár az átadott SectionName argumentum bármilyen típusú burkolatot használhat, a dokumentáció a KEBAB-burkolatot (például) alkalmazza, top-baramely a HTML-elemazonosítók gyakori burkolatválasztása. SectionId statikus object mezőt kap, és mindig javasoljuk a Pascal-burkolat használatát a C# mezőnevekhez (például TopbarSection).

Az alábbi példában az alkalmazás fő elrendezési összetevője egy növekményszámláló gombot implementál az alkalmazás összetevőjére Counter .

Ha a szakaszok névtere nem szerepel a _Imports.razor fájlban, adja hozzá:

@using Microsoft.AspNetCore.Components.Sections

Az MainLayout összetevőben (MainLayout.razor) helyezzen el egy SectionOutlet összetevőt, és adjon át egy sztringet a SectionName paraméternek, hogy jelezze a szakasz nevét. Az alábbi példa a szakasz nevét top-barhasználja:

<SectionOutlet SectionName="top-bar" />

Az Counter összetevőben (Counter.razor), hozzon létre egy SectionContent összetevőt, és adja át a megfelelő sztringet (top-bar) az SectionName paraméternek.

<SectionContent SectionName="top-bar">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

Amikor az Counter összetevő elérhető /counter, az MainLayout összetevő a növekmények száma gombot jeleníti meg attól az Counter összetevőtől, amelyben az SectionOutlet összetevő található. Bármely más összetevő elérésekor a növekményszámláló gomb nem jelenik meg.

A nevesített szakasz használata helyett statikus object-t adhat meg a SectionId paraméterrel, hogy azonosítsa a szakaszt. Az alábbi példa egy növekményszámláló gombot is implementál az alkalmazás összetevőjére Counter az alkalmazás fő elrendezésében.

Ha nem szeretné, hogy más SectionContent összetevők véletlenül egyezzenek egy SectionOutletadott névvel, adjon át egy objektumparamétert SectionId a szakasz azonosításához. Ez hasznos lehet egyRazor osztálytár (RCL) tervezésekor. Ha az RCL-ben egy SectionOutlet objektumhivatkozást SectionId használ, és a fogyasztó egy SectionContent egyező SectionId objektummal rendelkező összetevőt helyez el, a név szerinti véletlen egyezés nem lehetséges, ha az RCL felhasználói más SectionContent összetevőket implementálnak.

Az alábbi példa egy növekményszámláló gombot is implementál az alkalmazás fő elrendezésében az alkalmazás Counter összetevőjének, amely egy objektumhivatkozást használ a szakasznév helyett.

Adjon hozzá TopbarSection statikust object az MainLayout összetevőhöz egy @code blokkban.

@code {
    internal static object TopbarSection = new();
}

MainLayout összetevő Razor jelölőjében helyezzen el egy SectionOutlet komponenst, és adja át a TopbarSection értéket a SectionId paraméternek a szakasz jelzéséhez.

<SectionOutlet SectionId="TopbarSection" />

Adjon hozzá egy összetevőt SectionContent az alkalmazás összetevőhöz Counter , amely egy növekményszám gombot jelenít meg. Használja az MainLayout összetevő statikus TopbarSectionobject szakaszát SectionId (MainLayout.TopbarSection).

In Counter.razor:

<SectionContent SectionId="MainLayout.TopbarSection">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

Amikor a Counter összetevőt elérjük, a MainLayout összetevő megjeleníti a növekményszám gombot ott, ahol a SectionOutlet összetevő található.

Megjegyzés:

SectionOutlet és SectionContent összetevők csak a SectionId-t vagy a SectionName-t állíthatják be, de nem mindkettőt.

RenderFragment gyorsítótárazási szabályok és szakaszmegjelenítési viselkedés

Ha egy SectionContent's RenderFragment tartalma megváltozik, ami egy másik példány, mint ahol az összetevő renderelve van, akkor a Blazor teljesen megsemmisíti és újra létrehozza a szakaszt ahelyett, hogy megpróbálná frissíteni a szakasz tartalmát. A normál rendereléstől eltérően a szakasz tartalma különböző példányokból származhat, és nem érdemes két különálló összetevőből származó tartalmat feldolgozni, ami váratlan eredményekhez vezethet. Ennek a viselkedésnek részletes magyarázatát a Blazor SectionOutlet/SectionContent és a CascadingValue (dotnet/aspnetcore #58316) következetlen komponens inicializálásával kapcsolatban találja.

Szakasz interakciója más Blazor funkciókkal

A szakaszok a következő módokon működnek együtt más Blazor funkciókkal:

• A kaszkádolt értékek olyan szakasztartalmakba kerülnek, ahonnan az összetevő definiálja a SectionContent tartalmat.
• A nem kezelt kivételeket az összetevő körül meghatározott SectionContent.
• A Razorstreamelési rendereléshez konfigurált összetevő emellett konfigurálja az SectionContent összetevők által biztosított szakasztartalmakat is a streamelési renderelés használatára.
• Az interaktív összetevőket tartalmazó szakasz statikusan renderelt (nem funkcionális) egy elrendezési összetevőben, Blazor Web App amely oldal/összetevőnkénti renderelést alkalmaz. További információ: ASP.NET Core Blazor elrendezések.