CascadingParameter set in MainLayout.razor doesn't work as expected in .NET 8

[ruikaifeng]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

The the cascading parameters work properly only during prerender:

I found a workaround that set rendermode to InteractiveServer gobally in app.razor

<Routes @rendermode="RenderMode.InteractiveServer" />

Expected Behavior

The the cascading parameters work properly without setting rendermode to InteractiveServer gobally

Steps To Reproduce

codes in Razor Components:

@attribute [RenderModeInteractiveServer]

<h1>Themed Counter</h1>
<p>Current count: @currentCount</p>
<p>
    <button class="btn @(ThemeInfo is not null ? ThemeInfo.ButtonClass : string.Empty)"
            @onclick="IncrementCount">
        Increment Counter (Themed)
    </button>
</p>

@code {
    private int currentCount = 0;       

    [CascadingParameter]
    // this themeinfo is only cascaded properly during prerender
    protected ThemeInfo? ThemeInfo { get; set; } 

    private void IncrementCount()
    {
        currentCount++;
    }
    protected override void OnInitialized()
    {
        base.OnInitialized();
    }
}

mainlayout:

@inherits LayoutComponentBase


<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <CascadingValue Value="@theme" >
            <article class="content px-4">
                @Body
            </article>
        </CascadingValue>
    </main>
</div>

@code {
    private ThemeInfo theme = new ThemeInfo { ButtonClass = "btn-success" };
}

Exceptions (if any)

No response

.NET Version

8.0.100-rc.2.23502.2

Anything else?

No response

[SteveSandersonMS]

Cascading parameters don't cross rendermode boundaries. This is because:

1. It would break most existing apps if the framework tried to serialize them, because in general one should not expect their values to be serializable.
2. Top-level cascading parameters are often used as a DI alternative, and so you should expect to have different data on different hosting platforms. For example, in static SSR there's a cascading HttpContext. It would not make sense to serialize that out and rehydrate it for interactive rendering, since at that time there's either a different HTTP context or even no HTTP context at all.

Of course, this will be covered in the .NET 8 docs when they are published.

As a solution, you should use builder.Services.AddCascadingParameter (including in your .Client project if you're also using WebAssembly) to register cascading values, so your app supplies a value for each hosting platform. Then a value will always be available, and it's your responsibility as the app developer to determine that value for each hosting platform.

If you actually need to transfer dynamically-determined data from static SSR into interactive components, the PersistentComponentState API exists for that purpose: https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.persistentcomponentstate?view=aspnetcore-7.0. This does work by serializing out whatever state you register so that it becomes available to interactive components.

[guardrex]

Just to let you know, @ruikaifeng, docs will cover this after dotnet/AspNetCore.Docs#30958 merges, which will be later this afternoon.

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.