共用方式為

ASP.NET Core Blazor 區段

  • 發行項

本文說明如何從子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 元件會轉譯從放置 SectionOutlet 元件的 Counter 元件轉譯遞增計數按鈕。 存取其他元件時，不會轉譯遞增計數按鈕。

您可使用 SectionId 參數傳遞靜態 object 以識別區段，而不是使用具名區段。 下列範例也會在應用程式的主要配置中實作應用程式 Counter 元件的遞增計數器按鈕。

如果您不想使其他 SectionContent 元件意外比對 SectionOutlet 名稱，請傳遞物件 SectionId 參數以識別區段。 設計 Razor 類別庫 (RCK) 時，這可提供幫助。 RCL 中的 SectionOutlet 會使用含 SectionId 的物件參考且取用者放置含相符 SectionId 物件的 SectionContent 元件時，若 RCL 取用者實作其他 SectionContent 元件，則將不會意外比對名稱。

下列範例也會使用物件參考，在應用程式主要配置中實作應用程式 Counter 元件的遞增計數器按鈕，而不會使用區段名稱。

將 TopbarSection 靜態 object 新增至 @code 區塊中的 MainLayout 元件：

@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 功能互動：