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

  • Articolo

Nota

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

Importante

Queste informazioni si riferiscono a un prodotto non definitive che può essere modificato in modo sostanziale prima che venga rilasciato commercialmente. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Per la versione corrente, vedere la versione .NET 8 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).

Controllare il <head> contenuto in un Razor componente

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

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"

<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 <head> contenuto durante la pre-distribuzione

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

Quando Razor i componenti vengono prerisorsi, l'uso di una pagina di layout (_Layout.cshtml) è necessario per controllare <head> il contenuto con i PageTitle componenti 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 helper tag componente per un HeadOutlet componente, aggiungerlo agli <head> elementi.

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

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

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

<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>

Componente HeadOutlet

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

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

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

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

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

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

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

In un'app creata dal modello di Blazor WebAssembly progetto, il HeadOutlet componente viene aggiunto alla RootComponents raccolta di WebAssemblyHostBuilder nel file sul lato Program 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'app Blazor Web

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>

Risorse aggiuntive

Documentazione Web di Mozilla MDN: