Blazor rozložení jádra ASP.NET

  • Článek

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Upozorňující

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v tématu .NET a .NET Core Zásady podpory. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete v tomto článku ve verzi .NET 9.

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

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

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who™ 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>

@Body

<footer>
    @TrademarkMessage
</footer>

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

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who™ 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>

@Body

<footer>
    @TrademarkMessage
</footer>

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

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who™ 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>

@Body

<footer>
    @TrademarkMessage
</footer>

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

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who™ 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>

@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 š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):

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

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.

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 Na začátek definice komponenty přidejte 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>

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

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

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

@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í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í:

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>

Možná budete potřebovat identity 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í.

Důležité

Blazor Web Appnepoužívejte NotFound parametr (<NotFound>...</NotFound> revize), ale parametr je podporovaný pro zpětnou kompatibilitu, aby se zabránilo zásadní změně v rozhraní. 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.

Poznámka:

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

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

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

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who™ Episode 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/";
}

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who™ Episode 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/";
}

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who™ Episode 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/";
}

@inherits LayoutComponentBase
@layout ProductionsLayout

<h1>Doctor Who™ Episode 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/";
}

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

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

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

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

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

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

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 Prerender a integrace komponent ASP.NET CoreRazor.

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