Dela via

ASP.NET Core Blazor layout

Anteckning

Det här är inte den senaste versionen av den här artikeln. Den aktuella versionen finns i den .NET 9-versionen av den här artikeln.

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i .NET och .NET Core Support Policy. Den aktuella versionen finns i den .NET 9-versionen av den här artikeln.

Viktig

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

Den aktuella versionen finns i den .NET 9-versionen av den här artikeln.

Den här artikeln beskriver hur du skapar återanvändbara layoutkomponenter för Blazor appar.

Användbarhet för Blazor layouter

Vissa appelement, till exempel menyer, upphovsrättsmeddelanden och företagslogotyper, ingår vanligtvis i appens övergripande presentation. Det är inte effektivt att placera en kopia av märkningen för dessa element i alla komponenter i en app. Varje gång ett av dessa element uppdateras måste varje komponent som använder elementet uppdateras. Den här metoden är kostsam att underhålla och kan leda till inkonsekvent innehåll om en uppdatering missas. Layouter löser dessa problem.

En Blazor layout är en Razor komponent som delar markering med komponenter som refererar till den. Layouts kan använda databindning, beroendeinjektionoch andra funktioner hos komponenter.

Skapa en layoutkomponent

Så här skapar du en layoutkomponent:

  • Skapa en Razor komponent som definieras av en Razor-mall eller C#-kod. Layoutkomponenter baserade på en Razor mall använder filtillägget .razor precis som vanliga Razor komponenter. Eftersom layoutkomponenter delas mellan en apps komponenter placeras de vanligtvis i appens Shared eller Layout mapp. Layouter kan dock placeras på valfri plats som är tillgänglig för de komponenter som använder den. En layout kan till exempel placeras i samma mapp som de komponenter som använder den.
  • Ärver komponenten från LayoutComponentBase. LayoutComponentBase definierar en Body egenskap (RenderFragment typ) för det renderade innehållet i layouten.
  • Använd Razor syntaxen @Body för att ange platsen i layoutmarkeringen där innehållet återges.

Anteckning

Mer information om RenderFragmentfinns i ASP.NET Core Razor-komponenter.

