共用方式為

ASP.NET Core Blazor 區段

注意

這不是這篇文章的最新版本。 關於目前版本，請參閱 本文的 .NET 10 版本。

本文說明如何從子Razor元件控制元件中Razor的內容。

Blazor 部分

若要從子 Razor 元件控制 Razor 元件中的內容，Blazor 使用下列內建元件支援此區段：

區段可用於配置和整個巢狀父子元件中。

即使傳遞至 SectionName 的引數可使用任何類型的大小寫，但文件會採用 Kebab 大小寫 (例如 top-bar)，這是 HTML 元素識別碼的常見大小寫選擇。 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 類別庫 (RCK) 時，這可提供幫助。 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，不能同時設定兩者。

RenderFragment 快取規則和區段轉譯行為

當 SectionContent 的內容發生變更時，若這個實例與其呈現的元件不同，RenderFragment 將會完全銷毀並重新建立該區段，而不是嘗試更新該區段的內容。 與一般轉譯不同，區段的內容可能來自不同的實例，嘗試處理來自兩個不同元件的內容是沒有意義的，這可能會導致意外的結果。 如需此行為的詳細說明，請參閱 Blazor 使用 SectionOutlet/SectionContent 和 CascadingValue 的元件初始化不一致（dotnet/aspnetcore#58316）。

與其他 Blazor 功能的區段互動

區段會使用下列方式與其他 Blazor 功能互動：

  • 階層式值會從 SectionContent 元件定義的內容位置流入區段內容。
  • 未處理的例外狀況會由 元件中定義的SectionContent處理。
  • 針對Razor設定的 元件也會設定 SectionContent 元件所提供的區段內容，以使用串流轉譯。
  • 包含互動式元件的區段會在採用每頁/元件渲染的佈局元件中做靜態渲染（不具功能性）。 如需詳細資訊，請參閱 ASP.NET Core Blazor 配置。
  • Last updated on