układy ASP.NET Core Blazor

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z aktualną wersją, zobacz artykuł w wersji .NET 10.

Ostrzeżenie

Ta wersja ASP.NET Core nie jest już obsługiwana. Aby uzyskać więcej informacji, zobacz zasady pomocy technicznej platformy .NET i platformy .NET Core. Aby zapoznać się z aktualną wersją, zobacz artykuł w wersji .NET 10.

W tym artykule wyjaśniono, jak tworzyć składniki układu wielokrotnego użytku dla Blazor aplikacji.

Użyteczność układów Blazor

Niektóre elementy aplikacji, takie jak menu, komunikaty o prawach autorskich i logo firmy, są zwykle częścią ogólnej prezentacji aplikacji. Umieszczenie kopii znaczników dla tych elementów we wszystkich składnikach aplikacji nie jest wydajne. Za każdym razem, gdy jeden z tych elementów jest aktualizowany, każdy składnik używający elementu musi zostać zaktualizowany. Takie podejście jest kosztowne w utrzymaniu i może prowadzić do niespójnej zawartości, jeśli aktualizacja nie zostanie pominięta. Rozmieszczenia rozwiązują te problemy.

Układ Blazor to komponent Razor, który udostępnia znaczniki komponentom, które się do niego odwołują. Układy mogą używać powiązania danych, wstrzykiwania zależności i innych funkcji składników.

Tworzenie składnika układu

Aby utworzyć składnik układu:

Utwórz Razor składnik zdefiniowany przez Razor szablon lub kod języka C#. Składniki układu oparte na szablonie Razor używają .razor rozszerzenia pliku tak jak zwykłe Razor składniki. Ponieważ składniki układu są współdzielone przez wszystkie komponenty aplikacji, zwykle umieszcza się je w folderze Shared lub Layout aplikacji. Układy można jednak umieścić w dowolnej lokalizacji dostępnej dla składników, które go używają. Na przykład układ można umieścić w tym samym folderze co składniki, które go używają.
Dziedzicz składnik z LayoutComponentBase. Element LayoutComponentBase definiuje właściwość Body (typu RenderFragment) dla renderowanej zawartości wewnątrz układu.
Użyj składni Razor@Body, aby określić lokalizację w znaczniku układu, gdzie jest renderowana zawartość.

Uwaga

Aby uzyskać więcej informacji na temat RenderFragment, zobacz ASP.NET Core Razor komponenty.

DoctorWhoLayout Poniższy składnik przedstawia Razor szablon składnika układu. Układ dziedziczy LayoutComponentBase i ustawia @Body między paskiem nawigacyjnym (<nav>...</nav>) i stopką (<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";
}

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

W aplikacji utworzonej Blazor na podstawie szablonuMainLayout projektu składnik jest domyślnym układem aplikacji. BlazorUkład zastosowuje Flexbox layout model(specyfikację W3C).

BlazorFunkcja izolacji CSS nakłada izolowane style CSS na MainLayout składnik. Zgodnie z konwencją style są dostarczane przez towarzyszący arkusz stylów o tej samej nazwie, MainLayout.razor.css. Implementację frameworku ASP.NET Core arkusza stylów można przejrzeć w źródle referencyjnym ASP.NET Core (dotnet/aspnetcore repozytorium GitHub).

Blazor Web App: Znajdź MainLayout.razor.css w Components/Layout folderze projektu serwera w szablonie projektu.
Blazor WebAssembly MainLayout.razor.css.

Uwaga

Linki dokumentacji do źródła referencyjnego platformy .NET zwykle ładują domyślną gałąź repozytorium, która odzwierciedla bieżące programowanie dla następnej wersji platformy .NET. Aby wybrać tag dla określonej wersji, użyj listy rozwijanej Przełącz gałęzie lub tagi. Aby uzyskać więcej informacji, zobacz Jak wybrać tag wersji kodu źródłowego platformy ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Statycznie renderowane składniki układu

Blazor Web App Gdy program przyjmuje renderowanie poszczególnych stron/składników (Routesskładnik nie określa trybu renderowania interakcyjnego), składniki układu są renderowane statycznie na serwerze. Zastosowanie trybu renderowania interakcyjnego bezpośrednio do układu nie jest obsługiwane, ponieważ Blazor nie obsługuje serializacji RenderFragment (@Body w tym przypadku) jako parametru składnika głównego. Na przykład umieszczenie @rendermode InteractiveServer na górze komponentu MainLayout powoduje wystąpienie następującego wyjątku czasu wykonywania:

System.InvalidOperationException: Nie można przekazać parametru "Body" do składnika "MainLayout" z trybem renderowania "InteractiveServerRenderMode". Jest to spowodowane tym, że parametr jest typu delegata "Microsoft.AspNetCore.Components.RenderFragment", który jest dowolnym kodem i nie można go serializować.

Dotyczy to każdego składnika układu dziedziczącego z LayoutComponentBase w aplikacji, która stosuje renderowanie dla poszczególnych stron lub składników.

Ten scenariusz może zostać rozwiązany w przyszłej wersji programu Blazor. Aby uzyskać więcej informacji, zobacz [Blazor] Obsługa serializacji fragmentów renderowania z SSR (dotnet/aspnetcore #52768). W międzyczasie można zastosować następujące podejście w elemencie Blazor Web App , które przyjmuje renderowanie poszczególnych stron/składników.

Utwórz komponent opakowujący, który umożliwia interakcję. W poniższym przykładzie komponent otaczający zawiera sekcję Blazor, która może przyjmować zawartość od komponentu podrzędnego.

_Imports.razor W pliku dodaj dyrektywę @using dla sekcji (Microsoft.AspNetCore.Components.Sections):

@using Microsoft.AspNetCore.Components.Sections

Utwórz następujący interaktywny komponent w folderze Pages.

Pages/InteractiveWrapper.razor:

@rendermode InteractiveServer

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

@ChildContent

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

Składnik Counter może używać komponentu opakowującego i ustawiać treść sekcji interaktywnej. W poniższym przykładzie w sekcji znajduje się przycisk licznika.

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

Inne składniki aplikacji mogą również opakowować zawartość w składniku InteractiveWrapper i ustawiać zawartość sekcji interakcyjnej.

Zastosuj układ

Uczyń przestrzeń nazw układu dostępną

Lokalizacje plików układu i przestrzenie nazw platformy Blazor zmieniały się z biegiem czasu. W zależności od wersji Blazor i typu Blazor aplikacji, którą tworzysz, może być konieczne wskazanie przestrzeni nazw układu podczas jej używania. Gdy odwołujesz się do implementacji układu, a układu nie można znaleźć bez wskazania jego przestrzeni nazw, zastosuj jedno z następujących rozwiązań:

Dodaj dyrektywę @using do pliku _Imports.razor w celu określenia lokalizacji układów. W poniższym przykładzie folder układów o nazwie Layout znajduje się wewnątrz Components folderu, a przestrzeń nazw aplikacji to BlazorSample:
```
@using BlazorSample.Components.Layout
```
Dodaj dyrektywę @using w górnej części definicji składnika, w której jest używany układ:
```
@using BlazorSample.Components.Layout
@layout DoctorWhoLayout
```
W pełni kwalifikować przestrzeń nazw układu, w którym jest używana:
```
@layout BlazorSample.Components.Layout.DoctorWhoLayout
```

Stosowanie układu do składnika

Użyj dyrektywy , @layoutRazor aby zastosować układ do składnika routingu Razor , który ma dyrektywę @page . Kompilator konwertuje @layout na element LayoutAttribute i stosuje atrybut do klasy składnika.

Zawartość następującego Episodes składnika jest wstawiana do DoctorWhoLayout komponentu w pozycji @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>

Poniższy wyrenderowany znacznik HTML jest generowany przez poprzednie składniki DoctorWhoLayout oraz Episodes. Adiustacja nadmiarowa nie jest wyświetlana w celu skoncentrowania się na zawartości udostępnianej przez dwa zaangażowane składniki:

Nagłówek H1 "baza danych" (<h1>...</h1>) w sekcji nagłówka (<header>...</header>), pasek nawigacyjny (<nav>...</nav>) oraz informacje o znakach towarowych w stopce (<footer>...</footer>) pochodzą z komponentu DoctorWhoLayout.
Nagłówek H2 "odcinki" (<h2>...</h2>) i lista odcinków (<ul>...</ul>) pochodzą z komponentu Episodes.

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

<nav>
    ...
</nav>

<h2>...</h2>

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

<footer>
    ...
</footer>

Określanie układu bezpośrednio w składniku zastępuje układ domyślny:

Dyrektywa @layout ustawiona przez import z pliku _Imports.razor, jak opisano w poniższej sekcji Zastosuj układ do folderu składników.
Ustaw jako domyślny układ aplikacji, zgodnie z opisem w sekcji Zastosuj układ domyślny do aplikacji w dalszej części tego artykułu.

Zastosuj układ do folderu składników

Każdy folder aplikacji może opcjonalnie zawierać plik szablonu o nazwie _Imports.razor. Kompilator zawiera dyrektywy określone w pliku importów we wszystkich Razor szablonach w tym samym folderze i rekurencyjnie we wszystkich jego podfolderach. Dlatego plik _Imports.razor zawierający @layout DoctorWhoLayout gwarantuje, że wszystkie składniki w folderze używają składnika DoctorWhoLayout. Nie ma potrzeby wielokrotnego dodawania @layout DoctorWhoLayout do wszystkich Razor składników (.razor) w folderze i podfolderach.

_Imports.razor:

@layout DoctorWhoLayout
...

Plik _Imports.razor jest podobny do pliku _ViewImports.cshtml dla Razor widoków i stron , ale zastosowany specjalnie do Razor plików składników.

Określenie układu w , jako układu, zastępuje układ określony jako domyślny układ aplikacji routera , który został opisany w poniższej sekcji.

Ostrzeżenie

Nie należy dodawać Razor@layout dyrektywy do pliku głównego_Imports.razor, co skutkuje nieskończoną pętlą układów. Aby kontrolować domyślny układ aplikacji, określ układ w składniku Router . Aby uzyskać więcej informacji, zobacz następującą sekcję Zastosuj układ domyślny do aplikacji .

Ten sam warunek występuje, gdy używa się pliku _Imports.razor do zastosowania układu do folderu składników z dyrektywą @layout, a sam składnik układu znajduje się w tej samej hierarchii folderów co plik _Imports.razor. Występuje nieskończona pętla stosowania układu, ponieważ dyrektywa @layout jest również stosowana do składnika układu. Aby uniknąć problemów z rekursją, zalecamy przechowywanie składników układu we własnym folderze (na przykład Layouts), z dala od miejsca, w którym są stosowane pliki _Imports.razor.

Uwaga

Dyrektywa @layoutRazor stosuje układ tylko do składników, do których można trasować ruch Razor i które mają dyrektywę @page.

Stosowanie domyślnego układu do aplikacji

Określ domyślny układ aplikacji w składniku Router będącym częścią RouteView. Użyj parametru , DefaultLayout aby ustawić typ układu:

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

W poprzednim przykładzie symbol zastępczy {LAYOUT} jest układem (na przykład DoctorWhoLayout jeśli nazwa pliku układu to DoctorWhoLayout.razor). Może zajść potrzeba zidentyfikowania przestrzeni nazw układu w zależności od wersji platformy .NET i typu aplikacji Blazor. Aby uzyskać więcej informacji, zobacz sekcję Umożliwienie dostępu do przestrzeni nazw układu.

Określenie układu jako domyślnego układu w składniku Router RouteView jest przydatną praktyką, ponieważ można zastąpić układ dla poszczególnych składników lub poszczególnych folderów, zgodnie z opisem w poprzednich sekcjach tego artykułu. Zalecamy użycie Router składnika w celu ustawienia domyślnego układu aplikacji, ponieważ jest to najbardziej ogólne i elastyczne podejście do korzystania z układów.

Zastosuj układ do dowolnej zawartości (komponent `LayoutView`)

Aby ustawić układ dla dowolnej Razor zawartości szablonu, określ układ ze składnikiem LayoutView . Można użyć elementu LayoutView w dowolnym Razor składniku. W poniższym przykładzie ustawiono składnik układu o nazwie ErrorLayout dla składnika, który zawiera następujący Razor znacznik.

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

Możesz potrzebować określić przestrzeń nazw układu, w zależności od wersji platformy .NET i typu aplikacji Blazor. Aby uzyskać więcej informacji, zobacz sekcję Umożliwienie dostępu do przestrzeni nazw układu.

Uwaga

Wraz z wydaniem platformy .NET 5.0.1 i wszystkimi dodatkowymi wersjami 5.x składnik zawiera parametr Router ustawiony na wartość PreferExactMatches. Aby uzyskać więcej informacji, zobacz Migrowanie z platformy ASP.NET Core 3.1 do platformy .NET 5.

Układy zagnieżdżone

Składnik może odwoływać się do układu, który z kolei odwołuje się do innego układu. Na przykład zagnieżdżone układy służą do tworzenia struktury wielopoziomowego menu.

W poniższym przykładzie pokazano, jak używać układów zagnieżdżonych. Składnik Episodes pokazany w sekcji Zastosuj układ do składnika jest składnikiem do wyświetlenia. Składnik odwołuje się do DoctorWhoLayout składnika.

Poniższy DoctorWhoLayout składnik jest zmodyfikowaną wersją przykładu pokazaną wcześniej w tym artykule. Elementy nagłówka i stopki są usuwane, a układ odwołuje się do innego układu: ProductionsLayout. Komponent Episodes jest renderowany tam, gdzie @Body pojawia się w składniku 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/";
}

