Control del contenido <head> en aplicaciones Blazor de ASP.NET Core

  • Artículo

Nota

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión .NET 8 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulte la versión .NET 8 de este artículo.

Los componentes Razor pueden modificar el contenido del elemento HTML <head> de una página, incluido el establecimiento del título de la página (elemento <title>) y la modificación de metadatos (elementos <meta>).

Control del contenido <head> de un componente Razor

Especifique el título de la página con el componente PageTitle, que permite representar un elemento <title> HTML en un HeadOutlet componente .

Especifique el contenido del elemento <head> con el componente HeadContent, que proporciona contenido a un HeadOutlet componente.

En el ejemplo siguiente se establece el título y la descripción mediante 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";
}

Control del contenido <head> durante la representación previa

Esta sección se aplica a aplicaciones Blazor WebAssembly previamente representadas y a aplicaciones Blazor Server.

Cuando los componentes Razor se representan previamente, se requiere el uso de una página de diseño (_Layout.cshtml) para controlar el contenido <head> con los componentes PageTitle y HeadContent. El motivo de este requisito es que los componentes que controlan el contenido <head> deben representarse antes del diseño con el componente HeadOutlet. Este orden de representación es necesario para controlar el contenido principal.

Si el archivo _Layout.cshtml compartido no tiene un asistente de etiquetas de componente para un componente HeadOutlet, debe agregarlo a los elementos <head>.

En un archivo _Layout.cshtml compartido necesario de una aplicación Blazor Server o una aplicación Razor Pages/MVC que inserta componentes en páginas o vistas:

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

En un archivo _Layout.cshtml compartido necesario de una aplicación Blazor WebAssembly hospedada previamente representada:

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

Establecer un título de página para los componentes a través de un diseño

Establezca el título de página en un componente de diseño:

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

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

Componente de HeadOutlet

El componente HeadOutlet representa el contenido proporcionado por los componentes PageTitle y HeadContent.

En una aplicación web de Blazor creada a partir de la plantilla del proyecto, el componente HeadOutlet en App.razor representa el contenido de <head>:

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

En las aplicaciones Blazor Server creadas a partir de la plantilla de proyecto Blazor Server, un asistente de etiquetas de componente representa el contenido <head> del componente HeadOutlet en Pages/_Host.cshtml:

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

En las aplicaciones Blazor Server creadas a partir de la plantilla de proyecto Blazor Server, un asistente de etiquetas de componente representa el contenido <head> del componente HeadOutlet en Pages/_Layout.cshtml:

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

En una aplicación creada a partir de la plantilla de proyecto Blazor WebAssembly, el componente HeadOutlet se agrega a la colección RootComponents del WebAssemblyHostBuilder en el archivo del lado cliente Program:

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

Cuando se especifica el pseudo selector ::after, el contenido del componente raíz se anexa al contenido principal existente en lugar de reemplazar el contenido. Esto permite que la aplicación conserve el contenido principal estático en wwwroot/index.html sin tener que repetir el contenido en los componentes Razor de la aplicación.

Establecer un título de página predeterminado en una aplicación web Blazor

Establecer el título de página en el componente App (App.razor):

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

Título de página no encontrado en una aplicación Blazor WebAssembly

En las aplicaciones de Blazor creadas a partir de la Blazor WebAssembly plantilla de proyecto de aplicación independiente, la plantilla de componente NotFound en el componente App (App.razor) establece el título de la página en Not found.

En las aplicaciones Blazor creadas a partir de una plantilla de proyecto Blazor, la plantilla de componente NotFound del componente App (App.razor) establece el título de la página en Not found.

App.razor:

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

Recursos adicionales

Documentación MDN Web Docs de Mozilla: