Contrôlez le contenu <head> dans les applications ASP.NET Core Blazor

  • Article

Remarque

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 8 de cet article.

Important

Ces informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Pour la version actuelle, consultez la version .NET 8 de cet article.

Les composants Razor peuvent modifier le contenu de l’élément HTML <head> d’une page, notamment la définition du titre de la page (élément <title>) et la modification des métadonnées (éléments <meta>).

Contrôlez le contenu <head> d’un composant Razor

Spécifiez le titre de la page avec le composant PageTitle, ce qui permet de rendre un élément HTML <title> dans un HeadOutlet composant.

Spécifiez le contenu d’élément <head> avec le composant HeadContent, qui fournit du contenu à un HeadOutlet composant.

L’exemple suivant définit le titre et la description de la page à l’aide de 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"

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

Contrôlez le contenu <head> pendant le pré-rendu

Cette section s’applique aux applications Blazor WebAssembly pré-rendues et aux applications Blazor Server.

Lorsque les composants Razor sont pré-rendus, l’utilisation d’une page de disposition (_Layout.cshtml) est nécessaire pour contrôler le contenu <head> avec les composants PageTitle et HeadContent. La raison de cette exigence est que les composants qui contrôlent le contenu <head> doivent être rendus avant la disposition avec le composant HeadOutlet. Cet ordre de rendu est nécessaire pour contrôler le contenu de l’en-tête.

Si le fichier partagé _Layout.cshtml n’a pas d’Assistant de balise de composant pour un composant HeadOutlet, ajoutez-le aux éléments <head>.

Dans un fichier partagé obligatoire _Layout.cshtml d’une application Blazor Server ou d’une application Pages/MVC Razor qui incorpore des composants dans des pages ou des vues :

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

Dans un fichier partagé obligatoire _Layout.cshtml d’une application hébergée Blazor WebAssembly pré-rendue :

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

Définir un titre de page pour des composants via une disposition

Définissez le titre de page dans un composant de disposition :

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

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

HeadOutlet (composant)

Le composant HeadOutlet affiche le contenu fourni par les composants PageTitle et HeadContent.

Dans une application web Blazor créée à partir du modèle de projet, le composant HeadOutlet dans App.razor affiche le contenu <head> :

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

Dans les applications Blazor Server créées à partir du modèle de projet Blazor Server, un Assistant de balise de composant affiche le contenu <head> du composant HeadOutlet dans Pages/_Host.cshtml :

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

Dans les applications Blazor Server créées à partir du modèle de projet Blazor Server, un Assistant de balise de composant affiche le contenu <head> du composant HeadOutlet dans Pages/_Layout.cshtml :

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

Dans une application créée à partir du modèle de projet Blazor WebAssembly, le composant HeadOutlet est ajouté à la collection RootComponents de WebAssemblyHostBuilder dans le Program côté client :

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

Lorsque le ::after pseudo-sélecteur est spécifié, le contenu du composant racine est ajouté au contenu de l’en-tête existant au lieu de remplacer le contenu. Cela permet à l’application de conserver le contenu de l’en-tête statique dans wwwroot/index.html sans avoir à répéter le contenu dans les composants Razor de l’application.

Définir un titre de page par défaut dans une application web Blazor

Définissez le titre de page dans le composant App (App.razor) :

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

Titre de page non trouvé dans une application Blazor WebAssembly

Dans les applications Blazor créées à partir d’un modèle de projet Application autonome Blazor WebAssembly, le modèle de composant NotFound dans le composant App (App.razor) définit le titre de la page sur Not found.

Dans les applications Blazor créées à partir d’un modèle de projet Blazor, le modèle de composant NotFound dans le composant App (App.razor) définit le titre de la page sur Not found.

App.razor:

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

Ressources supplémentaires

Documentation de Mozilla MDN Web Docs :