Delen via

ASP.NET Core-indelingen Blazor

Notitie

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

In dit artikel wordt uitgelegd hoe u herbruikbare indelingsonderdelen maakt voor Blazor-apps.

Nut van Blazor indelingen

Sommige app-elementen, zoals menu's, copyrightberichten en bedrijfslogo's, maken meestal deel uit van de algehele presentatie van de app. Het plaatsen van een kopie van de markeringen voor deze elementen in alle onderdelen van een app is niet efficiënt. Telkens wanneer een van deze elementen wordt bijgewerkt, moet elk onderdeel dat het element gebruikt, worden bijgewerkt. Deze methode is kostbaar om te onderhouden en kan leiden tot inconsistente inhoud als een update wordt gemist. Indelingen lossen deze problemen op.

Een Blazor-indeling is een Razor-onderdeel dat markeringen deelt met onderdelen waarnaar wordt verwezen. Indelingen kunnen gegevensbinding gebruiken, afhankelijkheidsinjectieen andere functies van componenten.

Een indelingsonderdeel maken

Een layoutcomponent maken:

  • Maak een Razor-onderdeel dat is gedefinieerd door een Razor-sjabloon of C#-code. Indelingsonderdelen op basis van een Razor sjabloon gebruiken de bestandsextensie .razor net als gewone Razor onderdelen. Omdat indelingsonderdelen worden gedeeld tussen de onderdelen van een app, worden ze meestal in de map Shared of Layout van de app geplaatst. Indelingen kunnen echter op elke locatie worden geplaatst die toegankelijk zijn voor de onderdelen die deze gebruiken. Een indeling kan bijvoorbeeld in dezelfde map worden geplaatst als de onderdelen die deze gebruiken.
  • Het onderdeel overnemen van LayoutComponentBase. Voor de gerenderde inhoud binnen de lay-out definieert LayoutComponentBase een Body-eigenschap (typeRenderFragment).
  • Gebruik de Razor syntaxis @Body om de locatie op te geven in de indelingsmarkeringen waar de inhoud wordt weergegeven.

Notitie

Zie RenderFragmentvoor meer informatie over Razor.

