ASP.NET Core Blazor elrendezései

Ez a cikk azt ismerteti, hogyan hozhat létre újrafelhasználható elrendezési összetevőket Blazor alkalmazásokhoz.

Az Blazor elrendezések hasznossága

Egyes alkalmazáselemek, például a menük, a szerzői jogi üzenetek és a vállalati emblémák általában az alkalmazás általános bemutatójának részei. A jelölések másolatának az alkalmazás minden összetevőjébe való elhelyezése nem hatékony. Minden alkalommal, amikor ezen elemek egyikét frissítik, az elemet használó összes összetevőt frissíteni kell. Ez a megközelítés költséges a karbantartáshoz, és a frissítés kihagyása esetén inkonzisztens tartalomhoz vezethet. elrendezések megoldják ezeket a problémákat.

A Blazor elrendezés egy Razor összetevő, amely jelölőjeleket oszt meg az arra hivatkozó összetevőkkel. Az elrendezések használhatják az adatkötést, a függőséginjektálást, valamint az összetevők egyéb funkcióit.

Elrendezési összetevők

Elrendezési összetevő létrehozása

Elrendezési összetevő létrehozása:

• Hozzon létre egy Razor összetevőt, amelyet egy Razor sablon vagy C# kód határoz meg. A Razor sablonon alapuló elrendezési összetevők ugyanúgy használják a .razor fájlkiterjesztést, mint a szokásos Razor összetevőket. Mivel az elrendezési összetevők meg vannak osztva az alkalmazás összetevői között, általában az alkalmazás Shared vagy Layout mappájába kerülnek. Az elrendezések azonban bármely olyan helyre elhelyezhetők, amely elérhető az azt használó összetevők számára. Egy elrendezés például ugyanabban a mappában helyezhető el, mint az azt használó összetevők.
• Örökölje az összetevőt a LayoutComponentBase-tól. A LayoutComponentBase definiál egy Body tulajdonságot (RenderFragment típust) a renderelt tartalomhoz az elrendezésen belül.
• A Razor szintaxis @Body segítségével adja meg a helyet az elrendezési jelölésben, ahol a tartalom megjelenik.

Jegyzet

További információkért a RenderFragment-ról lásd a ASP.NET Core Razor összetevők.

Az alábbi DoctorWhoLayout összetevő egy elrendezési összetevő Razor sablonját jeleníti meg. Az elrendezés örökli a LayoutComponentBase-t, és a @Body-et a navigációs sáv (<nav>...</nav>) és a lábléc (<footer>...</footer>) között állítja be.

DoctorWhoLayout.razor:

@inherits LayoutComponentBase

<PageTitle>Doctor Who® Database</PageTitle>

<header>
    <h1>Doctor Who® Database</h1>
</header>

<nav>
    <a href="main-list">Main Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } =
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/ https://www.bbc.com";
}

MainLayout összetevő

Egy Blazor projektsablonbóllétrehozott alkalmazásban a MainLayout összetevő az alkalmazás alapértelmezett elrendezési. Blazorelrendezése alkalmazza a Flexbox layout model (MDN documentation) (W3C specifikáció).

BlazorCSS elkülönítési funkciójának izolált CSS-stílusokat alkalmaz a MainLayout összetevőre. Konvenció szerint a stílusokat az azonos nevű kísérő stíluslap biztosítja, MainLayout.razor.css. A stíluslap ASP.NET Core-keretrendszerének implementálása a ASP.NET Core referenciaforrásban (dotnet/aspnetcore GitHub-adattárban) érhető el:

• Blazor Web App MainLayout.razor.css
• Blazor WebAssembly MainLayout.razor.css

Jegyzet

A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja a Ágak vagy címkék legördülő menüt. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

Elrendezés alkalmazása

Az elrendezés névterének elérhetővé tétele

Az elrendezésfájl helyei és névterei idővel megváltoztak a Blazor-keretrendszer esetében. A Blazor verziójától és az éppen létrehozott Blazor alkalmazás típusától függően előfordulhat, hogy a használat során meg kell jelölnie az elrendezés névterét. Ha egy elrendezés implementációjára hivatkozik, és az elrendezés nem található az elrendezés névterének megjelölése nélkül, kövesse az alábbi módszerek egyikét:

• Adjon hozzá egy @using direktívát a _Imports.razor fájlhoz az elrendezések helyének meghatározásához. Az alábbi példában az elrendezések Layout nevű mappája egy Components mappában található, az alkalmazás névtere pedig BlazorSample:

  @using BlazorSample.Components.Layout
  

• Adjon hozzá egy @using direktívát az összetevődefiníció tetején, ahol az elrendezést használják:

  @using BlazorSample.Components.Layout
  @layout DoctorWhoLayout
  

• Teljes mértékben minősítse annak az elrendezésnek a névterét, ahol a rendszer használja:

  @layout BlazorSample.Components.Layout.DoctorWhoLayout
  

Egy elrendezés alkalmazása egy összetevőre

A @layoutRazor direktívával elrendezést alkalmazhat egy útválasztható Razor komponensre, amely rendelkezik egy @page direktívával. A fordító átalakítja @layout egy LayoutAttribute, és alkalmazza az attribútumot az összetevőosztályra.

A következő Episodes összetevő tartalmát a rendszer a @Bodypozíciójánál helyezi be a DoctorWhoLayout-be.

Episodes.razor:

@page "/episodes"
@layout DoctorWhoLayout

<h2>Doctor Who® Episodes</h2>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sunmakers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

Az alábbi renderelt HTML-jelölést az előző DoctorWhoLayout és Episodes összetevő állítja elő. A felesleges jelölőelemek nem jelennek meg annak érdekében, hogy a hangsúly a két érintett összetevő által biztosított tartalmon legyen.

• Az élőfej (<header>...</header>), a navigációs sáv (<nav>...</nav>) és az élőlábban (<footer>...</footer>) található H1 "adatbázis" fejléc (<h1>...</h1>) a DoctorWhoLayout összetevőből származik.
• A H2 "epizódok" címsora (<h2>...</h2>) és az epizódlista (<ul>...</ul>) a Episodes összetevőből származik.

<header>
    <h1 ...>...</h1>
</header>

<nav>
    ...
</nav>

<h2>...</h2>

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<footer>
    ...
</footer>

Ha egy összetevőben közvetlenül megadja az elrendezést, az felülír egy alapértelmezett elrendezést.

• Egy _Imports.razor fájlból importált @layout direktíva alapján, az alábbi Elrendezés alkalmazása az összetevők mappájára szakaszban leírtak szerint.
• Állítsa be az alkalmazás alapértelmezett elrendezését a jelen cikk későbbi, Alapértelmezett elrendezés alkalmazása alkalmazásra szakaszában leírtak szerint.

Elrendezés alkalmazása egy összetevőket tartalmazó mappára

Egy alkalmazás minden mappája opcionálisan tartalmazhat egy _Imports.razornevű sablonfájlt. A fordító tartalmazza az importálási fájlban megadott irányelveket az ugyanabban a mappában lévő Razor-sablonokban, és rekurzívan az összes almappájában. Ezért egy @layout DoctorWhoLayout tartalmazó _Imports.razor-fájl biztosítja, hogy a mappa összes összetevője használja a DoctorWhoLayout összetevőt. Nem szükséges a mappában és az almappákban minden Razor összetevőhöz (.razor) ismételten hozzáadnia a @layout DoctorWhoLayout-t.

_Imports.razor:

@layout DoctorWhoLayout
...

A _Imports.razor fájl hasonló a _ViewImports.cshtml fájlhoz Razor nézetekhez és lapokhoz, de kifejezetten Razor összetevőfájlokra vonatkozik.

Az _Imports.razor elrendezésének megadása felülbírálja az útválasztó alapértelmezett alkalmazáselrendezésként megadott elrendezést, amelyet a következő szakaszban ismertetünk.

Figyelmeztetés

Ne adjon hozzá Razor@layout direktívát a gyökér _Imports.razor fájlhoz, ami végtelen elrendezési ciklust eredményez. Az alapértelmezett alkalmazáselrendezés szabályozásához adja meg az elrendezést a Router összetevőben. További információ: Alapértelmezett elrendezés alkalmazása alkalmazás szakaszra.

Jegyzet

A @layoutRazor irányelv csak azokra az Razor összetevőkre alkalmaz elrendezést, amelyek rendelkeznek @page irányelvvel és irányíthatók.

Alapértelmezett elrendezés alkalmazása alkalmazásra

Adja meg az alapértelmezett alkalmazáselrendezést a Router összetevő RouteView összetevőjében. Az elrendezés típusának beállításához használja a DefaultLayout paramétert:

<RouteView RouteData="routeData" DefaultLayout="typeof({LAYOUT})" />

Az előző példában a {LAYOUT} helyőrző az elrendezés (például DoctorWhoLayout, ha az elrendezés fájl neve DoctorWhoLayout.razor). Előfordulhat, hogy az elrendezés névterét a .NET-verziótól és a Blazor alkalmazás típusától függően kell megadnia. További információ: lásd a Az elrendezés névterének elérhetővé tétele szakaszt.

Az elrendezés alapértelmezettként való megadása az Router-összetevő RouteView-ben hasznos gyakorlat, mivel a jelen cikk előző szakaszaiban leírtak szerint módosíthatja az elrendezést összetevőnként vagy mappánként. Javasoljuk, hogy az Router összetevővel állítsa be az alkalmazás alapértelmezett elrendezését, mert ez az elrendezések használatának legszabályosabb és legrugalmasabb módszere.

Elrendezés alkalmazása tetszőleges tartalomra (LayoutView összetevőre)

Ha tetszőleges Razor sablontartalomhoz szeretne elrendezést beállítani, adja meg az elrendezést egy LayoutView összetevővel. Bármelyik Razor összetevőben használhatja a LayoutView-t. Az alábbi példa egy ErrorLayout nevű elrendezési összetevőt állít be az MainLayout összetevő NotFound sablonhoz (<NotFound>...</NotFound>).

<Router ...>
    <Found ...>
        ...
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(ErrorLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Előfordulhat, hogy meg kell adnia az elrendezés névterét a .NET-verziótól és a Blazor alkalmazás típusától függően. A további információkért lásd a Az elrendezés névterének elérhetővé tétele szakaszt.

Fontos

A Blazor Web Appnem használja a NotFound paramétert (<NotFound>...</NotFound> jelölés), de a visszamenőleges kompatibilitást a paraméter biztosítja, elkerülve a keretrendszer inkompatibilis változásait. A kiszolgálóoldali ASP.NET Core köztes szoftverfolyamat feldolgozza a kiszolgálón lévő kéréseket. Használjon kiszolgálóoldali technikákat a hibás kérések kezeléséhez. További információ: ASP.NET Core Blazor renderelési módok.

Beágyazott elrendezések

Az összetevők hivatkozhatnak egy olyan elrendezésre, amely más elrendezésre hivatkozik. A beágyazott elrendezések például többszintű menüstruktúrák létrehozására szolgálnak.

Az alábbi példa a beágyazott elrendezések használatát mutatja be. A "Elrendezés alkalmazása egy összetevőre" szakaszban látható Episodes komponens az, amely megjelenik. Az összetevő a DoctorWhoLayout összetevőre hivatkozik.

Az alábbi DoctorWhoLayout összetevő a jelen cikkben korábban bemutatott példa módosított verziója. Az élőfej és az élőláb elemei el lesznek távolítva, és az elrendezés egy másik elrendezésre hivatkozik, ProductionsLayout. A Episodes összetevő megjelenik, ahol a @Body a DoctorWhoLayout-ben jelenik meg.

DoctorWhoLayout.razor:

@inherits LayoutComponentBase
@layout ProductionsLayout

<PageTitle>Doctor Who® Database</PageTitle>

<h1>Doctor Who® Database</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

@Body

<div>
    @TrademarkMessage
</div>

@code {
    public string TrademarkMessage { get; set; } =
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/ https://www.bbc.com";
}

A ProductionsLayout összetevő tartalmazza a legfelső szintű elrendezési elemeket, ahol az élőfej (<header>...</header>) és az élőláb (<footer>...</footer>) elemei már megtalálhatók. A Episodes összetevővel rendelkező DoctorWhoLayout ott jelenik meg, ahol @Body jelenik meg.

ProductionsLayout.razor:

@inherits LayoutComponentBase

<header>
    <h1>Productions</h1>
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

@Body

<footer>
    Footer of Productions Layout
</footer>

Az alábbi renderelt HTML-kódot az előző beágyazott elrendezés állítja elő. A felesleges jelölések nem kerülnek felhasználásra, hogy az érintett három összetevő által biztosított beágyazott tartalomra összpontosíthasson.

• A fejléc (<header>...</header>), a gyártási navigációs sáv (<nav>...</nav>) és a lábléc (<footer>...</footer>) elemei és tartalma a ProductionsLayout összetevőből származik.
• A H1 "adatbázis" címsora (<h1>...</h1>), epizód navigációs sávja (<nav>...</nav>) és védjegyadatai (<div>...</div>) a DoctorWhoLayout összetevőből származnak.
• A H2 "epizódok" címsora (<h2>...</h2>) és az epizódlista (<ul>...</ul>) a Episodes összetevőből származik.

<header>
    ...
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

<h1>...</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

<h2>...</h2>

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<div>
    ...
</div>

<footer>
    ...
</footer>

Razor Pages-elrendezés megosztása integrált összetevőkkel

Ha az útvonalazható összetevők integrálva vannak egy Razor Pages-alkalmazásba, az alkalmazás megosztott elrendezése használható az összetevőkkel. További információ: ASP.NET Core Razor-összetevők integrálása MVC-vel vagy Razor Pages.

Szakaszok

Ha gyermek Razor összetevőből szeretné szabályozni az elrendezés tartalmát, tekintse meg ASP.NET Core Blazor szakaszokat.

További erőforrások

• Elrendezés ASP.NET Core
• Blazor GitHub-tárház (dotnet/blazor-samples) mintái (hogyan töltsük le)