Blazor rozložení jádra ASP.NET

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čky s komponentami, které na ni odkazují. Rozložení můžou používat datové vazby, injektáž závislostí a další funkce součástí.

Součásti rozložení

Vytvoření komponenty rozložení

Vytvoření komponenty rozlož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í součást z LayoutComponentBase. Body Definuje LayoutComponentBase vlastnost (RenderFragmenttyp) 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 RenderFragmentkomponentách ASP.NET CoreRazor.

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

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 Komponenty

V aplikaci vytvořené ze šablony MainLayoutprojektu je součástí výchozí rozložení aplikace.Blazor BlazorRozložení přijímá Flexbox layout model (MDN documentation) (specifikace W3C).

BlazorFunkce izolace šablon stylů CSS na komponentu MainLayout používá izolované styly CSS. 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 Webová aplikace MainLayout.razor.css
• 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 rozevírací 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).

Použití rozložení

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

Umístění a obory názvů rozložení se v průběhu času pro architekturu Blazor 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ů rozložení. Při odkazování na implementaci rozložení a rozložení se nenajde bez označení oboru názvů rozložení, proveďte některý z následujících přístupů:

• Přidejte do _Imports.razor souboru direktivu @using 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 Přidejte do horní části definice komponenty direktivu, ve které se používá rozložení:

  @using BlazorSample.Components.Layout
  @layout DoctorWhoLayout
  

• Plně opravte obor názvů 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 se převede @layout na LayoutAttribute a použije atribut na třídu komponenty.

Obsah následující Episodes součásti je vložen do DoctorWhoLayout pozice @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é revize se nezobrazují, aby se zaměřily na obsah poskytnutý dvěma komponentami:

• Nadpis<h1>...</h1> "databáze" 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í ze DoctorWhoLayout komponenty.
• 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í:

• Nastavte direktivou @layout importovanou ze _Imports.razor souboru, jak je popsáno v následující části Použití rozložení do složky 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žití rozložení ve složce 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í @layout DoctorWhoLayout zajišťuje, _Imports.razor ž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 Razor soubory součástí.

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

Upozorňující

Nepřidávejte do kořenového _Imports.razor souboru direktivuRazor@layout, což vede 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 .

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 Router komponentě RouteView komponenty. 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 přizpůsobit obor názvů rozložení v závislosti na verzi a typu Blazor aplikace .NET. Další informace najdete v části Zpřístupnění oboru názvů rozložení.

Určení rozložení jako výchozího rozložení v Router komponentě RouteView je užitečný postup, protože rozložení můžete přepsat podle jednotlivých součástí nebo složek, 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žití rozložení na libovolný obsah (LayoutView součást)

Pokud chcete nastavit rozložení pro libovolný obsah šablony Razor , zadejte rozložení s komponentou LayoutView . Můžete použít libovolnou Razor komponentuLayoutView. Následující příklad nastaví komponentu rozložení pojmenovanou ErrorLayout pro MainLayout šablonu komponenty NotFound (<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>

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

Důležité

BlazorSlužba Web Apps parametr (revize) nepoužíváNotFound<NotFound>...</NotFound>, ale parametr je podporovaný kvůli zpětné kompatibilitě, aby se zabránilo zásadní změně v architektuře. Kanál middlewaru Core na straně serveru ASP.NET zpracovává požadavky na serveru. Ke zpracování chybných požadavků použijte techniky na straně serveru. Další informace najdete v tématu ASP.NET režimy vykreslování coreBlazor.

Vnořené rozložení

Komponenta může odkazovat na rozložení, které zase odkazuje na jiné rozložení. Například vnořené rozložení se používají 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 DoctorWhoLayoutEpisodes se vykreslí tam, kde @Body se zobrazí.

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é revize se nezobrazují, aby se zaměřily 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>

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

Když jsou směrovatelné komponenty integrované do Razor aplikace Pages, můžete s komponentami použít sdílené rozložení aplikace. Další informace najdete v tématu Integrace komponent ASP.NET Core Razor do aplikací ASP.NET Core.

Oddíly

Pokud chcete řídit obsah v rozložení z podřízené Razor komponenty, přečtěte si ASP.NET části CoreBlazor.

Další materiály

• Rozložení v ASP.NET Core
• Blazorukázky úložiště GitHub () (dotnet/blazor-samplespostup stažení)