Dela via

Styra <head> innehåll i ASP.NET Core-appar Blazor

Anmärkning

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

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i supportpolicyn för .NET och .NET Core. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Razor komponenter kan ändra HTML-elementinnehållet <head> på en sida, inklusive att ange sidans rubrik (<title> element) och ändra metadata (<meta> element).

Kontrollera <head> innehåll i en Razor komponent

Ange sidans rubrik med komponenten PageTitle , vilket gör det möjligt att återge ett HTML-element <title> till en HeadOutlet komponent.

Ange <head> elementinnehåll med komponenten HeadContent , som tillhandahåller innehåll till en HeadOutlet komponent.

I följande exempel anges sidans rubrik och beskrivning med hjälp av Razor.

ControlHeadContent.razor:

@page "/control-head-content"

<PageTitle>@title</PageTitle>

<h1>Control <head> Content Example</h1>

<p>
    Title: @title
</p>

<p>
    Description: @description
</p>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

@code {
    private string description = "This description is set by the component.";
    private string title = "Control <head> Content";
}

@page "/control-head-content"

<PageTitle>@title</PageTitle>

<h1>Control <head> Content Example</h1>

<p>
    Title: @title
</p>

<p>
    Description: @description
</p>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

@code {
    private string description = "This description is set by the component.";
    private string title = "Control <head> Content";
}

@page "/control-head-content"

<h1>Control <head> content</h1>

<p>
    Title: @title
</p>

<p>
    Description: @description
</p>

<PageTitle>@title</PageTitle>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

@code {
    private string description = "Description set by component";
    private string title = "Title set by component";
}

@page "/control-head-content"

<h1>Control <head> content</h1>

<p>
    Title: @title
</p>

<p>
    Description: @description
</p>

<PageTitle>@title</PageTitle>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

@code {
    private string description = "Description set by component";
    private string title = "Title set by component";
}

Kontrollera <head> innehåll under förberendering

Det här avsnittet gäller för förinstallerade Blazor WebAssembly appar och Blazor Server appar.

När Razor-komponenterna är förberenderade krävs användning av en layoutsida (_Layout.cshtml) för att styra <head>-innehållet med PageTitle och HeadContent-komponenterna. Orsaken till det här kravet är att komponenter som styr <head> innehållet måste återges före layouten med komponenten HeadOutlet . Den här renderingsordningen krävs för att styra huvudinnehållet.

Om den delade _Layout.cshtml filen inte har någon komponenttagghjälp för en HeadOutlet komponent lägger du till den i elementen <head> .

I en obligatorisk, delad _Layout.cshtml fil för en Blazor Server app eller Razor Pages/MVC-app som bäddar in komponenter i sidor eller vyer:

<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

I en obligatorisk, delad _Layout.cshtml fil för en förrenderad värdbaserad applikation:

<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

Ange en sidrubrik för komponenter via en layout

Ange sidrubriken i en layoutkomponent:

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

<div class="page">
    ...  
</div>

HeadOutlet komponent

Komponenten HeadOutlet återger innehåll som tillhandahålls av PageTitle och HeadContent komponenter.

I en Blazor Web App som skapats från projektmallen renderar komponenten HeadOutlet innehåll i App.razor:

<head>
    ...
    <HeadOutlet />
</head>

I Blazor Server appar som skapats från projektmallen Blazor Server renderar en <head> innehåll för komponenten HeadOutlet i Pages/_Host.cshtml:

<head>
    ...
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

I Blazor Server appar som skapats från projektmallen Blazor Server renderar en <head> innehåll för komponenten HeadOutlet i Pages/_Layout.cshtml:

<head>
    ...
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

I en app som skapats från projektmallen Blazor WebAssembly läggs komponenten HeadOutlet till i samlingen RootComponents av WebAssemblyHostBuilder i klientsidans Program-fil:

builder.RootComponents.Add<HeadOutlet>("head::after");

När pseudoväljaren::after har angetts läggs innehållet i rotkomponenten till i det befintliga huvudinnehållet i stället för att innehållet ersätts. På så sätt kan appen behålla statiskt huvudinnehåll i wwwroot/index.html utan att behöva upprepa innehållet i appens Razor komponenter.

Ställ in en standardsidrubrik i en Blazor Web App

Ange sidrubriken i komponenten App (App.razor):

<head>
    ...
    <HeadOutlet />
    <PageTitle>Page Title</PageTitle>
</head>

Sidrubriken hittades inte i en Blazor WebAssembly app

I appar som skapats från projektmallen Fristående app Blazor, anger komponentmallen Blazor WebAssembly i komponenten NotFound (App) sidrubriken till App.razor.

I Blazor appar som skapats från en Blazor projektmall NotFound anger komponentmallen i komponenten App (App.razor) sidrubriken till Not found.

App.razor:

<NotFound>
    <PageTitle>Not found</PageTitle>
    ...
</NotFound>

Ytterligare resurser

Dokumentation om Mozilla MDN Web Docs:

  • Last updated on