ASP.NET Core Blazor セクション

  • [アーティクル]

この記事では、子 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 コンポーネントでは、SectionOutlet コンポーネントが配置されている Counter コンポーネントからインクリメント カウント ボタンをレンダリングします。 他のコンポーネントにアクセスしても、インクリメント カウント ボタンはレンダリングされません。

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

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

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

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

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

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

<SectionOutlet SectionId="TopbarSection" />

インクリメント カウント ボタンをレンダリングする、アプリの Counter コンポーネントに SectionContent コンポーネントを追加します。 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 コンポーネントによって提供されるセクション コンテンツも構成します。