ASP.NET Core Blazor layout

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.

Layoutkomponenter

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.

Not

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

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

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

Note

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

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>

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

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

• Anges av ett @layout-direktiv som importerats från en _Imports.razor-fil, enligt beskrivningen i följande avsnitt Tillämpa en layout på en mapp med komponenter.
• Ange som appens standardlayout enligt beskrivningen i avsnittet Tillämpa en standardlayout på en app senare i den här artikeln.

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 ange 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 MainLayout komponentens NotFound-mall (<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>

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.

Viktig

Blazor Web Appanvänder inte parametern NotFound (<NotFound>...</NotFound> markering), men parametern stöds för bakåtkompatibilitet för att undvika en brytande ändring i ramverket. Serversidans mellanprogramspipeline för ASP.NET Core bearbetar begäranden på servern. Använd tekniker på serversidan för att hantera felaktiga begäranden. För mer information, se ASP.NET Core Blazor återgivningslägen.

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

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>

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

• 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

• Layout i ASP.NET Core
• Blazor exempel på GitHub-lagringsplats (dotnet/blazor-samples) (hur du laddar ned)