Controllare il <head> contenuto nelle app ASP.NET Core Blazor

Nota

Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 10 di questo articolo.

Avviso

Questa versione di ASP.NET Core non è più supportata. Per altre informazioni, vedere i criteri di supporto di .NET e .NET Core. Per la versione corrente, vedere la versione .NET 10 di questo articolo.

Razor i componenti possono modificare il contenuto dell'elemento HTML <head> di una pagina, inclusa l'impostazione del titolo della pagina (<title> elemento) e la modifica dei metadati (<meta> elementi).

Controlla il contenuto <head> in un componente Razor

Specificare il titolo della pagina con il componente PageTitle, che consente di eseguire il rendering di un elemento HTML <title> in un componente HeadOutlet.

Specificare <head> il contenuto dell'elemento con il HeadContent componente, che fornisce contenuto a un HeadOutlet componente.

Nell'esempio seguente viene impostato il titolo e la descrizione della pagina usando 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";
}

Controllare il contenuto <head> durante il pre-rendering

Questa sezione si applica alle app Blazor WebAssembly e alle app Blazor Server prerenderizzate.

Quando i componenti Razor vengono prerenderizzati, l'uso di una pagina di layout (_Layout.cshtml) è necessario per controllare il contenuto di <head> con i componenti PageTitle e HeadContent. Il motivo di questo requisito è che è necessario eseguire il rendering dei componenti che controllano <head> il contenuto prima del layout con il HeadOutlet componente. Questo ordine di rendering è necessario per controllare il contenuto head.

Se il file condiviso _Layout.cshtml non dispone di un Component Tag Helper per il componente HeadOutlet, aggiungilo agli elementi <head>.

In un file obbligatorio, condiviso di un'app _Layout.cshtml o Blazor Server Pages/MVC che incorpora componenti in pagine o visualizzazioni:

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

In un file condiviso obbligatorio di un'app ospitata prerenderizzata _Layout.cshtml :

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

Impostare un titolo di pagina per i componenti tramite un layout

Impostare il titolo della pagina in un componente di layout:

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

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

HeadOutlet componente

Il componente HeadOutlet esegue il rendering del contenuto fornito dai componenti PageTitle e HeadContent.

In un Blazor Web App creato dal modello di progetto, il componente HeadOutlet in App.razor esegue il rendering del contenuto <head>:

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

Nelle Blazor Server app create dal modello di progetto Blazor Server, un Tag Helper del componente esegue il rendering del contenuto <head> per il componente HeadOutlet in Pages/_Host.cshtml:

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

Nelle Blazor Server app create dal modello di progetto Blazor Server, un tag helper del componente esegue il rendering del contenuto <head> per il componente HeadOutlet in Pages/_Layout.cshtml:

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

In un'app creata dal modello di progetto Blazor WebAssembly, il componente HeadOutlet viene aggiunto alla raccolta RootComponents di WebAssemblyHostBuilder nel file Program lato client:

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

Quando si specifica lo ::after pseudo-selettore , il contenuto del componente radice viene aggiunto al contenuto head esistente anziché sostituire il contenuto. In questo modo l'app può mantenere il contenuto head statico in wwwroot/index.html senza dover ripetere il contenuto nei componenti dell'app Razor .

Impostare un titolo di pagina predefinito in un Blazor Web App

Impostare il titolo della pagina nel App componente (App.razor):

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

Titolo pagina non trovato in un'app Blazor WebAssembly

Nelle Blazor app create dal Blazor WebAssembly modello di progetto App autonoma il NotFound modello di componente nel App componente (App.razor) imposta il titolo della pagina su Not found.

Nelle Blazor app create da un Blazor modello di progetto, il NotFound modello di componente nel App componente (App.razor) imposta il titolo della pagina su Not found.

App.razor:

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

Contenuti correlati

Documentazione Mozilla MDN Web Docs:

  • Ultimo aggiornamento: