Evento
Campionato do Mundo de Power BI DataViz
Feb 14, 4 PM - Mar 31, 4 PM
Con 4 posibilidades de entrar, poderías gañar un paquete de conferencias e facelo ao Live Grand Finale en Las Vegas
Máis informaciónControl del contenido <head> en aplicaciones Blazor de ASP.NET Core
Nota
Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión de .NET 9 de este artículo.
Aviso
Esta versión de ASP.NET Core ya no se admite. Para obtener más información, consulte la directiva de compatibilidad de .NET y .NET Core. Para la versión actual, consulte la versión de .NET 9 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 de .NET 9 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>).
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:
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";
}
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";
}
razor
@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";
}
razor
@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";
}
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:
CSHTML
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
En un archivo _Layout.cshtml compartido necesario de una aplicación Blazor WebAssembly hospedada previamente representada:
CSHTML
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
Establezca el título de página en un componente de diseño:
razor
@inherits LayoutComponentBase
<PageTitle>Page Title</PageTitle>
<div class="page">
...
</div>
El componente HeadOutlet representa el contenido proporcionado por los componentes PageTitle y HeadContent.
En una Blazor Web App creada a partir de la plantilla del proyecto, el componente HeadOutlet en App.razor representa el contenido de <head>:
razor
<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:
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:
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:
C#
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 el título de página en el componente App (App.razor):
razor
<head>
...
<HeadOutlet />
<PageTitle>Page Title</PageTitle>
</head>
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:
razor
<NotFound>
<PageTitle>Not found</PageTitle>
...
</NotFound>
- Encabezados de control en código de C# en el inicio
- Repositorio de GitHub con ejemplos de Blazor (
dotnet/blazor-samples) (cómo descargar)
Documentación MDN Web Docs de Mozilla:
Colaborar con nós en GitHub
A orixe deste contido pódese atopar en GitHub, onde tamén podes crear e revisar problemas e extraer solicitudes. Para obter máis información, consulta a guía para colaboradores.
Comentarios de ASP.NET Core
ASP.NET Core é un proxecto de código aberto. Selecciona unha ligazón para ofrecer comentarios:
Recursos adicionais
Formación
Módulo
Uso de páginas, enrutamiento y diseños para mejorar la navegación de Blazor - Training
Obtenga información sobre cómo optimizar la navegación de la aplicación, usar parámetros de la dirección URL y crear diseños reutilizables en una aplicación web Blazor.