In het volgende DoctorWhoLayout-onderdeel ziet u de Razor-sjabloon van een indelingselement. De indeling neemt LayoutComponentBase over en stelt de @Body in tussen de navigatiebalk (<nav>...</nav>) en de voettekst (<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 onderdeel

In een app die is gemaakt op basis van een Blazor projectsjabloon, is het MainLayout onderdeel de standaardindeling van de app. Blazorgebruikt de indeling van Flexbox layout model (volgens deW3C-specificatie).

Blazorcss-isolatiefunctie geïsoleerde CSS-stijlen toepast op het MainLayout-onderdeel. Conform de conventie worden de stijlen geleverd door de bijbehorende stylesheet met dezelfde naam, MainLayout.razor.css. De ASP.NET Core-frameworkimplementatie van het opmaakmodel is beschikbaar voor inspectie in de ASP.NET Core-referentiebron (dotnet/aspnetcore GitHub-opslagplaats):

Notitie

Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Schakel tussen vertakkingen of tags keuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

Blazorcss-isolatiefunctie geïsoleerde CSS-stijlen toepast op het MainLayout-onderdeel. Conform de conventie worden de stijlen geleverd door de bijbehorende stylesheet met dezelfde naam, MainLayout.razor.css.

Statisch gegenereerde layout componenten

Wanneer een Blazor Web App weergave per pagina/onderdeel wordt gebruikt (het Routes onderdeel geeft geen interactieve rendermodus op), worden indelingsonderdelen statisch weergegeven op de server. Het rechtstreeks toepassen van een interactieve weergavemodus op een indeling wordt niet ondersteund omdat Blazor het serialiseren van een RenderFragment (@Body in dit geval) als een hoofdonderdeelparameter niet wordt ondersteund. Bijvoorbeeld, als u @rendermode InteractiveServer bovenaan het MainLayout onderdeel plaatst, resulteert dit in de volgende runtime-uitzondering:

System.InvalidOperationException: kan de parameter Body niet doorgeven aan onderdeel 'MainLayout' met rendermode 'InteractiveServerRenderMode'. Dit komt doordat de parameter van het gemachtigde type 'Microsoft.AspNetCore.Components.RenderFragment' is, wat willekeurige code is en niet kan worden geserialiseerd.

Dit is van toepassing op alle indelingsonderdelen die overnemen van LayoutComponentBase in een app die de rendering per pagina/onderdeel overneemt.

Dit scenario kan worden opgelost in een toekomstige release van Blazor. Zie [Blazor] Ondersteuning voor het serialiseren van renderfragmenten van SSR (dotnet/aspnetcore #52768) voor meer informatie. In de tussentijd kunt u de volgende aanpak gebruiken in een Blazor Web App methode die gebruikmaakt van rendering per pagina/onderdeel.

Maak een wrapperonderdeel dat geschikt is voor interactiviteit. In het volgende voorbeeld bevat een wrapperonderdeel een Blazor sectie die inhoud van een onderliggend onderdeel kan ontvangen.

Voeg in het _Imports.razor bestand een @using instructie toe voor secties (Microsoft.AspNetCore.Components.Sections):

@using Microsoft.AspNetCore.Components.Sections

Maak het volgende interactieve wrapperonderdeel in de Pages map.

Pages/InteractiveWrapper.razor:

@rendermode InteractiveServer

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

@ChildContent

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

Het Counter onderdeel kan het wrapper-onderdeel gebruiken en interactieve sectie-inhoud instellen. In het volgende voorbeeld wordt een tellerknop in de sectie geplaatst.

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

Andere onderdelen rondom de app kunnen ook inhoud in het InteractiveWrapper onderdeel verpakken en interactieve sectie-inhoud instellen.

Een indeling toepassen

De indelingsnaamruimte beschikbaar maken

Locaties van indelingsbestanden en naamruimten zijn met de tijd veranderd voor het Blazor-raamwerk. Afhankelijk van de versie van Blazor en het type Blazor-app dat u bouwt, moet u mogelijk de naamruimte van de indeling aangeven wanneer u deze gebruikt. Als u verwijst naar een implementatie van de indeling en de indeling niet wordt gevonden zonder de naamruimte van de indeling aan te geven, moet u een van de volgende benaderingen volgen:

  • Voeg een @using-instructie toe aan het _Imports.razor-bestand voor de locatie van de indelingen. In het volgende voorbeeld bevindt een map met indelingen met de naam Layout zich in een Components map en de naamruimte van de app is BlazorSample:

    @using BlazorSample.Components.Layout

  • Voeg boven aan de componentdefinitie een @using-instructie toe waarin de indeling wordt gebruikt:

    @using BlazorSample.Components.Layout
@layout DoctorWhoLayout

  • Zorg ervoor dat de naamruimte van de indeling volledig wordt gespecificeerd waar deze wordt gebruikt.

    @layout BlazorSample.Components.Layout.DoctorWhoLayout

Een indeling toepassen op een onderdeel

Gebruik de @layoutRazor richtlijn om een indeling toe te passen op een routeerbaar Razor onderdeel met een @page richtlijn. De compiler converteert @layout naar een LayoutAttribute en past het kenmerk toe op de onderdeelklasse.

De inhoud van het volgende Episodes onderdeel wordt ingevoegd in de DoctorWhoLayout op de positie van @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>

De volgende weergegeven HTML-markeringen worden geproduceerd door het voorgaande DoctorWhoLayout en Episodes onderdeel. Overbodige markeringen worden niet weergegeven om zich te richten op de inhoud van de twee betrokken onderdelen:

  • De H1-kop (<h1>...</h1>) in de koptekst (<header>...</header>), navigatiebalk (<nav>...</nav>) en merkgegevens in de voettekst (<footer>...</footer>) zijn afkomstig uit het DoctorWhoLayout onderdeel.
  • De H2 "afleveringen" kop (<h2>...</h2>) en afleveringslijst (<ul>...</ul>) komen van het Episodes onderdeel.
<header>
    <h1 ...>...</h1>
</header>

<nav>
    ...
</nav>

<h2>...</h2>

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

<footer>
    ...
</footer>

Het specificeren van de indeling direct in een component overschrijft een standaardindeling:

Een indeling toepassen op een map met onderdelen

Elke map van een app kan eventueel een sjabloonbestand met de naam _Imports.razorbevatten. De compiler bevat de instructies die zijn opgegeven in het importbestand in alle Razor sjablonen in dezelfde map en recursief in alle submappen. Daarom zorgt een _Imports.razor-bestand met @layout DoctorWhoLayout ervoor dat alle onderdelen in een map gebruikmaken van het DoctorWhoLayout-onderdeel. U hoeft @layout DoctorWhoLayout niet herhaaldelijk toe te voegen aan alle Razor onderdelen (.razor) in de map en submappen.

_Imports.razor:

@layout DoctorWhoLayout
...

Het bestand _Imports.razor is vergelijkbaar met het bestand _ViewImports.cshtml voor Razor weergaven en pagina's, maar specifiek toegepast op Razor onderdeelbestanden.

Indien u een indeling in _Imports.razor specificeert, wordt daarmee een indeling die als de standaardindeling voor de appvan de router is ingesteld, overschreven. Dit wordt in de volgende sectie toegelicht.

Waarschuwing

Voeg geen Razor@layout instructie toe aan het hoofdbestand _Imports.razor, wat resulteert in een oneindige lus van indelingen. Als u de standaard-app-indeling wilt beheren, geeft u de indeling op in het Router onderdeel. Raadpleeg de volgende sectie Een standaardindeling toepassen op een app voor meer informatie.

Dezelfde voorwaarde resulteert in het gebruik van een _Imports.razor-bestand om een indeling toe te passen op een map met onderdelen met de @layout instructie en het indelingsonderdeel zelf bevindt zich in dezelfde map- of maphiërarchie van het _Imports.razor bestand. Een oneindige lus van het toepassen van de indeling vindt plaats omdat de @layout instructie ook wordt toegepast op het indelingsonderdeel. Om problemen met recursie te voorkomen, raden we u aan om indelingsonderdelen op te slaan in hun eigen map (bijvoorbeeld Layouts), weg van waar _Imports.razor bestanden deze toepassen.

Notitie

De @layoutRazor richtlijn past alleen een indeling toe op routeerbare Razor onderdelen met een @page richtlijn.

Een standaardindeling toepassen op een app

Geef de standaardapp-indeling op in de Router-component van de RouteView-component. Gebruik de parameter DefaultLayout om het indelingstype in te stellen:

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

In het voorgaande voorbeeld is de tijdelijke aanduiding {LAYOUT} de indeling; bijvoorbeeld, als de bestandsnaam van de indeling DoctorWhoLayoutis, dan is het DoctorWhoLayout.razor. Mogelijk moet u de naamruimte van de indeling identificeren, afhankelijk van de .NET-versie en het type app Blazor . Voor meer informatie, zie de sectie De indelingsnaamruimte beschikbaar maken.

Het opgeven van de indeling als een standaardindeling in de Router van het RouteView onderdeel is handig omdat u de indeling per onderdeel of per map kunt overschrijven, zoals beschreven in de voorgaande secties van dit artikel. U wordt aangeraden het Router-onderdeel te gebruiken om de standaardindeling van de app in te stellen, omdat dit de meest algemene en flexibele benadering is voor het gebruik van indelingen.

Een indeling toepassen op willekeurige inhoud (LayoutView onderdeel)

Als u een indeling wilt instellen voor willekeurige Razor sjablooninhoud, geeft u de indeling op met een LayoutView component. U kunt een LayoutView gebruiken in elk Razor onderdeel. In het volgende voorbeeld wordt een indelingsonderdeel ingesteld dat is benoemd ErrorLayout voor het onderdeel dat de volgende Razor markeringen bevat.

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

Mogelijk moet u de naamruimte van de indeling opgeven, afhankelijk van de .NET-versie en het type Blazor-app. Voor meer informatie, zie de sectie De indelingsnaamruimte beschikbaar maken.

Notitie

Met de release van .NET 5.0.1 en voor eventuele extra releases van 5.x bevat het Router onderdeel de PreferExactMatches parameter die is ingesteld op @true. Zie Migreren van ASP.NET Core 3.1 naar .NET 5 voor meer informatie.

Geneste indelingen

Een onderdeel kan verwijzen naar een indeling die op zijn beurt verwijst naar een andere indeling. Geneste indelingen worden bijvoorbeeld gebruikt om menustructuren met meerdere niveaus te maken.

In het volgende voorbeeld ziet u hoe u geneste lay-outs gebruikt. Het Episodes onderdeel dat wordt weergegeven in de Een indeling toepassen op een onderdeel sectie is het onderdeel dat getoond moet worden. Het onderdeel verwijst naar het DoctorWhoLayout-onderdeel.

Het volgende DoctorWhoLayout onderdeel is een gewijzigde versie van het voorbeeld dat eerder in dit artikel is weergegeven. De kop- en voettekstelementen worden verwijderd en de indeling verwijst naar een andere indeling, ProductionsLayout. Het Episodes onderdeel wordt weergegeven waar @Body wordt weergegeven in de 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/";
}

Het onderdeel ProductionsLayout bevat de indelingselementen op het hoogste niveau, waarin de koptekst- (<header>...</header>) en voettekstelementen (<footer>...</footer>) zich nu bevinden. De DoctorWhoLayout met het Episodes-onderdeel wordt weergegeven waar @Body verschijnt.

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>

De volgende gerenderde HTML-markering wordt gegenereerd door de voorgaande geneste indeling. Overbodige markeringen worden niet weergegeven om zich te richten op de ingesloten inhoud van de drie betreffende componenten.

  • De koptekst (<header>...</header>), de productienavigatiebalk (<nav>...</nav>) en de voettekstelementen (<footer>...</footer>) en hun inhoud zijn afkomstig van het ProductionsLayout-onderdeel.
  • De H1 "database" kop (<h1>...</h1>), afleveringsnavigatiebalk (<nav>...</nav>) en merkinformatie (<div>...</div>) komen van het DoctorWhoLayout onderdeel.
  • De H2 "afleveringen" kop (<h2>...</h2>) en afleveringslijst (<ul>...</ul>) komen van het Episodes onderdeel.
<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>

Deel een Razor lay-out van pagina's met geïntegreerde onderdelen

Wanneer routeerbare onderdelen zijn geïntegreerd in een Razor Pages-app, kan de gedeelde indeling van de app worden gebruikt met de onderdelen. Zie Integreer ASP.NET Core Razor-onderdelen met MVC of Razor Pagesvoor meer informatie.

Secties

Zie Razor voor het beheren van de inhoud in een lay-out vanuit een onderliggend Blazor component, zie ASP.NET Core Blazor-secties.

Aanvullende informatiebronnen