Freigeben über

Steuern des Inhalts von <head> in ASP.NET Core-Blazor-Apps

Hinweis

Dies ist nicht die neueste Version dieses Artikels. Die aktuelle Version finden Sie in der .NET 10-Version dieses Artikels.

Warnung

Diese Version von ASP.NET Core wird nicht mehr unterstützt. Weitere Informationen finden Sie in der .NET- und .NET Core-Supportrichtlinie. Die aktuelle Version finden Sie in der .NET 10-Version dieses Artikels.

Razor-Komponenten können den Inhalt des HTML-Elements <head> einer Seite ändern und so etwa den Titel der Seite (<title>-Element) festlegen und Metadaten (<meta>-Elemente) ändern.

Steuern des Inhalts von <head> in einer Razor-Komponente

Geben Sie den Titel der Seite mit der PageTitle-Komponente an, wodurch ein HTML-<title>-Element in eine HeadOutlet-Komponente gerendert werden kann.

Geben Sie den Inhalt des <head>-Elements mit der HeadContent-Komponente an, die den Inhalt für eine HeadOutlet-Komponente bietet.

Im folgenden Beispiel werden der Titel und die Beschreibung der Seite mithilfe von Razor festgelegt.

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

Steuern des Inhalts von <head> während des Prerenderings

Dieser Abschnitt gilt für vorab gerenderte Blazor WebAssembly- und Blazor Server-Apps.

Wenn Razor-Komponenten vorgerendert werden, ist die Verwendung einer Layoutseite (_Layout.cshtml) erforderlich, um den Inhalt von <head> mit den Komponenten PageTitle und HeadContent zu steuern. Diese Anforderung ergibt sich daraus, dass Komponenten, die den Inhalt von <head> steuern, vor dem Layout mit der Komponente HeadOutlet gerendert werden müssen. Diese Renderingreihenfolge muss eingehalten werden, um den „head“-Inhalt zu steuern.

Wenn die freigegebene _Layout.cshtml-Datei über kein Taghilfsprogramm für Komponenten für eine HeadOutlet-Komponente verfügt, fügen Sie sie den <head>-Elementen hinzu.

In einer erforderlichen, freigegebenen _Layout.cshtml-Datei einer Blazor Server-App oder einer Razor Pages/MVC-App, die Komponenten in Seiten oder Ansichten einbettet:

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

In einer erforderlichen, freigegebenen _Layout.cshtml-Datei einer vorab gerenderten gehosteten Blazor WebAssembly-App:

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

Festlegen eines Seitentitels für Komponenten mithilfe eines Layouts

Festlegen des Seitentitels in einer Layoutkomponente:

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

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

HeadOutlet-Komponente

Die HeadOutlet-Komponente rendert den von den PageTitle- und HeadContent-Komponenten bereitgestellten Inhalt.

In einer Blazor Web App, die auf Grundlage der Projektvorlage erstellt wurde, rendert die HeadOutlet-Komponente in App.razor den Inhalt von <head>:

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

In Blazor Server-Apps, die auf Grundlage der Blazor Server-Projektvorlage erstellt wurde, rendert ein Taghilfsprogramm für Komponenten den Inhalt von <head> für die HeadOutlet-Komponente in Pages/_Host.cshtml:

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

In Blazor Server-Apps, die auf Grundlage der Blazor Server-Projektvorlage erstellt wurde, rendert ein Taghilfsprogramm für Komponenten den Inhalt von <head> für die HeadOutlet-Komponente in Pages/_Layout.cshtml:

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

In einer App, die mit der Projektvorlage Blazor WebAssembly erstellt wurde, wird die Komponente HeadOutlet der Sammlung RootComponents des WebAssemblyHostBuilder in der clientseitigen Datei Program hinzugefügt:

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

Wenn der ::after-Pseudoselektor angegeben wird, wird der Inhalt der Stammkomponente an den vorhandenen Inhalt von „head“ angefügt, statt ihn zu ersetzen. Dadurch kann die App statische Hauptinhalte in wwwroot/index.html beibehalten, ohne den Inhalt in den Razor-Komponenten der App wiederholen zu müssen.

Festlegen eines Standardseitentitels in einer Blazor Web App

Festlegen des Seitentitels in einer App-Komponente (App.razor):

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

Seitentitel „Nicht gefunden“ in einer Blazor WebAssembly-App

In Blazor-Apps, die auf Grundlage der Blazor WebAssembly-Projektvorlage „Eigenständige App“ erstellt wurden, legt die NotFound-Komponentenvorlage in der App-Komponente (App.razor) den Seitentitel auf Not found fest.

In Blazor-Apps, die auf Grundlage einer Blazor-Projektvorlage erstellt wurden, legt die NotFound-Komponentenvorlage in der App-Komponente (App.razor) den Seitentitel auf Not found fest.

App.razor:

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

Zusätzliche Ressourcen

Mozilla MDN-Webdokumentation (in englischer Sprache):

  • Last updated on