From cd9cc90563aaee1df68fe4eff3e0afa71efc378b Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Mon, 13 Mar 2023 13:19:36 -0400 Subject: [PATCH 01/10] Layout sections --- aspnetcore/blazor/components/layouts.md | 52 +++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/aspnetcore/blazor/components/layouts.md b/aspnetcore/blazor/components/layouts.md index c1e812e2571a..432c330db3f6 100644 --- a/aspnetcore/blazor/components/layouts.md +++ b/aspnetcore/blazor/components/layouts.md @@ -367,6 +367,58 @@ The following rendered HTML markup is produced by the preceding nested layout. E When routable components are integrated into a Razor Pages app, the app's shared layout can be used with the components. For more information, see . +:::moniker range=">= aspnetcore-8.0" + +## Layout sections + +To control the content in layouts from Razor components, Blazor supports *sections* using the following built-in components: + +* `SectionOutlet`: Renders content provided by `SectionContent` components with matching `SectionId` arguments. A `SectionOutlet` component can render the content of several `SectionContent` components. + +* `SectionContent`: Provides content to `SectionOutlet` components with a matching `SectionId`. Only one `SectionOutlet` component can render the content of a `SectionContent` instance. + +In the following example, the `MainLayout` component implements an increment counter button for the app's `Counter` component. + +Add a `TopbarSection` static `object` to the `MainLayout` component (`Shared/MainLayout.razor`) in an `@code` block: + +```razor +@code { + internal static object TopbarSection = new(); +} +``` + +In the `MainLayout` component's Razor markup above the `About` hyperlink's `` element , add the following markup to render `SectionContent` components that specify the `TopbarSection` section ID: + +```razor + +``` + +Add a `SectionContent` component to the app's `Counter` component that renders an increment count button. Use the `MainLayout` component's `TopbarSection` section static `object` as the `SectionID` (`MainLayout.TopbarSection`). + +In `Pages/Counter.razor`: + +```razor + + + +``` + +An alternative approach to using a static field in the `Mainlayout` component is to pass a string to `SectionId`. The following example uses `"topbar"`: + +```razor + +``` + +In the `Counter` component, the matching string (`"topbar"`) is passed to the `SectionId` parameter of the `SectionContent` component: + +```razor + + + +``` + +:::moniker-end + ## Additional resources * From 6a0ed2e8d4d13613437fb6ad529198bdcbeb2448 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Mon, 13 Mar 2023 13:26:02 -0400 Subject: [PATCH 02/10] Updates --- aspnetcore/blazor/components/layouts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/components/layouts.md b/aspnetcore/blazor/components/layouts.md index 432c330db3f6..e9c1fef3ab6b 100644 --- a/aspnetcore/blazor/components/layouts.md +++ b/aspnetcore/blazor/components/layouts.md @@ -375,7 +375,7 @@ To control the content in layouts from Razor components, Blazor supports *sectio * `SectionOutlet`: Renders content provided by `SectionContent` components with matching `SectionId` arguments. A `SectionOutlet` component can render the content of several `SectionContent` components. -* `SectionContent`: Provides content to `SectionOutlet` components with a matching `SectionId`. Only one `SectionOutlet` component can render the content of a `SectionContent` instance. +* `SectionContent`: Provides content as a to `SectionOutlet` components with a matching `SectionId`. Only one `SectionOutlet` component can render the content of a `SectionContent` instance. In the following example, the `MainLayout` component implements an increment counter button for the app's `Counter` component. From acf67a1f513741fe2aa44343c6c36e318eb04fb7 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Mar 2023 05:38:02 -0400 Subject: [PATCH 03/10] Updates --- aspnetcore/blazor/components/layouts.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/aspnetcore/blazor/components/layouts.md b/aspnetcore/blazor/components/layouts.md index e9c1fef3ab6b..8573acefece2 100644 --- a/aspnetcore/blazor/components/layouts.md +++ b/aspnetcore/blazor/components/layouts.md @@ -373,9 +373,9 @@ When routable components are integrated into a Razor Pages app, the app's shared To control the content in layouts from Razor components, Blazor supports *sections* using the following built-in components: -* `SectionOutlet`: Renders content provided by `SectionContent` components with matching `SectionId` arguments. A `SectionOutlet` component can render the content of several `SectionContent` components. +* `SectionOutlet`: Renders content provided by `SectionContent` components with matching `SectionId` or `SectionName` arguments. A `SectionOutlet` component can render the content of several `SectionContent` components. -* `SectionContent`: Provides content as a to `SectionOutlet` components with a matching `SectionId`. Only one `SectionOutlet` component can render the content of a `SectionContent` instance. +* `SectionContent`: Provides content as a to `SectionOutlet` components with a matching `SectionId` or `SectionName`. Only one `SectionOutlet` component can render the content of a `SectionContent` instance. In the following example, the `MainLayout` component implements an increment counter button for the app's `Counter` component. @@ -403,20 +403,23 @@ In `Pages/Counter.razor`: ``` -An alternative approach to using a static field in the `Mainlayout` component is to pass a string to `SectionId`. The following example uses `"topbar"`: +An alternative approach to using a static field in the `Mainlayout` component is to pass a string to the `SectionName` parameter. The following example uses `"topbar"`: ```razor - + ``` -In the `Counter` component, the matching string (`"topbar"`) is passed to the `SectionId` parameter of the `SectionContent` component: +In the `Counter` component, the matching string (`"topbar"`) is passed to the `SectionName` parameter of the `SectionContent` component: ```razor - + ``` +> [!NOTE] +> `SectionOutlet` and `SectionContent` components can only set either `SectionId` or `SectionName`, not both. + :::moniker-end ## Additional resources From 268a0ccd0bd0bddfd9f6f92d1db2799fd7137fa6 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 7 Apr 2023 06:18:40 -0400 Subject: [PATCH 04/10] Updates --- aspnetcore/blazor/components/layouts.md | 44 ++++++++++++++----------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/aspnetcore/blazor/components/layouts.md b/aspnetcore/blazor/components/layouts.md index 8573acefece2..5b895da05277 100644 --- a/aspnetcore/blazor/components/layouts.md +++ b/aspnetcore/blazor/components/layouts.md @@ -371,52 +371,58 @@ When routable components are integrated into a Razor Pages app, the app's shared ## Layout sections -To control the content in layouts from Razor components, Blazor supports *sections* using the following built-in components: +To control the content in layout Razor components from child Razor components, Blazor supports *sections* using the following built-in components: -* `SectionOutlet`: Renders content provided by `SectionContent` components with matching `SectionId` or `SectionName` arguments. A `SectionOutlet` component can render the content of several `SectionContent` components. +* `SectionOutlet`: Renders content provided by `SectionContent` components with matching `SectionName` or `SectionId` arguments. Two or more `SectionOutlet` components can't have the the same `SectionName` or `SectionId`. -* `SectionContent`: Provides content as a to `SectionOutlet` components with a matching `SectionId` or `SectionName`. Only one `SectionOutlet` component can render the content of a `SectionContent` instance. +* `SectionContent`: Provides content as a to `SectionOutlet` components with a matching `SectionName` or `SectionId`. If several `SectionContent` components have the same `SectionName` or `SectionId`, the matching `SectionOutlet` component renders the content of the last rendered `SectionContent`. -In the following example, the `MainLayout` component implements an increment counter button for the app's `Counter` component. +In the following example, the app's main layout component implements an increment counter button for the app's `Counter` component. -Add a `TopbarSection` static `object` to the `MainLayout` component (`Shared/MainLayout.razor`) in an `@code` block: +In the `MainLayout` component (`Shared/MainLayout.razor`), place a `SectionOutlet` component and pass a string to the `SectionName` parameter to indicate the section's name. The following example uses the section name `topbar`: ```razor -@code { - internal static object TopbarSection = new(); -} + ``` -In the `MainLayout` component's Razor markup above the `About` hyperlink's `` element , add the following markup to render `SectionContent` components that specify the `TopbarSection` section ID: +In the `Counter` component (`Pages/Counter.razor`), create a `SectionContent` component and pass the matching string (`topbar`) to its `SectionName` parameter: ```razor - + + + ``` -Add a `SectionContent` component to the app's `Counter` component that renders an increment count button. Use the `MainLayout` component's `TopbarSection` section static `object` as the `SectionID` (`MainLayout.TopbarSection`). +When the app is run, the `MainLayout` component renders the increment count button from the `Counter` component where the `SectionOutlet` component is placed. -In `Pages/Counter.razor`: +Instead of using a named section, you can pass a static `object` with the `SectionId` parameter to identify the section. The following example also implements an increment counter button for the app's `Counter` component in the app's main layout. + +Add a `TopbarSection` static `object` to the `MainLayout` component in an `@code` block: ```razor - - - +@code { + internal static object TopbarSection = new(); +} ``` -An alternative approach to using a static field in the `Mainlayout` component is to pass a string to the `SectionName` parameter. The following example uses `"topbar"`: +In the `MainLayout` component's Razor markup, place a `SectionOutlet` component and pass `TopbarSection` to the `SectionId` parameter to indicate the section: ```razor - + ``` -In the `Counter` component, the matching string (`"topbar"`) is passed to the `SectionName` parameter of the `SectionContent` component: +Add a `SectionContent` component to the app's `Counter` component that renders an increment count button. Use the `MainLayout` component's `TopbarSection` section static `object` as the `SectionId` (`MainLayout.TopbarSection`). + +In `Pages/Counter.razor`: ```razor - + ``` +When the app is run, the `MainLayout` component renders the increment count button where the `SectionOutlet` component is placed. + > [!NOTE] > `SectionOutlet` and `SectionContent` components can only set either `SectionId` or `SectionName`, not both. From 298792ce917ec84789e2cb17363bfd0e2ae6887b Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Wed, 12 Apr 2023 05:29:26 -0400 Subject: [PATCH 05/10] Updates --- aspnetcore/blazor/components/layouts.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/aspnetcore/blazor/components/layouts.md b/aspnetcore/blazor/components/layouts.md index 5b895da05277..ce0549e763bc 100644 --- a/aspnetcore/blazor/components/layouts.md +++ b/aspnetcore/blazor/components/layouts.md @@ -393,10 +393,14 @@ In the `Counter` component (`Pages/Counter.razor`), create a `SectionContent` co ``` -When the app is run, the `MainLayout` component renders the increment count button from the `Counter` component where the `SectionOutlet` component is placed. +When the `Counter` component is accessed at `/counter`, the `MainLayout` component renders the increment count button from the `Counter` component where the `SectionOutlet` component is placed. When any other component is accessed, the increment count button isn't rendered. Instead of using a named section, you can pass a static `object` with the `SectionId` parameter to identify the section. The following example also implements an increment counter button for the app's `Counter` component in the app's main layout. +If you don't want other `SectionContent` components to accidentally match the name of a `SectionOutlet`, pass an object `SectionId` parameter to identify the section. This can be useful when designing a [Razor class library (RCL)](xref:blazor/components/class-libraries). When a `SectionOutlet` in the RCL uses an object reference with `SectionId` and the consumer places a `SectionContent` component with a matching `SectionId` object, an accidental match by name isn't possible when consumers of the RCL implement other `SectionContent` components. + +The following example also implements an increment counter button for the app's `Counter` component in the app's main layout, using an object reference instead of a section name. + Add a `TopbarSection` static `object` to the `MainLayout` component in an `@code` block: ```razor @@ -421,7 +425,7 @@ In `Pages/Counter.razor`: ``` -When the app is run, the `MainLayout` component renders the increment count button where the `SectionOutlet` component is placed. +When the `Counter` component is accessed, the `MainLayout` component renders the increment count button where the `SectionOutlet` component is placed. > [!NOTE] > `SectionOutlet` and `SectionContent` components can only set either `SectionId` or `SectionName`, not both. From d2e72e5e75bc880705300eee218579666014be6e Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 14 Apr 2023 09:03:35 -0400 Subject: [PATCH 06/10] Updates --- aspnetcore/blazor/components/layouts.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/aspnetcore/blazor/components/layouts.md b/aspnetcore/blazor/components/layouts.md index ce0549e763bc..35b05e32007e 100644 --- a/aspnetcore/blazor/components/layouts.md +++ b/aspnetcore/blazor/components/layouts.md @@ -401,6 +401,12 @@ If you don't want other `SectionContent` components to accidentally match the na The following example also implements an increment counter button for the app's `Counter` component in the app's main layout, using an object reference instead of a section name. +Add the namespace for sections to the `_Imports.razor` file: + +```razor +@using Microsoft.AspNetCore.Components.Sections +``` + Add a `TopbarSection` static `object` to the `MainLayout` component in an `@code` block: ```razor From b43bd88535b2f4dfd6cc3b7c80d70c692e605bf6 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 14 Apr 2023 09:04:28 -0400 Subject: [PATCH 07/10] Updates --- aspnetcore/blazor/components/layouts.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/aspnetcore/blazor/components/layouts.md b/aspnetcore/blazor/components/layouts.md index 35b05e32007e..df55bc288cbe 100644 --- a/aspnetcore/blazor/components/layouts.md +++ b/aspnetcore/blazor/components/layouts.md @@ -379,6 +379,12 @@ To control the content in layout Razor components from child Razor components, B In the following example, the app's main layout component implements an increment counter button for the app's `Counter` component. +Add the namespace for sections to the `_Imports.razor` file: + +```razor +@using Microsoft.AspNetCore.Components.Sections +``` + In the `MainLayout` component (`Shared/MainLayout.razor`), place a `SectionOutlet` component and pass a string to the `SectionName` parameter to indicate the section's name. The following example uses the section name `topbar`: ```razor @@ -401,12 +407,6 @@ If you don't want other `SectionContent` components to accidentally match the na The following example also implements an increment counter button for the app's `Counter` component in the app's main layout, using an object reference instead of a section name. -Add the namespace for sections to the `_Imports.razor` file: - -```razor -@using Microsoft.AspNetCore.Components.Sections -``` - Add a `TopbarSection` static `object` to the `MainLayout` component in an `@code` block: ```razor From 80e2a36160d046411a18e4d41fd6ceee2ecadc70 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 18 Apr 2023 11:36:17 -0400 Subject: [PATCH 08/10] Updates --- aspnetcore/blazor/components/layouts.md | 67 +------------------- aspnetcore/blazor/components/sections.md | 80 ++++++++++++++++++++++++ aspnetcore/toc.yml | 2 + 3 files changed, 84 insertions(+), 65 deletions(-) create mode 100644 aspnetcore/blazor/components/sections.md diff --git a/aspnetcore/blazor/components/layouts.md b/aspnetcore/blazor/components/layouts.md index df55bc288cbe..b1198cf65f13 100644 --- a/aspnetcore/blazor/components/layouts.md +++ b/aspnetcore/blazor/components/layouts.md @@ -369,72 +369,9 @@ When routable components are integrated into a Razor Pages app, the app's shared :::moniker range=">= aspnetcore-8.0" -## Layout sections +## Sections -To control the content in layout Razor components from child Razor components, Blazor supports *sections* using the following built-in components: - -* `SectionOutlet`: Renders content provided by `SectionContent` components with matching `SectionName` or `SectionId` arguments. Two or more `SectionOutlet` components can't have the the same `SectionName` or `SectionId`. - -* `SectionContent`: Provides content as a to `SectionOutlet` components with a matching `SectionName` or `SectionId`. If several `SectionContent` components have the same `SectionName` or `SectionId`, the matching `SectionOutlet` component renders the content of the last rendered `SectionContent`. - -In the following example, the app's main layout component implements an increment counter button for the app's `Counter` component. - -Add the namespace for sections to the `_Imports.razor` file: - -```razor -@using Microsoft.AspNetCore.Components.Sections -``` - -In the `MainLayout` component (`Shared/MainLayout.razor`), place a `SectionOutlet` component and pass a string to the `SectionName` parameter to indicate the section's name. The following example uses the section name `topbar`: - -```razor - -``` - -In the `Counter` component (`Pages/Counter.razor`), create a `SectionContent` component and pass the matching string (`topbar`) to its `SectionName` parameter: - -```razor - - - -``` - -When the `Counter` component is accessed at `/counter`, the `MainLayout` component renders the increment count button from the `Counter` component where the `SectionOutlet` component is placed. When any other component is accessed, the increment count button isn't rendered. - -Instead of using a named section, you can pass a static `object` with the `SectionId` parameter to identify the section. The following example also implements an increment counter button for the app's `Counter` component in the app's main layout. - -If you don't want other `SectionContent` components to accidentally match the name of a `SectionOutlet`, pass an object `SectionId` parameter to identify the section. This can be useful when designing a [Razor class library (RCL)](xref:blazor/components/class-libraries). When a `SectionOutlet` in the RCL uses an object reference with `SectionId` and the consumer places a `SectionContent` component with a matching `SectionId` object, an accidental match by name isn't possible when consumers of the RCL implement other `SectionContent` components. - -The following example also implements an increment counter button for the app's `Counter` component in the app's main layout, using an object reference instead of a section name. - -Add a `TopbarSection` static `object` to the `MainLayout` component in an `@code` block: - -```razor -@code { - internal static object TopbarSection = new(); -} -``` - -In the `MainLayout` component's Razor markup, place a `SectionOutlet` component and pass `TopbarSection` to the `SectionId` parameter to indicate the section: - -```razor - -``` - -Add a `SectionContent` component to the app's `Counter` component that renders an increment count button. Use the `MainLayout` component's `TopbarSection` section static `object` as the `SectionId` (`MainLayout.TopbarSection`). - -In `Pages/Counter.razor`: - -```razor - - - -``` - -When the `Counter` component is accessed, the `MainLayout` component renders the increment count button where the `SectionOutlet` component is placed. - -> [!NOTE] -> `SectionOutlet` and `SectionContent` components can only set either `SectionId` or `SectionName`, not both. +To control the content in a layout from a child Razor component, see . :::moniker-end diff --git a/aspnetcore/blazor/components/sections.md b/aspnetcore/blazor/components/sections.md new file mode 100644 index 000000000000..472cdb6b69af --- /dev/null +++ b/aspnetcore/blazor/components/sections.md @@ -0,0 +1,80 @@ +--- +title: ASP.NET Core Blazor sections +author: guardrex +description: Learn how to to control the content in a Razor component from a child Razor component. +monikerRange: '>= aspnetcore-8.0' +ms.author: riande +ms.custom: mvc +ms.date: 04/18/2023 +uid: blazor/components/sections +--- +# ASP.NET Core Blazor sections + +To control the content in a Razor component from a child Razor component, Blazor supports *sections* using the following built-in components: + +* `SectionOutlet`: Renders content provided by `SectionContent` components with matching `SectionName` or `SectionId` arguments. Two or more `SectionOutlet` components can't have the the same `SectionName` or `SectionId`. + +* `SectionContent`: Provides content as a to `SectionOutlet` components with a matching `SectionName` or `SectionId`. If several `SectionContent` components have the same `SectionName` or `SectionId`, the matching `SectionOutlet` component renders the content of the last rendered `SectionContent`. + +Sections can be used in both [layouts](xref:blazor/components/layouts) and across nested parent-child components. + +Although the argument passed for `SectionName` can use any type of casing, the documentation adopts kebab casing (for example, `top-bar`), which is a common casing choice for HTML element IDs. `SectionId` is assigned a static `object` field, and we always recommend Pascal casing for C# fields (for example, `TopbarSection`). + +In the following example, the app's main layout component implements an increment counter button for the app's `Counter` component. + +Add the namespace for sections to the `_Imports.razor` file: + +```razor +@using Microsoft.AspNetCore.Components.Sections +``` + +In the `MainLayout` component (`Shared/MainLayout.razor`), place a `SectionOutlet` component and pass a string to the `SectionName` parameter to indicate the section's name. The following example uses the section name `top-bar`: + +```razor + +``` + +In the `Counter` component (`Pages/Counter.razor`), create a `SectionContent` component and pass the matching string (`top-bar`) to its `SectionName` parameter: + +```razor + + + +``` + +When the `Counter` component is accessed at `/counter`, the `MainLayout` component renders the increment count button from the `Counter` component where the `SectionOutlet` component is placed. When any other component is accessed, the increment count button isn't rendered. + +Instead of using a named section, you can pass a static `object` with the `SectionId` parameter to identify the section. The following example also implements an increment counter button for the app's `Counter` component in the app's main layout. + +If you don't want other `SectionContent` components to accidentally match the name of a `SectionOutlet`, pass an object `SectionId` parameter to identify the section. This can be useful when designing a [Razor class library (RCL)](xref:blazor/components/class-libraries). When a `SectionOutlet` in the RCL uses an object reference with `SectionId` and the consumer places a `SectionContent` component with a matching `SectionId` object, an accidental match by name isn't possible when consumers of the RCL implement other `SectionContent` components. + +The following example also implements an increment counter button for the app's `Counter` component in the app's main layout, using an object reference instead of a section name. + +Add a `TopbarSection` static `object` to the `MainLayout` component in an `@code` block: + +```razor +@code { + internal static object TopbarSection = new(); +} +``` + +In the `MainLayout` component's Razor markup, place a `SectionOutlet` component and pass `TopbarSection` to the `SectionId` parameter to indicate the section: + +```razor + +``` + +Add a `SectionContent` component to the app's `Counter` component that renders an increment count button. Use the `MainLayout` component's `TopbarSection` section static `object` as the `SectionId` (`MainLayout.TopbarSection`). + +In `Pages/Counter.razor`: + +```razor + + + +``` + +When the `Counter` component is accessed, the `MainLayout` component renders the increment count button where the `SectionOutlet` component is placed. + +> [!NOTE] +> `SectionOutlet` and `SectionContent` components can only set either `SectionId` or `SectionName`, not both. diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml index 7cebcb21d90a..56109854408b 100644 --- a/aspnetcore/toc.yml +++ b/aspnetcore/toc.yml @@ -431,6 +431,8 @@ items: uid: blazor/components/index - name: Layouts uid: blazor/components/layouts + - name: Sections + uid: blazor/components/sections - name: Control content uid: blazor/components/control-head-content - name: Cascading values and parameters From ed4959588bea8c20baf071900fc2f474cfb72e58 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 18 Apr 2023 11:37:01 -0400 Subject: [PATCH 09/10] Updates --- aspnetcore/blazor/components/sections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/components/sections.md b/aspnetcore/blazor/components/sections.md index 472cdb6b69af..0317b15d52f0 100644 --- a/aspnetcore/blazor/components/sections.md +++ b/aspnetcore/blazor/components/sections.md @@ -18,7 +18,7 @@ To control the content in a Razor component from a child Razor component, Blazor Sections can be used in both [layouts](xref:blazor/components/layouts) and across nested parent-child components. -Although the argument passed for `SectionName` can use any type of casing, the documentation adopts kebab casing (for example, `top-bar`), which is a common casing choice for HTML element IDs. `SectionId` is assigned a static `object` field, and we always recommend Pascal casing for C# fields (for example, `TopbarSection`). +Although the argument passed to `SectionName` can use any type of casing, the documentation adopts kebab casing (for example, `top-bar`), which is a common casing choice for HTML element IDs. `SectionId` is assigned a static `object` field, and we always recommend Pascal casing for C# fields (for example, `TopbarSection`). In the following example, the app's main layout component implements an increment counter button for the app's `Counter` component. From 97295a0ed509c2264c57aaa18ce7b57b1c8c9d3a Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 18 Apr 2023 13:29:47 -0400 Subject: [PATCH 10/10] Updates --- aspnetcore/blazor/components/sections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/components/sections.md b/aspnetcore/blazor/components/sections.md index 0317b15d52f0..1430999248d4 100644 --- a/aspnetcore/blazor/components/sections.md +++ b/aspnetcore/blazor/components/sections.md @@ -18,7 +18,7 @@ To control the content in a Razor component from a child Razor component, Blazor Sections can be used in both [layouts](xref:blazor/components/layouts) and across nested parent-child components. -Although the argument passed to `SectionName` can use any type of casing, the documentation adopts kebab casing (for example, `top-bar`), which is a common casing choice for HTML element IDs. `SectionId` is assigned a static `object` field, and we always recommend Pascal casing for C# fields (for example, `TopbarSection`). +Although the argument passed to `SectionName` can use any type of casing, the documentation adopts kebab casing (for example, `top-bar`), which is a common casing choice for HTML element IDs. `SectionId` receives a static `object` field, and we always recommend Pascal casing for C# field names (for example, `TopbarSection`). In the following example, the app's main layout component implements an increment counter button for the app's `Counter` component.