I am working with a Blazor web app that uses .NET 9 for authorization. I need to apply @rendermode InteractiveServer in the NavMenu.razor to enable client-side interaction with the server-side through C# code:
<NavLink class="@(navSubmenu == NavSubmenu.FirstSubM ? "nav-link custom-active-main" : "nav-link")" @onclick="() => TogleSubmenu(NavSubmenu.FirstSubM)"><span class="bi bi-boxes-nav-menu" aria-hidden="true"></span><div class="d-flex justify-content-between align-items-center"><div><span>Products</span></div><div class="px-2 d-flex align-items-center justify-content-center"><span class="@(navSubmenu == NavSubmenu.FirstSubM ? "custom-bi bi-chevron-up-sub-menu" : "custom-bi bi-chevron-down-sub-menu")" aria-hidden="true"></span></div></div></NavLink>Note: it is applied to multiple NavLink component instances.
Refactoring the NavMenu.razor from @rendermode InteractiveServer as a component definition into a @rendermode="InteractiveServer" as a component instance:
<NavLink @rendermode="InteractiveServer" class="@(navSubmenu == NavSubmenu.FirstSubM ? "nav-link custom-active-main" : "nav-link")" @onclick="() => TogleSubmenu(NavSubmenu.FirstSubM)"><span class="bi bi-boxes-nav-menu" aria-hidden="true"></span><div class="d-flex justify-content-between align-items-center"><div><span>Products</span></div><div class="px-2 d-flex align-items-center justify-content-center"><span class="@(navSubmenu == NavSubmenu.FirstSubM ? "custom-bi bi-chevron-up-sub-menu" : "custom-bi bi-chevron-down-sub-menu")" aria-hidden="true"></span></div></div></NavLink>I get this error:
InvalidOperationException: Cannot pass the parameter 'ChildContent' to component 'NavLink' 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.
The issue is that if I keep the @rendermode InteractiveServer as a component definition, the Auth.razor page behaves unexpectedly; otherwise, it behaves as expected, particularly if I attempt to navigate to the Auth.razor page if I'm not yet authenticated, and access to it is not permitted:
@page "/auth"@using Microsoft.AspNetCore.Authorization@attribute [Authorize]<PageTitle>Auth</PageTitle><h1>You are authenticated</h1><AuthorizeView> Hello @context.User.Identity?.Name!</AuthorizeView>Here's the NavLink component instance within the NavMenu.razor:
<div class="nav-item px-3"><NavLink class="nav-link" href="auth"><span class="bi bi-lock-nav-menu" aria-hidden="true"></span> Auth Required</NavLink></div>It turns out that an Auth.razor page with @attribute [Authorize] introduces conflict if I configure the NavMenu.razor with @rendermode InteractiveServer.
Has anyone already faced the same issue as mine? Do you know how to resolve it if the case is that there's a client-side interaction with the server-side code?