BlazorASP.NET Core Rozložení

Článek
11/09/2021
9 min ke čtení

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 kódu pro tyto prvky do všech komponent aplikace není efektivní. Pokaždé, když je jeden z těchto prvků aktualizován, musí být aktualizována každá komponenta, která element používá. Údržba tohoto přístupu je nákladná a v případě vynechání aktualizace může vést k nekonzistentnímu obsahu. Rozložení tyto problémy řeší.

Rozložení Blazor je Razor komponenta, která sdílí značky s komponentami, které na něj odkazují. Rozložení mohou používat datové vazby, injektáž závislostía další funkce komponent.

Součásti rozložení

Vytvoření komponenty rozložení

Vytvoření komponenty rozložení:

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

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

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who&trade; Episode Database</h1>
</header>

<nav>
    <a href="masterlist">Master 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/";
}

`MainLayout` (komponenta)

V aplikaci vytvořené ze Blazor šablony projektuje komponenta výchozím MainLayout rozložením aplikace.

Shared/MainLayout.razor:

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
</div>

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

Poznámka

dokumentace odkazuje na zdrojový odkaz na ASP.NET Core načtení main větve úložiště, která představuje aktuální vývoj jednotky produktu pro další verzi ASP.NET Core. Pokud chcete vybrat větev pro jinou verzi, vyberte ji pomocí rozevíracího seznamu větve přepínače nebo značky . vyberte například release/5.0 větev pro verzi ASP.NET Core 5,0.

Použití rozložení

Použití rozložení na komponentu

Direktiva @layout Razor slouží k použití rozložení na směrovatelné Razor součásti, která má @page direktivu. Kompilátor převádí @layout na a LayoutAttribute aplikuje atribut na třídu komponenty.

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

Pages/Episodes.razor:

@page "/episodes"
@layout DoctorWhoLayout

<h2>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 Sun Makers</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í komponentou DoctorWhoLayout Episodes a . Pokud se chcete zaměřit na obsah poskytovaný těmito dvěma komponentami, nezobrazuje se vnější přirážka:

Záhlaví Databáze Kdo ™ lékařů ( ) v záhlaví ( ), navigačním panelu ( ) a elementu informací o ochranných známce ( ) v zápatí ( ) pocházejí <h1>...</h1> z komponenty <header>...</header> <nav>...</nav> <div>...</div> <footer>...</footer> DoctorWhoLayout .
Nadpisy Epis ( ) a <h2>...</h2> seznam seriálů ( <ul>...</ul> ) pocházejí ze součásti Episodes .

<body>
    <div id="app">
        <header>
            <h1>Doctor Who&trade; Episode Database</h1>
        </header>

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

        <h2>Episodes</h2>

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

        <footer>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </footer>
    </div>
</body>

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

Nastavte pomocí direktivy importované z komponenty ( ), jak je popsáno v následujícím oddílu Použití @layout _Imports rozložení pro _Imports.razor složku komponent.
Nastavte jako výchozí rozložení aplikace, jak je popsáno v části Použití výchozího rozložení pro aplikaci dále v tomto článku.

Použití rozložení na složku komponent

Každá složka aplikace může volitelně obsahovat soubor šablony s názvem _Imports.razor . Kompilátor obsahuje direktivy zadané v souboru imports ve všech šablonách ve stejné složce a rekurzivně ve všech Razor jejích podsložkách. Soubor obsahující proto zajišťuje, že komponenty ve složce používají _Imports.razor @layout DoctorWhoLayout všechny součásti nástroje DoctorWhoLayout . Není nutné opakovaně přidávat do všech komponent @layout DoctorWhoLayout Razor ( ) ve .razor složce a podsložkách.

_Imports.razor:

@layout DoctorWhoLayout
...

Soubor _Imports.razor je podobný souboru _ViewImports.cshtml Razor pro zobrazení a stránky, ale používá se speciálně pro Razor soubory součástí.

Určení rozložení v přepíše rozložení zadané jako výchozí rozložení aplikace směrovače, které je popsané _Imports.razor v následující části.

Upozornění

