次の方法で共有

ASP.NET Core <head> アプリで Blazor コンテンツを制御する

注意

これは、この記事の最新バージョンではありません。 現在のリリースについては、 この記事の .NET 10 バージョンを参照してください。

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。 詳細については、 .NET および .NET Core サポート ポリシーを参照してください。 現在のリリースについては、 この記事の .NET 10 バージョンを参照してください。

Razor コンポーネントでは、ページのタイトル (<head> 要素) の設定やメタデータ (<title> 要素) の変更など、ページの HTML <meta> 要素のコンテンツを変更できます。

<head> コンポーネントの Razor コンテンツを制御する

HTML PageTitle 要素を <title>にレンダリングする HeadOutlet コンポーネントでページのタイトルを指定します。

コンテンツを <head>に提供する HeadContent コンポーネントで HeadOutlet 要素コンテンツを指定します。

次の例では、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";
}

プリレンダリング中に <head> の内容を制御する

このセクションは、プリレンダリングされる Blazor WebAssembly アプリと Blazor Server アプリに適用されます。

Razor コンポーネントがプリレンダリングされるとき、_Layout.cshtml および <head> コンポーネントで PageTitle の内容を制御するために、レイアウト ページ (HeadContent) を使う必要があります。 これが必要になるのは、<head> の内容を制御するコンポーネントは、HeadOutlet コンポーネントが含まれるレイアウトより前にレンダリングする必要があるためです。 ヘッド コンテンツの制御にはレンダリングの順序が必要になります。

共有 _Layout.cshtml ファイルに コンポーネントのHeadOutletが含まれない場合、それを <head> 要素に追加します。

コンポーネントをページまたはビューに埋め込む アプリまたは _Layout.cshtml Pages/MVC アプリのBlazor Serverの共有 Razor ファイルの場合:

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

プリレンダリングされるホストされた アプリの_Layout.cshtmlの共有 Blazor WebAssembly ファイルの場合:

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

レイアウトを使ってコンポーネントのページ タイトルを設定する

レイアウト コンポーネントでページ タイトルを設定します。

@inherits LayoutComponentBase

<PageTitle>Page Title</PageTitle>

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

HeadOutlet コンポーネント

HeadOutlet コンポーネントにより、PageTitle および HeadContent コンポーネントによって提供されたコンテンツがレンダリングされます。

プロジェクト テンプレートから作成された Blazor Web App では、HeadOutlet の App.razor コンポーネントによって <head> コンテンツがレンダリングされます。

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

Blazor Server プロジェクト テンプレートから作成された Blazor Server アプリでは、 で<head>によって HeadOutlet コンポーネントの Pages/_Host.cshtml コンテンツがレンダリングされます。

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

Blazor Server プロジェクト テンプレートから作成された Blazor Server アプリでは、 で<head>によって HeadOutlet コンポーネントの Pages/_Layout.cshtml コンテンツがレンダリングされます。

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

Blazor WebAssembly プロジェクト テンプレートから作成されたアプリでは、クライアント側の HeadOutlet ファイルで、RootComponents コンポーネントが WebAssemblyHostBuilder の Program コレクションに追加されます。

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

::after pseudo-selector が指定されている場合、ルート コンポーネントのコンテンツは、コンテンツを置き換える代わりに、既存の head コンテンツに追加されます。 これにより、アプリでは wwwroot/index.html で静的な head コンテンツを保持することができ、アプリの Razor コンポーネントでコンテンツを繰り返す必要はなくなります。

Blazor Web App でデフォルトのページ タイトルを設定する

App コンポーネント (App.razor) でページ タイトルを設定します。

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

Blazor WebAssembly アプリでページ タイトルが見つからない

Blazor スタンドアロン アプリ プロジェクト テンプレートから作成された Blazor WebAssembly アプリでは、NotFound コンポーネント (App) の App.razor コンポーネント テンプレートによって、ページ タイトルが Not found に設定されます。

Blazor プロジェクト テンプレートから作成された Blazor アプリでは、NotFound コンポーネント (App) の App.razor コンポーネント テンプレートによって、ページ タイトルが Not found に設定されます。

App.razor:

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

その他のリソース

Mozilla MDN Web Docs ドキュメント:

  • Last updated on