ASP.NET Core Blazor rozložení

Tento článek vysvětluje, jak vytvořit opakovaně použitelné součásti rozložení pro Blazor aplikace.

Blazor Užitečnost rozložení

Některé prvky aplikace, jako jsou nabídky, zprávy o autorských právech a firemní loga, jsou obvykle součástí celkové prezentace aplikace. Umístění kopie značek pro tyto prvky do všech součástí aplikace není efektivní. Při každé aktualizaci jednoho z těchto prvků musí být aktualizována každá komponenta, která tento prvek používá. Tento přístup je nákladný pro údržbu a může vést k nekonzistentnímu obsahu, pokud se aktualizace zmešká. Rozložení řeší tyto problémy.

Rozložení Blazor je komponenta Razor, která sdílí značkování s komponentami, které na něj odkazují. Rozložení můžou používat datové vazby, injektáž závislostí a další funkce součástí.

Vytvoření komponenty rozložení

Jak vytvořit komponentu rozvržení:

• Vytvořte komponentu Razor definovanou šablonou nebo kódem jazyka Razor C#. Součásti rozložení založené na Razor šabloně používají příponu .razor souboru stejně jako běžné Razor komponenty. Vzhledem k tomu, že se komponenty rozložení sdílí mezi komponentami aplikace, obvykle se umístí do Shared složky nebo Layout aplikace. Rozložení se ale dají umístit do libovolného umístění přístupného komponentám, které je používají. Rozložení může být například umístěné ve stejné složce jako součásti, které ho používají.
• Dědí komponent z LayoutComponentBase. LayoutComponentBase definuje Body vlastnost (RenderFragment typ) pro vykreslený obsah uvnitř rozložení.
• Razor Pomocí syntaxe @Body určete umístění v kódu rozložení, ve kterém se obsah vykresluje.

Poznámka:

Další informace o RenderFragment naleznete v komponentech Razor ASP.NET Core.

Následující DoctorWhoLayout komponenta ukazuje Razor šablonu komponenty rozložení. Rozložení dědí LayoutComponentBase a nastaví @Body mezi navigačním panelem (<nav>...</nav>) a zápatím (<footer>...</footer>).

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 komponenta

V aplikaci vytvořené ze Blazor šablony projektu je MainLayoutaplikace. BlazorRozložení přijímá Flexbox layout model (specifikace W3C ).

BlazorFunkce izolace CSS aplikuje izolované CSS styly na komponentu MainLayout. Podle konvence jsou styly poskytovány doprovodnou šablonou stylů se stejným názvem , MainLayout.razor.css. Implementace šablony stylů ASP.NET Core je k dispozici pro kontrolu v referenčním zdroji ASP.NET Core (dotnet/aspnetcore úložiště GitHub):

• Blazor Web App: Vyhledejte MainLayout.razor.css složku Components/Layout projektu serveru v šabloně projektu.
• Blazor WebAssembly MainLayout.razor.css.

Poznámka:

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro příští verzi .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozbalovací seznam pro přepnutí větví nebo značek. Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Staticky vykreslené součásti rozložení

Při přechodu na Blazor Web App vykreslování jednotlivých stránek nebo součástí ( Routes komponenta neurčuje interaktivní režim vykreslování), součásti rozložení se na serveru vykreslují staticky. Použití interaktivního režimu vykreslování přímo na rozložení není podporováno, protože Blazor nepodporuje serializaci RenderFragment (@Body v tomto případě) jako parametr kořenové komponenty. Umístěním @rendermode InteractiveServer na začátek komponenty MainLayout dojde k následující výjimce za běhu:

System.InvalidOperationException: Parametr Body nelze předat komponentě MainLayout s rendermode InteractiveServerRenderMode. Důvodem je, že parametr je typu delegáta Microsoft.AspNetCore.Components.RenderFragment, což je libovolný kód a nelze ho serializovat.

To platí pro všechny součásti rozložení, které dědí z LayoutComponentBase v aplikaci přijímající vykreslování jednotlivých stránek nebo komponent.