Nepřidáte do kořenového souboru direktivu , což vede k nekonečné Razor @layout _Imports.razor smyčce rozložení. Pokud chcete řídit výchozí rozložení aplikace, zadejte rozložení v Router komponentě. Další informace najdete v následující části Použití výchozího rozložení pro aplikaci.

Poznámka

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

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

Zadejte výchozí rozložení aplikace v App Router komponentě komponenty. Následující příklad z aplikace založené na Blazor šabloně projektu nastaví výchozí rozložení na MainLayout komponentu.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Další informace o Router komponentě najdete v tématu ASP.NET Core Blazor úsek .

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

Použití rozložení na libovolný obsah `LayoutView` (součást)

Pokud chcete nastavit rozložení pro libovolný Razor obsah šablony, zadejte rozložení s LayoutView komponentou. Můžete použít v LayoutView jakékoli Razor komponentě. Následující příklad nastaví komponentu rozložení s názvem pro ErrorLayout MainLayout šablonu komponenty ( NotFound <NotFound>...</NotFound> ).

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(ErrorLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Vnořená rozložení

Komponenta může odkazovat na rozložení, které zase odkazuje na jiné rozložení. Vnořená rozložení se například 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í na komponentu je komponenta, která se má zobrazit. Komponenta odkazuje na DoctorWhoLayout komponentu.

Následující DoctorWhoLayout komponenta je upravená verze příkladu uvedená dříve 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, @Body kde se zobrazí v DoctorWhoLayout .

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who&trade; Episode Database</h1>

<nav>
    <a href="episode-masterlist">Master 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/";
}

Komponenta obsahuje prvky rozložení nejvyšší úrovně, kde se teď nachází elementy záhlaví ( ) a ProductionsLayout <header>...</header> zápatí ( <footer>...</footer> ). S DoctorWhoLayout komponentou Episodes se vykreslí tam, kde @Body se zobrazí .

Shared/ProductionsLayout.razor:

@inherits LayoutComponentBase

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

<nav>
    <a href="master-production-list">Master 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. Pokud se chcete zaměřit na vnořený obsah poskytovaný třemi komponentami, nezobrazuje se vnější přirážka:

Prvky záhlaví ( ), produkčního navigačního panelu ( ) a zápatí ( ) a jejich obsahu <header>...</header> pocházejí <nav>...</nav> z <footer>...</footer> ProductionsLayout komponenty.
Složka Doctor Kdo Databáze v nádroce ™ ( ), navigační panel scény ( ) a prvek informací o ochranných známce <h1>...</h1> ( ) pochází ze složky <nav>...</nav> <div>...</div> DoctorWhoLayout .
Nadpisy Epis ( ) a <h2>...</h2> seznam seriálů ( <ul>...</ul> ) pocházejí ze součásti Episodes .

<body>
    <div id="app">
        <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>

        <h1>Doctor Who&trade; Episode Database</h1>

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

        <h2>Episodes</h2>

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

        <div>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </div>

        <footer>
            Footer of Productions Layout
        </footer>
    </div>
</body>

Když jsou směrovatelné komponenty integrované do aplikace Pages, je možné se s komponentami použít sdílené Razor rozložení aplikace. Další informace naleznete v tématu Předběžné vykreslení a integrace ASP.NET Core Razor komponent.

Další zdroje informací

Rozložení v ASP.NET Core

Rozložení Blazor je Razor komponenta, která sdílí značky s komponentami, které na něj odkazují. Rozložení mohou používat datové vazby, injektáž závislostía další funkce komponent.

Součásti rozložení

Vytvoření komponenty rozložení

Vytvoření komponenty rozložení:

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

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who&trade; Episode Database</h1>
</header>

<nav>
    <a href="masterlist">Master 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/";
}

`MainLayout` (komponenta)

V aplikaci vytvořené ze Blazor šablony projektuje komponentou výchozí MainLayout rozložení aplikace.

Shared/MainLayout.razor:

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
</div>

Poznámka

Použití rozložení

Použití rozložení na komponentu

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

Pages/Episodes.razor:

@page "/episodes"
@layout DoctorWhoLayout

<h2>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 Sun Makers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