Följande DoctorWhoLayout komponent visar Razor mallen för en layoutkomponent. Layouten ärver LayoutComponentBase och anger @Body mellan navigeringsfältet (<nav>...</nav>) och sidfoten (<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

I en app som skapats från en Blazor projektmallär MainLayout-komponenten appens standardlayout. Blazorlayouten använder sig av Flexbox layout model (W3C-specifikation).

Blazorcss-isoleringsfunktion tillämpar isolerade CSS-format på MainLayout komponenten. Enligt konventionen tillhandahålls formaten av den medföljande formatmallen med samma namn, MainLayout.razor.css. Implementeringen av ASP.NET Core-ramverket för formatmallen är tillgänglig för granskning i referenskällan ASP.NET Core (dotnet/aspnetcore GitHub-lagringsplats):

Anteckning

Dokumentationslänkar till .NET-referenskällan läser vanligtvis in lagringsplatsens standardgren, vilket representerar den aktuella utvecklingen för nästa version av .NET. Om du vill välja en tagg för en specifik version använder du listrutan Växla grenar eller taggar. Mer information finns i Så här väljer du en versionstagg för ASP.NET Core-källkod (dotnet/AspNetCore.Docs #26205).

Blazorcss-isoleringsfunktion tillämpar isolerade CSS-format på MainLayout komponenten. Enligt konventionen tillhandahålls formaten av den medföljande formatmallen med samma namn, MainLayout.razor.css.

Statiskt renderade layoutkomponenter

När en Blazor Web App implementerar återgivning per sida/komponent (komponenten Routes anger inte ett interaktivt återgivningsläge) återges layoutkomponenter statiskt på servern. Det går inte att använda ett interaktivt återgivningsläge direkt på en layout eftersom Blazor det inte stöder serialisering av en RenderFragment (@Body i det här fallet) som en rotkomponentparameter. Om du till exempel placerar @rendermode InteractiveServer överst i komponenten MainLayout resulterar det i följande körningsundundatag:

System.InvalidOperationException: Det går inte att skicka parametern "Body" till komponenten "MainLayout" med rendermode "InteractiveServerRenderMode". Det beror på att parametern är av delegattypen "Microsoft.AspNetCore.Components.RenderFragment", som är godtycklig kod och inte kan serialiseras.

Detta gäller alla layoutkomponenter som ärver från LayoutComponentBase i en app som använder återgivning per sida/komponent.

Det här scenariot kan åtgärdas i en framtida version av Blazor. Mer information finns i [Blazor] Stöd för serialisering av återgivningsfragment från SSR (dotnet/aspnetcore #52768). Under tiden kan du använda följande metod i en Blazor Web App som tillämpar rendering per sida/komponent.

Skapa en omslutningskomponent som kan vara interaktiv. I följande exempel innehåller en omslutningskomponent ett Blazor avsnitt som kan ta emot innehåll från en underordnad komponent.

I _Imports.razor-filen, lägg till ett @using-direktiv för sektioner (Microsoft.AspNetCore.Components.Sections):

@using Microsoft.AspNetCore.Components.Sections

Skapa följande interaktiva omslutningskomponent i Pages mappen.

Pages/InteractiveWrapper.razor:

@rendermode InteractiveServer

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

@ChildContent

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

Komponenten Counter kan använda omslutningskomponenten och ange interaktivt avsnittsinnehåll. I följande exempel placeras en räknare i avsnittet.

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

Andra komponenter runt appen kan också omsluta innehåll i komponenten InteractiveWrapper och ange interaktivt avsnittsinnehåll.

Använd en layout

Gör layoutens namnområde tillgängligt

Layoutfilplatser och namnområden har ändrats över tid för Blazor ramverket. Beroende på vilken version av Blazor och typ av Blazor app som du skapar kan du behöva ange layoutens namnområde när du använder den. När du refererar till en layoutimplementering och layouten inte hittas utan att ange layoutens namnområde kan du använda någon av följande metoder:

  • Lägg till ett @using-direktiv i _Imports.razor-filen för layouternas plats. I följande exempel finns en mapp med layouter med namnet Layout i en Components mapp och appens namnområde är BlazorSample:

    @using BlazorSample.Components.Layout

  • Lägg till ett @using-direktiv överst i komponentdefinitionen där layouten används:

    @using BlazorSample.Components.Layout
@layout DoctorWhoLayout

  • Ange det fullständiga namnområdet för layouten där det används.

    @layout BlazorSample.Components.Layout.DoctorWhoLayout

Använda en layout för en komponent

Använd @layoutRazor-direktivet för att tillämpa en layout på en dirigerbar Razor komponent som har ett @page direktiv. Kompilatorn konverterar @layout till en LayoutAttribute och tillämpar attributet på komponentklassen.

Innehållet i följande Episodes komponent infogas i DoctorWhoLayout vid positionen för @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>

Följande renderade HTML-kod skapas av den föregående DoctorWhoLayout- och Episodes-komponenten. Extraneous markup visas inte upp för att fokusera på innehållet som tillhandahålls av de två inblandade komponenterna.

  • Rubriken H1 "database" (<h1>...</h1>) i rubriken (<header>...</header>), navigeringsfältet (<nav>...</nav>) och varumärkesinformationen i sidfoten (<footer>...</footer>) kommer från komponenten DoctorWhoLayout.
  • H2 -rubriken (<h2>...</h2>) och avsnittslistan (<ul>...</ul>) kommer från Episodes komponenten.
<header>
    <h1 ...>...</h1>
</header>

<nav>
    ...
</nav>

<h2>...</h2>

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

<footer>
    ...
</footer>

Om du anger layouten direkt i en komponent åsidosätts en standardlayout:

Tillämpa en layout på en mapp med komponenter

Varje mapp i en app kan eventuellt innehålla en mallfil med namnet _Imports.razor. Kompilatorn innehåller de direktiv som anges i importfilen i alla Razor mallar i samma mapp och rekursivt i alla dess undermappar. Därför säkerställer en _Imports.razor fil som innehåller @layout DoctorWhoLayout att alla komponenter i en mapp använder komponenten DoctorWhoLayout. Du behöver inte lägga till @layout DoctorWhoLayout till alla Razor komponenter (.razor) i mappen och undermapparna upprepade gånger.

_Imports.razor:

@layout DoctorWhoLayout
...

Filen _Imports.razor liknar filen _ViewImports.cshtml för Razor vyer och sidor men används specifikt för Razor komponentfiler.

Om du anger en layout i _Imports.razor åsidosätts en layout som anges som routerns standardapplayout, vilket beskrivs i följande avsnitt.

Varning

Lägg inte till ett Razor@layout-direktiv i rotfilen _Imports.razor, vilket resulterar i en oändlig loop med layouter. Om du vill styra standardapplayouten anger du layouten i komponenten Router. För mer information, se avsnittet Tillämpa en standardlayout på en app.

Samma villkor resulterar när du använder en _Imports.razor-fil för att tillämpa en layout på en mapp med komponenter med @layout-direktivet och själva layoutkomponenten finns i samma mapp- eller mapphierarki för _Imports.razor-filen. En oändlig loop för att tillämpa layouten beror på att @layout-direktivet också tillämpas på layoutkomponenten. För att undvika rekursionsproblem rekommenderar vi att du lagrar layoutkomponenter i deras egen mapp (till exempel Layouts), bort från där _Imports.razor filer använder dem.

Anteckning

@layout Razor-direktivet tillämpar endast en layout på dirigerbara Razor komponenter med ett @page direktiv.

Tillämpa en standardlayout på en app

Ange standardapplayouten i Router komponentens RouteView komponent. Använd parametern DefaultLayout för att ange layouttypen:

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

I föregående exempel är platshållaren {LAYOUT} layouten (till exempel DoctorWhoLayout om layoutfilens namn är DoctorWhoLayout.razor). Du kan behöva identifiera layoutens namnområde beroende på .NET-versionen och typen av Blazor app. Mer information finns i avsnittet Gör layoutnamnområdet tillgängligt.

Att ange layouten som standardlayout i Router komponentens RouteView är en användbar metod eftersom du kan åsidosätta layouten per komponent eller per mapp enligt beskrivningen i föregående avsnitt i den här artikeln. Vi rekommenderar att du använder komponenten Router för att ange appens standardlayout eftersom det är den mest allmänna och flexibla metoden för att använda layouter.

Använd en layout för godtyckligt innehåll (LayoutView-komponent)

Om du vill ange en layout för godtyckligt Razor mallinnehåll anger du layouten med en LayoutView komponent. Du kan använda en LayoutView i en komponent av typen Razor. I följande exempel anges en layoutkomponent med namnet ErrorLayout för komponenten som innehåller följande Razor markering.

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

Du kan behöva identifiera layoutens namnområde beroende på .NET-versionen och typen av Blazor app. Mer information finns i avsnittet Gör layoutnamnområdet tillgängligt.

Anteckning

Med versionen av .NET 5.0.1 och för ytterligare 5.x-versioner innehåller komponenten Router parametern PreferExactMatches inställd på @true. Mer information finns i Migrera från ASP.NET Core 3.1 till .NET 5.

Kapslad layout

En komponent kan referera till en layout som i sin tur refererar till en annan layout. Kapslade layouter används till exempel för att skapa en menystruktur på flera nivåer.

I följande exempel visas hur du använder kapslade layouter. Den Episodes komponent som visas i avsnittet Tillämpa en layout på en komponent är komponenten som ska visas. Komponenten refererar till komponenten DoctorWhoLayout.

Följande DoctorWhoLayout komponent är en modifierad version av exemplet som visades tidigare i den här artikeln. Elementen sidhuvud och sidfot tas bort och layouten refererar till en annan layout, ProductionsLayout. Komponenten Episodes återges där @Body visas i 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/";
}

Komponenten ProductionsLayout innehåller layoutelementen på den översta nivån, där elementen header (<header>...</header>) och footer (<footer>...</footer>) nu finns. DoctorWhoLayout med komponenten Episodes återges där @Body visas.

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>

Följande renderade HTML-kod skapas av den föregående kapslade layouten. För att fokusera på det kapslade innehållet som tillhandahålls av de tre komponenterna, förekommer inte överflödig markup.

  • Huvudelementen (<header>...</header>), produktionsnavigeringsfältet (<nav>...</nav>) och sidfoten (<footer>...</footer>) och deras innehåll kommer från komponenten ProductionsLayout.
  • H1-rubriken (<h1>...</h1>), avsnittsnavigeringsfältet (<nav>...</nav>) och varumärkesinformation (<div>...</div>) kommer från komponenten DoctorWhoLayout.
  • H2 -rubriken (<h2>...</h2>) och avsnittslistan (<ul>...</ul>) kommer från Episodes komponenten.
<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>

Dela en Razor Pages-layout med integrerade komponenter

När routningsbara komponenter integreras i en Razor Pages-app kan appens delade layout användas med komponenterna. Mer information finns i Integrera ASP.NET Core Razor-komponenter med MVC eller Razor Pages.

Sektioner

Information om hur du styr innehållet i en layout från en underordnad Razor-komponent finns i avsnitten ASP.NET Core Blazor.

Ytterligare resurser