次の方法で共有

ASP.NET Core Blazor セクション

注

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

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

この記事では、子 Razor コンポーネントから Razor コンポーネント内のコンテンツを制御する方法について説明します。

Blazor セクション

子 Razor コンポーネントから Razor コンポーネント内のコンテンツを制御するために、Blazor では次の組み込みコンポーネントを使用して "セクション" をサポートします。

セクションは、レイアウトと、ネストされた親子コンポーネント全体の両方で使用できます。

SectionName に渡される引数には、どの種類の大文字小文字も使用できますが、ドキュメントでは、HTML 要素 ID 用の一般的な大文字小文字のオプションである kebab ケーシング (top-bar など) が採用されています。 SectionId では静的な object フィールドを受け取ります。C# のフィールド名には常に Pascal の大文字小文字を使用することをお勧めします (TopbarSection など)。

次の例では、アプリのメイン レイアウト コンポーネントによって、アプリの Counter コンポーネント用にインクリメント カウンター ボタンが実装されています。

セクションの名前空間が _Imports.razor ファイルにない場合は、その名前空間を追加します。

@using Microsoft.AspNetCore.Components.Sections

MainLayout コンポーネント (MainLayout.razor) では、SectionOutlet コンポーネントを配置し、セクションの名前を示す文字列を SectionName パラメーターに渡します。 次の例では、top-bar というセクション名が使用されます。

<SectionOutlet SectionName="top-bar" />

Counter コンポーネント (Counter.razor) では、SectionContent コンポーネントを作成し、一致する文字列 (top-bar) をその SectionName パラメーターに渡します。

<SectionContent SectionName="top-bar">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

Counter コンポーネントが /counter でアクセスされると、MainLayout コンポーネントでは、Counter コンポーネントが配置されている SectionOutlet コンポーネントからインクリメント カウント ボタンをレンダリングします。 他のコンポーネントにアクセスしても、インクリメント カウント ボタンはレンダリングされません。

名前付きセクションを使用するのでなく、静的な object と、セクションを識別する SectionId パラメーターを渡します。 次の例では、アプリのメイン レイアウトにある、アプリの Counter コンポーネント用のインクリメント カウンター ボタンも実装しています。

他の SectionContent コンポーネントが誤って SectionOutlet の名前と一致しないようにするには、セクションを識別するオブジェクト パラメーター SectionId を渡します。 これは Razor クラス ライブラリ (RCL) を設計する際に役立ちます。 RCL 内の SectionOutlet によって、SectionId を含むオブジェクト参照が使用され、コンシューマーが、一致する SectionContent オブジェクトを含む SectionId コンポーネントを配置している場合、RCL のコンシューマーが他の SectionContent コンポーネントを実装しても、名前による偶発的な一致はあり得ません。

次の例では、セクション名ではなく、オブジェクト参照を使用して、アプリのメイン レイアウトにある、アプリの Counter コンポーネント用のインクリメント カウンター ボタンも実装しています。

TopbarSection の静的 object を MainLayout ブロック内の @code コンポーネントに追加します。

@code {
    internal static object TopbarSection = new();
}

MainLayout コンポーネントの Razor マークアップで、SectionOutlet コンポーネントを配置し、セクションを示す TopbarSection パラメーターに SectionId を渡します。

<SectionOutlet SectionId="TopbarSection" />

インクリメント カウント ボタンをレンダリングする、アプリの SectionContent コンポーネントに Counter コンポーネントを追加します。 MainLayout コンポーネントの TopbarSection セクションの静的 object を SectionId (MainLayout.TopbarSection) として使用します。

Counter.razor:

<SectionContent SectionId="MainLayout.TopbarSection">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

Counter コンポーネントにアクセスすると、MainLayout コンポーネントによって、SectionOutlet コンポーネントが配置されているインクリメント カウント ボタンがレンダリングされます。

注

SectionOutlet および SectionContent コンポーネントでは、SectionId または SectionName のいずれかを設定できだけで、両方設定することはできません。

セクションと他の Blazor 機能の相互作用

セクションは、次の方法で他 Blazor の機能と対話します。

  • カスケード値は 、SectionContent コンポーネントによってコンテンツが定義されるセクション コンテンツに流れ込まれます。
  • 未処理の例外は、 コンポーネントの周囲に定義されたSectionContentによって処理されます。
  • Razor用に構成された コンポーネントは、ストリーミング レンダリングを使用するように SectionContent コンポーネントによって提供されるセクション コンテンツも構成します。
  • 対話型コンポーネントを含むセクションは、ページ単位/コンポーネントごとのレンダリングを採用する Blazor Web App のレイアウト コンポーネントで静的にレンダリング (非機能) されます。 詳しくは、「ASP.NET Core の Blazor レイアウト」を参照してください。