Blazor .net 8: Interactivity in navigational components outside Body

Question

I am currently trying to bring a Blazor Server app over to the new Blazor Web App model introduced in .net 8. My main layout looked like this:

@inherits LayoutComponentBase

<PageTitle>MyTitle</PageTitle>

<RadzenLayout>
    <MyHeader SidebarToggle="(() => _sidebarExpanded = !_sidebarExpanded)" />
    <MySidebar @bind-IsExpanded="_sidebarExpanded" />
    <RadzenBody class="rz-p-1 rz-pt-3">@Body</RadzenBody>
</RadzenLayout>

<RadzenDialog />
<RadzenNotification />
<RadzenContextMenu />
<RadzenTooltip />

@code {

    private bool _sidebarExpanded = true;
}

This worked in Blazor Server, but doesn't work now. The event callbacks never fire.

Even if I replace the layour with a simple button the CLick event never fires.

Is there anything new to it to add interactivity to the navigational components?

Answer 1

You need to declare the rendermode for the component. MS docs

First the services must be configured for the respective render mode in program.cs

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode();

Then the render mode can be set on the component definition.

RC1

@rendermode RenderMode.InteractiveServer

RC2

@attribute [RenderModeInteractiveServer]

Or on the component instance,

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

---

Global declaration

From .NET 8 RC2. You can set a global rendermode so that you only declare it on one place as the other components will inherit the rendermode. Update Blog Post