Záhlaví Databáze Kdo ™ lékařů ( ) v záhlaví ( ), navigačním panelu ( ) a elementu informací o ochranných známce ( ) v zápatí ( ) pocházejí <h1>...</h1> z komponenty <header>...</header> <nav>...</nav> <div>...</div> <footer>...</footer> DoctorWhoLayout .
Nadpisy Vobecy ( ) a <h2>...</h2> seznam seriálů ( <ul>...</ul> ) pocházejí ze součásti Episodes .

<body>
    <div id="app">
        <header>
            <h1>Doctor Who&trade; Episode Database</h1>
        </header>

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

        <h2>Episodes</h2>

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

        <footer>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </footer>
    </div>
</body>

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

Nastavte pomocí direktivy importované z komponenty ( ), jak je popsáno v následujícím oddílu Použití @layout _Imports rozložení pro _Imports.razor složku komponent.
Nastavte jako výchozí rozložení aplikace, jak je popsáno v části Použití výchozího rozložení pro aplikaci dále v tomto článku.

Použití rozložení na složku komponent

_Imports.razor:

@layout DoctorWhoLayout
...

Soubor _Imports.razor je podobný souboru _ViewImports.cshtml pro Razor zobrazení a stránky, ale používá se speciálně pro soubory Razor součástí.

Určení rozložení v přepíše rozložení zadané jako výchozí rozložení aplikace směrovače, které je popsané _Imports.razor v následující části.

Upozornění

Poznámka

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

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

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Poznámka

S vydáním verze ASP.NET Core 5.0.1 a pro jakékoli další verze 5.x zahrnuje komponenta parametr Router PreferExactMatches nastavený na @true . Další informace naleznete v tématu Migrace z ASP.NET Core 3.1 na 5.0.

Další informace o Router komponentě najdete v tématu ASP.NET Core Blazor úsek .

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

Použití rozložení na libovolný obsah `LayoutView` (součást)

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(ErrorLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Poznámka

Vnořená rozložení

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

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who&trade; Episode Database</h1>

<nav>
    <a href="episode-masterlist">Master 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/";
}

Shared/ProductionsLayout.razor:

@inherits LayoutComponentBase

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

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

@Body

<footer>
    Footer of Productions Layout
</footer>

Prvky záhlaví ( ), produkčního navigačního panelu ( ) a zápatí ( ) a jejich obsahu <header>...</header> pocházejí <nav>...</nav> z <footer>...</footer> ProductionsLayout komponenty.
Složka Doctor Kdo Databáze v nádroce ™ ( ), navigační panel scény ( ) a prvek informací o ochranných známce <h1>...</h1> ( ) pochází ze složky <nav>...</nav> <div>...</div> DoctorWhoLayout .
Nadpisy Vobecy ( ) a <h2>...</h2> seznam seriálů ( <ul>...</ul> ) pocházejí ze součásti Episodes .

<body>
    <div id="app">
        <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>

        <h1>Doctor Who&trade; Episode Database</h1>

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

        <h2>Episodes</h2>

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

        <div>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </div>

        <footer>
            Footer of Productions Layout
        </footer>
    </div>
</body>

Další zdroje informací

Rozložení v ASP.NET Core

Rozložení Blazor je Razor komponenta, která sdílí značky s komponentami, které na něj odkazují. Rozložení mohou používat datové vazby, injektáž závislostía další funkce komponent.

Součásti rozložení

Vytvoření komponenty rozložení

Vytvoření komponenty rozložení:

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

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who&trade; Episode Database</h1>
</header>

<nav>
    <a href="masterlist">Master 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/";
}

`MainLayout` (komponenta)

V aplikaci vytvořené ze Blazor šablony projektuje komponentou výchozí MainLayout rozložení aplikace.

Shared/MainLayout.razor:

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

Použití rozložení

Použití rozložení na komponentu

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

Pages/Episodes.razor:

@page "/episodes"
@layout DoctorWhoLayout

<h2>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 Sun Makers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

Záhlaví Databáze Kdo ™ lékařů ( ) v záhlaví ( ), navigačním panelu ( ) a elementu informací o ochranných známce ( ) v zápatí ( ) pocházejí <h1>...</h1> z komponenty <header>...</header> <nav>...</nav> <div>...</div> <footer>...</footer> DoctorWhoLayout .
Nadpisy Vobecy ( ) a <h2>...</h2> seznam seriálů ( <ul>...</ul> ) pocházejí ze součásti Episodes .

