ASP.NET Core Blazor sections Clarification may be required

[kiwiingenuity]

Description

I attempted to understand this page.
I created a new Blazor app in Visual Studio.
Interactive render mode was set to Server
Interactivity location was set to Per page/component

I then copy pasted the first three items and ran my application.
It did not work.

I then started a new app and this time I set the Interactivity to Global.
Then it did work.

Should you not describe in the documentation, that it only works in Global mode?

__Allan

Page URL

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/sections?view=aspnetcore-9.0

Content source URL

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/components/sections.md

Document ID

654baa5a-e1a8-1b8e-ab4d-ee530392a9cd

Platform Id

9a5df28c-3add-8d46-e2a0-a859335b5ec4

Article author

@guardrex

Metadata

• ID: 654baa5a-e1a8-1b8e-ab4d-ee530392a9cd
• PlatformId: 9a5df28c-3add-8d46-e2a0-a859335b5ec4
• Service: aspnet-core
• Sub-service: blazor

Related Issues

[github-actions]

🌱🐇 Spring is here!! 🐣🌻

Stand-by! ... A green dinosaur 🦖 will be along shortly to assist.

[guardrex]

Hello @kiwiingenuity ... Yes, I agree that we'll need additional clarification on this scenario, which isn't supported at this time. What's happening here is that the layout is being rendered statically in the per-component render mode case. Therefore, event handlers in the layout can't fire. Also, it's not possible to apply an interactive render mode (InteractiveServer in this case) to the layout component because it throws 💥 ...

InvalidOperationException: Cannot pass the parameter 'Body' to component 'MainLayout' with rendermode 'InteractiveServerRenderMode'. This is because the parameter is of the delegate type 'Microsoft.AspNetCore.Components.RenderFragment', which is arbitrary code and cannot be serialized.

[Nor could you create a custom layout (@inherits LayoutComponentBase) and try to use it instead of MainLayout because it leads to the same result 💥😈.]

The product unit is aware of this limitation and has opened an issue (dotnet/aspnetcore #52768) to possibly work on it. Unfortunately, it didn't make the cut for feature work in .NET 10, which is targeted for release in November, so .NET 11 (~November, 2026) would be the earliest that it might be addressed.

The only way that I'm aware of to work around this is to use a wrapper component that adopts interactive rendering. The wrapper can hold the section outlet for other components.

Pages/InteractiveWrapper.razor:

@rendermode InteractiveServer

<div>
    <SectionOutlet SectionName="top-bar" />
</div>

@ChildContent

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<InteractiveWrapper>

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

    <PageTitle>Counter</PageTitle>

    <h1>Counter</h1>

    <p role="status">Current count: @currentCount</p>

    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

</InteractiveWrapper>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

One can also remove the @rendermode from the wrapper and set it where the component is used (<InteractiveWrapper @rendermode="InteractiveServer">), but that approach would be less fruitful I think in your specific scenario. It looks like you would always want the wrapper to be interactive in your specific scenario.

As you can tell, this workaround will be a little painful to adopt everywhere, and it may also negatively impact page layout specifications (e.g., how you set up top bars/sidebars for the site).

We cover the problem in the Render Mode article's Child component with a serializable parameter section, which doesn't call out this specific scenario.

I'll work on better coverage for this specific case in two spots ...

• I'll add a section to the Layouts article on this scenario and mention the workaround approach.
• In the Render Modes section, I'll mention that an interactive layout in a per-page/component-based BWA is another example of the scenario and cross-link the new section in the Layouts article.

Leave this issue open. It will close automatically when the PR merges later. Thanks for the issue!