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

  • Artikel

Hinweis

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

Warnung

Diese Version von ASP.NET Core wird nicht mehr unterstützt. Weitere Informationen finden Sie in der Supportrichtlinie für .NET und .NET Core. Informationen zum aktuellen Release finden Sie in der .NET 8-Version dieses Artikels.

Wichtig

Diese Informationen beziehen sich auf ein Vorabversionsprodukt, das vor der kommerziellen Freigabe möglicherweise noch wesentlichen Änderungen unterliegt. Microsoft gibt keine Garantie, weder ausdrücklich noch impliziert, hinsichtlich der hier bereitgestellten Informationen.

Die aktuelle Version finden Sie in der .NET 9-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):