<body>
    <div id="app">
        <header>
            <h1>Doctor Who&trade; Episode Database</h1>
        </header>

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

        <h2>Episodes</h2>

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

        <footer>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </footer>
    </div>
</body>

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

Nastavte pomocí direktivy importované z komponenty ( ), jak je popsáno v následujícím oddílu Použití @layout _Imports rozložení pro _Imports.razor složku komponent.
Nastavte jako výchozí rozložení aplikace, jak je popsáno v části Použití výchozího rozložení pro aplikaci dále v tomto článku.

Použití rozložení na složku komponent

_Imports.razor:

@layout DoctorWhoLayout
...

Soubor _Imports.razor je podobný souboru _ViewImports.cshtml pro Razor zobrazení a stránky, ale používá se speciálně pro soubory Razor součástí.

Určení rozložení v přepíše rozložení zadané jako výchozí rozložení aplikace směrovače, které je popsané _Imports.razor v následující části.

Upozornění

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

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

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Další informace o Router komponentě najdete v tématu ASP.NET Core Blazor úsek .

Použití rozložení na libovolný obsah `LayoutView` (součást)

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(ErrorLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Vnořená rozložení

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

Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who&trade; Episode Database</h1>

<nav>
    <a href="episode-masterlist">Master 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/";
}

Shared/ProductionsLayout.razor:

@inherits LayoutComponentBase

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

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

@Body

<footer>
    Footer of Productions Layout
</footer>

Prvky záhlaví ( ), produkčního navigačního panelu ( ) a zápatí ( ) a jejich obsahu <header>...</header> pocházejí <nav>...</nav> z <footer>...</footer> ProductionsLayout komponenty.
Z této Kdo pochází název Doctor Kdo Databáze v nádroce ™ ( ), navigační panel scény ( ) a prvek informací o ochranných <h1>...</h1> <nav>...</nav> <div>...</div> známce ( DoctorWhoLayout ).
Nadpisy Epis ( ) a <h2>...</h2> seznam seriálů ( <ul>...</ul> ) pocházejí ze součásti Episodes .

<body>
    <div id="app">
        <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>

        <h1>Doctor Who&trade; Episode Database</h1>

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

        <h2>Episodes</h2>

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

        <div>
            Doctor Who is a registered trademark of the BBC. 
            https://www.doctorwho.tv/
        </div>

        <footer>
            Footer of Productions Layout
        </footer>
    </div>
</body>

Další materiály

Rozložení v ASP.NET Core

BlazorASP.NET Core Rozložení

Ohodnoťte vaše zkušenosti

Součásti rozložení

Vytvoření komponenty rozložení

MainLayout (komponenta)

Použití rozložení

Použití rozložení na komponentu

Použití rozložení na složku komponent

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

Použití rozložení na libovolný obsah LayoutView (součást)

Vnořená rozložení

Sdílení rozložení Razor stránek s integrovanými komponentami

Další zdroje informací

Součásti rozložení

Vytvoření komponenty rozložení

MainLayout (komponenta)

Použití rozložení

Použití rozložení na komponentu

Použití rozložení na složku komponent

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

Použití rozložení na libovolný obsah LayoutView (součást)

Vnořená rozložení

Sdílení rozložení Razor stránek s integrovanými komponentami

Další zdroje informací

Součásti rozložení

Vytvoření komponenty rozložení

MainLayout (komponenta)

Použití rozložení

Použití rozložení na komponentu

Použití rozložení na složku komponent

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

Použití rozložení na libovolný obsah LayoutView (součást)

Vnořená rozložení

Sdílení rozložení Razor stránek s integrovanými komponentami

Další materiály

`MainLayout` (komponenta)

Použití rozložení na libovolný obsah `LayoutView` (součást)

`MainLayout` (komponenta)

Použití rozložení na libovolný obsah `LayoutView` (součást)

`MainLayout` (komponenta)

Použití rozložení na libovolný obsah `LayoutView` (součást)