Składnik ProductionsLayout zawiera elementy układu najwyższego poziomu, w których znajdują się teraz elementy nagłówka (<header>...</header>) i stopki (<footer>...</footer>). Element DoctorWhoLayout z składnikiem Episodes jest renderowany w miejscu, gdzie @Body jest wyświetlany.

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>

Poniższy renderowany znacznik HTML jest generowany przez poprzedni zagnieżdżony układ. Adiustacja nadmiarowa nie jest wyświetlana w celu skoncentrowania się na zawartości zagnieżdżonej dostarczonej przez trzy zaangażowane składniki:

Nagłówek (<header>...</header>), produkcyjny pasek nawigacyjny (<nav>...</nav>) i elementy stopki (<footer>...</footer>) oraz ich zawartość pochodzą ze ProductionsLayout składnika.
Nagłówek H1 "baza danych" (<h1>...</h1>), pasek nawigacyjny odcinka (<nav>...</nav>) oraz informacje o znakach towarowych (<div>...</div>) pochodzą z komponentu DoctorWhoLayout.
Nagłówek H2 "odcinki" (<h2>...</h2>) i lista odcinków (<ul>...</ul>) pochodzą z komponentu Episodes.

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

Gdy komponenty routowalne są zintegrowane z aplikacją Razor Pages, współużytkowany układ aplikacji może być używany z tymi komponentami. Aby uzyskać więcej informacji, zobacz Integrowanie składników ASP.NET Core Razor z MVC lub Razor Pages.

Sekcje

Aby kontrolować zawartość w układzie Razor ze składnika podrzędnego, zobacz sekcje Blazor ASP.NET Core.

Dodatkowe zasoby

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-11-11

Udostępnij przez

układy ASP.NET Core Blazor

Użyteczność układów Blazor

Tworzenie składnika układu

MainLayout komponent

Statycznie renderowane składniki układu

Zastosuj układ

Uczyń przestrzeń nazw układu dostępną

Stosowanie układu do składnika

Zastosuj układ do folderu składników

Stosowanie domyślnego układu do aplikacji

Zastosuj układ do dowolnej zawartości (komponent LayoutView)

Układy zagnieżdżone

Udostępnij układ stron Razor ze zintegrowanymi składnikami

Sekcje

Dodatkowe zasoby

Sprzężenie zwrotne

Dodatkowe źródła

`MainLayout` komponent

Zastosuj układ do dowolnej zawartości (komponent `LayoutView`)