Tento scénář může být vyřešen v budoucí verzi Blazor. Další informace naleznete v tématu [Blazor] Podpora serializace fragmentů vykreslování ze SSR (dotnet/aspnetcore #52768). Mezitím můžete přistoupit k následující metodě v rámci Blazor Web App, která využívá vykreslování po stránkách nebo komponentách.

Vytvořte komponentu obálky, která dokáže interaktivitu. V následujícím příkladu obsahuje komponenta obálky Blazor oddíl , který může přijímat obsah z podřízené komponenty.

_Imports.razor V souboru přidejte direktivu @using pro oddíly (Microsoft.AspNetCore.Components.Sections):

@using Microsoft.AspNetCore.Components.Sections

Ve složce Pages vytvořte následující interaktivní zabalenou komponentu.

Pages/InteractiveWrapper.razor:

@rendermode InteractiveServer

<div>
    <SectionOutlet SectionName="top-bar" />
</div>

@ChildContent

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

Komponenta Counter může používat komponentu obálky a nastavit interaktivní obsah oddílu. V následujícím příkladu je v oddílu umístěné tlačítko čítače.

Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<InteractiveWrapper>

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

    <PageTitle>Counter</PageTitle>

    <h1>Counter</h1>

    <p role="status">Current count: @currentCount</p>

    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

</InteractiveWrapper>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Další komponenty kolem aplikace můžou také zabalit obsah do InteractiveWrapper komponenty a nastavit interaktivní obsah oddílu.

Použijte rozložení

Zpřístupněte obor názvů rozložení

Umístění souborů rozložení a obory názvů se pro rámec Blazor v průběhu času změnily. V závislosti na verzi Blazor a typu Blazor aplikace, kterou vytváříte, možná budete muset při použití určit obor názvů pro rozložení. Pokud odkazujete na implementaci rozložení a rozložení se bez určení oboru názvů nenajde, použijte některý z následujících postupů:

• Přidejte do @using souboru direktivu _Imports.razor pro umístění rozložení. V následujícím příkladu je složka rozložení s názvem Layout uvnitř Components složky a obor názvů aplikace je BlazorSample:

  @using BlazorSample.Components.Layout
  

• @using Na začátek definice komponenty přidejte direktivu, ve které se používá rozložení:

  @using BlazorSample.Components.Layout
  @layout DoctorWhoLayout
  

• Plně specifikujte namespace rozložení, ve kterém se používá:

  @layout BlazorSample.Components.Layout.DoctorWhoLayout
  

Použití rozložení u komponenty

Direktiva @layoutRazor slouží k použití rozložení na směrovatelnou Razor komponentu, která má direktivu @page . Kompilátor převede @layout na LayoutAttribute a pak aplikuje atribut na třídu komponenty.

Obsah následující komponenty Episodes je vložen do DoctorWhoLayout na pozici @Body.

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>

Následující vykreslený kód HTML je vytvořen předchozím DoctorWhoLayout a Episodes komponentou. Nadbytečné značky se nezobrazují, aby se pozornost soustředila na obsah poskytovaný dvěma zapojenými komponentami.

• Nadpis H1 "databáze" (<h1>...</h1>) v záhlaví (<header>...</header>), navigačním panelu (<nav>...</nav>) a informace o ochranných známkách v zápatí (<footer>...</footer>) pocházejí z komponenty DoctorWhoLayout.
• Nadpis H2 "epizody" (<h2>...</h2>) a seznam epizod (<ul>...</ul>) pocházejí ze Episodes komponenty.

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

<nav>
    ...
</nav>

<h2>...</h2>

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

<footer>
    ...
</footer>

Určení rozložení přímo v komponentě přepíše výchozí rozložení:

• Nastaveno direktivou @layout importovanou ze _Imports.razor souboru, jak je popsáno v následující části Použití rozložení na složku komponent.
• Nastavte jako výchozí rozložení aplikace, jak je popsáno v části Použít výchozí rozložení aplikace dále v tomto článku.

Použijte rozložení na složku součástí

Každá složka aplikace může volitelně obsahovat soubor šablony s názvem _Imports.razor. Kompilátor obsahuje direktivy uvedené v souboru importu ve všech Razor šablonách ve stejné složce a rekurzivně ve všech jejích podsložkách. Proto soubor obsahující _Imports.razor zajišťuje, @layout DoctorWhoLayout že všechny komponenty ve složce tuto komponentu DoctorWhoLayout používají. Není nutné opakovaně přidávat @layout DoctorWhoLayout do všech Razor komponent (.razor) v rámci složky a podsložek.

_Imports.razor:

@layout DoctorWhoLayout
...

Soubor _Imports.razor se podobá souboru _ViewImports.cshtml pro Razor zobrazení a stránky, ale používá se speciálně pro soubory Razor komponent.

Specifikace rozložení v _Imports.razor přepisuje rozložení určené jako výchozí rozložení aplikace směrovače, které je popsáno v následující části.

Varování

Nepřidávejte direktivu do kořenového Razor, což by vedlo k nekonečné smyčce rozložení. Pokud chcete řídit výchozí rozložení aplikace, zadejte rozložení v komponentě Router . Další informace najdete v následujícím článku Použití výchozího rozložení v oddílu aplikace .

Stejná podmínka je výsledkem použití souboru _Imports.razor k použití rozložení do složky komponent se direktivou @layout a samotná komponenta rozložení je ve stejné složce nebo hierarchii složek souboru _Imports.razor. Dochází k nekonečné smyčce při použití rozložení, protože je také aplikována direktiva @layout na komponentu rozložení. Pokud se chcete vyhnout problémům s rekurzí, doporučujeme ukládat komponenty rozložení do jejich vlastní složky (například Layouts), mimo místo, kde je používají _Imports.razor soubory.

Poznámka:

Direktiva @layoutRazor aplikuje rozložení pouze na směrovatelné Razor komponenty s direktivou @page .

Použití výchozího rozložení pro aplikaci

Zadejte výchozí rozložení aplikace v komponentě Router komponenty RouteView. Pomocí parametru DefaultLayout nastavte typ rozložení:

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

V předchozím příkladu {LAYOUT} je zástupný symbol rozložení (například DoctorWhoLayout pokud je DoctorWhoLayout.razornázev souboru rozložení ). Možná budete muset identifikovat obor názvů rozložení v závislosti na verzi .NET a typu aplikace Blazor. Další informace najdete v části Zpřístupnění rozložení oboru názvů.

Určení rozložení jako výchozího rozložení v Router komponentě RouteView je užitečný postup, protože podle potřeby můžete upravit rozložení pro jednotlivé komponenty nebo složky, jak je popsáno v předchozích částech tohoto článku. Doporučujeme použít komponentu Router k nastavení výchozího rozložení aplikace, protože se jedná o nejobecnější a nejflexibilnější přístup k používání rozložení.

Použijte rozložení na libovolný obsah (LayoutView komponenta)

Pokud chcete nastavit rozložení pro libovolný obsah šablony Razor , zadejte rozložení s komponentou LayoutView . Můžete použít LayoutView v jakékoli součásti Razor. Následující příklad nastaví komponentu rozložení pojmenovanou ErrorLayout pro komponentu, která obsahuje následující Razor značky.

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

V závislosti na verzi .NET a typu aplikace Blazor možná budete muset určit obor názvů rozložení. Další informace najdete v části Zpřístupnění rozložení oboru názvů.

Vnořené rozložení

Komponenta může odkazovat na rozložení, které zase odkazuje na jiné rozložení. Například se vnořené rozložení používá k vytvoření víceúrovňových struktur nabídek.

Následující příklad ukazuje, jak používat vnořené rozložení. Komponenta Episodes zobrazená v části Použít rozložení součásti je komponenta, která se má zobrazit. Komponenta odkazuje na komponentu DoctorWhoLayout .

Následující DoctorWhoLayout komponenta je upravená verze příkladu uvedeného výše v tomto článku. Prvky záhlaví a zápatí jsou odebrány a rozložení odkazuje na jiné rozložení. ProductionsLayout Komponenta Episodes se vykreslí tam, kde @Body se nachází v souboru DoctorWhoLayout.

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

Komponenta ProductionsLayout obsahuje prvky rozložení nejvyšší úrovně, kde se teď nacházejí prvky záhlaví (<header>...</header>) a zápatí (<footer>...</footer>). Komponenta DoctorWhoLayout je vykreslena spolu s Episodes, kde se objeví @Body.

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>

Následující vykreslený kód HTML je vytvořen předchozím vnořeným rozložením. Nadbytečné značky se nezobrazují, aby byl kladen důraz na vnořený obsah poskytovaný třemi zahrnutými komponentami.

• Prvky záhlaví (<header>...</header>), produkční navigační panel (<nav>...</nav>) a zápatí (<footer>...</footer>) a jejich obsah pocházejí ze ProductionsLayout komponenty.
• Nadpis "databáze" H1 (<h1>...</h1>), navigační panel epizody (<nav>...</nav>) a informace o ochranných známkách (<div>...</div>) pocházejí ze DoctorWhoLayout komponenty.
• Nadpis H2 "epizody" (<h2>...</h2>) a seznam epizod (<ul>...</ul>) pocházejí ze Episodes komponenty.

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

Sdílet rozložení Stránky s integrovanými komponentami Razor

Když jsou směrovatelné komponenty integrované do aplikace typu Pages, aplikace může využívat sdílené rozložení s těmito komponentami. Další informace najdete v tématu Integrace komponent ASP.NET Core Razor s MVC nebo Razor Pages.

Oddíly

Pokud chcete řídit obsah v rozložení z podřízené Razor komponenty, viz části Blazor ASP.NET Core.

Další materiály

• Rozložení v ASP.NET Core
• Blazor (dotnet/blazor-samplespostup stažení)