ASP.NET Core-indelingen Blazor

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 deze problemen oplossen.

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

Indelingsonderdelen

Een indelingsonderdeel maken

Een indelingsonderdeel 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 ASP.NET Core Razor-onderdelenvoor meer informatie over RenderFragment.

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

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 (MDN documentation) (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):

• Blazor Web App MainLayout.razor.css
• Blazor WebAssembly MainLayout.razor.css

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 Switch-vertakkingen of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

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>

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>

Als u de indeling rechtstreeks in een onderdeel opgeeft, wordt een standaardindelingoverschreven:

• Ingesteld door een @layout-instructie die is geïmporteerd uit een _Imports.razor-bestand, zoals beschreven in de volgende Een indeling toepassen op een map met onderdelen sectie.
• Instellen als de standaardindeling van de app, zoals beschreven in de Een standaardindeling toepassen op een app sectie verderop in dit artikel.

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.

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 RouteView-component van de Router-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 DoctorWhoLayout.razoris, dan is het DoctorWhoLayout. Mogelijk moet u de naamruimte van de indeling aanpassen, afhankelijk van de .NET-versie en het type Blazor-app. Voor meer informatie, zie de sectie De indelingsnaamruimte beschikbaar maken.

Het opgeven van de indeling als een standaardindeling in de RouteView van het Router 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 met de naam ErrorLayout voor de NotFound sjabloon van het MainLayout-onderdeel (<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>

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

Belangrijk

Blazor Web Appgebruikt niet de parameter NotFound (<NotFound>...</NotFound> markup), maar de parameter wordt ondersteund voor terugwaartse compatibiliteit om te voorkomen dat wijzigingen fouten in het framework veroorzaken. De serverzijde ASP.NET Core middleware-pijplijn verwerkt aanvragen op de server. Gebruik technieken aan de serverzijde om onjuiste aanvragen af te handelen. Zie ASP.NET Core Blazor rendermodivoor 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 indelingen 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";
}

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>

De volgende weergegeven HTML-opmaak wordt geproduceerd 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 ASP.NET Core Blazor sectiesals u de inhoud in een indeling van een onderliggend Razor onderdeel wilt beheren.

Aanvullende informatiebronnen

• Indeling in ASP.NET Core
• Blazor GitHub-opslagplaats (dotnet/blazor-samples) (hoe te downloaden)