Controlar o conteúdo <head> em aplicativos Blazor do ASP.NET Core
Observação
Esta não é a versão mais recente deste artigo. Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.
Aviso
Esta versão do ASP.NET Core não tem mais suporte. Para obter mais informações, confira .NET e a Política de Suporte do .NET Core. Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.
Importante
Essas informações relacionam-se ao produto de pré-lançamento, que poderá ser substancialmente modificado antes do lançamento comercial. A Microsoft não oferece nenhuma garantia, explícita ou implícita, quanto às informações fornecidas aqui.
Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.
Os componentes Razor podem modificar o conteúdo do elemento HTML <head> de uma página, incluindo a definição do título da página (elemento <title>) e a modificação de metadados (elementos <meta>).
Controlar o conteúdo <head> em um componente Razor
Especifique o título da página com o componente PageTitle, que permite renderizar um elemento HTML <title> em um HeadOutlet componente.
Especifique o conteúdo do elemento <head> com o componente HeadContent, que fornece conteúdo a um HeadOutlet componente.
O exemplo a seguir define o título e a descrição da página usando o 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"
<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";
}
Controlar o conteúdo <head> durante a pré-geração
Esta seção se aplica a aplicativos pré-gerados Blazor WebAssembly e aplicativos Blazor Server.
Quando os componentes Razor são pré-renderizados, o uso de uma página de layout (_Layout.cshtml) é necessário para controlar o conteúdo <head> com os componentes PageTitle e HeadContent. O motivo para esse requisito é que os componentes que controlam o conteúdo <head> devem ser renderizados antes do layout com o componente HeadOutlet. Essa ordem de renderização é necessária para controlar o conteúdo principal.
Se o arquivo compartilhado _Layout.cshtml não tiver um Auxiliar de Marca de Componente para um componente HeadOutlet, adicione-o aos elementos <head>.
Em um arquivo obrigatório, compartilhado _Layout.cshtml de um aplicativo Blazor Server ou aplicativo Razor Pages/MVC que insira componentes em páginas ou exibições:
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
Em um arquivo obrigatório, compartilhado _Layout.cshtml de um aplicativo Blazor WebAssembly hospedado pré-gerado:
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
Definir um título de página para componentes por meio de um layout
Defina o título da página em um componente de layout:
@inherits LayoutComponentBase
<PageTitle>Page Title</PageTitle>
<div class="page">
...
</div>
componente HeadOutlet
O componente HeadOutlet renderiza o conteúdo fornecido por componentes PageTitle e HeadContent.
Em um Blazor Web App criado a partir do modelo de projeto, o componente HeadOutlet em App.razor renderiza o conteúdo <head>:
<head>
...
<HeadOutlet />
</head>
Em aplicativos Blazor Server criados a partir do modelo de projeto Blazor Server, um Auxiliar de Marca de Componente renderiza o conteúdo <head> do componente HeadOutlet em Pages/_Host.cshtml:
<head>
...
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
Em aplicativos Blazor Server criados a partir do modelo de projeto Blazor Server, um Auxiliar de Marca de Componente renderiza o conteúdo <head> do componente HeadOutlet em Pages/_Layout.cshtml:
<head>
...
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
Em um aplicativo criado a partir do modelo de projeto Blazor WebAssembly, o componente HeadOutlet é adicionado à coleção RootComponents do WebAssemblyHostBuilder no arquivo Program do lado do cliente:
builder.RootComponents.Add<HeadOutlet>("head::after");
Quando o ::after pseudo-seletor é especificado, o conteúdo do componente raiz é acrescentado ao conteúdo principal existente em vez de substituir o conteúdo. Isso permite que o aplicativo mantenha o conteúdo principal estático no wwwroot/index.html sem precisar repetir o conteúdo nos componentes Razor do aplicativo.
Definir um título de página padrão em um Blazor Web App
Definir o título da página no componente App (App.razor):
<head>
...
<HeadOutlet />
<PageTitle>Page Title</PageTitle>
</head>
Título de página não encontrado em um aplicativo Blazor WebAssembly
Nos aplicativos Blazor criados a partir do modelo de projeto de Aplicativo Autônomo Blazor WebAssembly, o modelo de componente NotFound no componente App (App.razor) define o título da página para Not found.
Em aplicativos Blazor criados a partir de um modelo de projeto Blazor, o modelo de componente NotFound no componente App (App.razor) define o título da página como Not found.
App.razor:
<NotFound>
<PageTitle>Not found</PageTitle>
...
</NotFound>
Recursos adicionais
- Cabeçalhos de controle no código C# na inicialização
- Blazor amostras do repositório GitHub (
dotnet/blazor-samples) (como baixar)
Documentação do Mozilla MDN Web Docs:
