Sidebar not working in .NET 8 RC1 experiment

Screenshot 2023-09-14 at 17.46.37
These are the errors I get.

I don’t see anything related to Radzen Blazor components, make sure that the required JavaScript is added as per our Getting Started.

I have done a completely new one, following the installation instructions from your website and I have a video shows how the UI elements are not responding to the several mouse clicks I do on both the menu expand/collapse, but also on the dropdown menu and no errors are popping up anywhere.
I am really at a loss here to what can be the reason and hope you can help.
I have attached a zip file with the full project.

Thank you very much for your help.
Radzen.NET8.Test.zip (2.6 MB)

I have just repeated the exact same steps on .NET 7 and here everything works as expected.

I reproduced the problem. Unfortunately it seems that no events execute in the layout. I tested by adding a vanilla button click there and nothing happened.

@inherits LayoutComponentBase

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

    <main>
        <div class="top-row px-4">
            <p role="status">Current count: @currentCount</p>
            <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

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

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>


@code {
    private int currentCount = 0;

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

Can you try this yourself? The counter in the header should increment but it doesn't (with or without Radzen.Blazor). Events not firing is the reason why the sidebar and panelmenu do nothing.

For what is worth I filed an issue in the official repository. Hopefully the MS team will help us out.

Thanks for the update.
I will follow the ticket you raised.
Lets hope MS will find a solution quickly.

This seems to be by design - the layout is not "interactive" which means it doesn't fire any events. There is another issue Root-level interactivity option for the new Blazor Web project template · Issue #50433 · dotnet/aspnetcore · GitHub which is not implemented in RC1 as far as I understand.

To be honest I still can't wrap my head around the whole render mode ordeal: ASP.NET Core Blazor render modes | Microsoft Learn

1 Like

After spending some more time here is what I found:

  1. This static mode is the default for all Blazor components. This means that events will not fire unless you have @attribute [RenderModeInteractiveServer] or @attribute [RenderModeInteractiveWebAssembly] or even @attribute [RenderModeInteractiveAuto]. No compilation errors or exceptions - it just won't work silently. We can't fix that in any way - this is how .NET 8 Blazor is for now.
  2. You can't easily use @attribute [RenderModeInteractiveServer] or the similar in MainLayout. It will break when you use @Body.

I found a workaround (and also hit another issue).
It is to put the Sidebar and Header in a separate component which has the much needed @attribute [RenderModeServer] and use it in the layout. Find attached a working project.

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

<RadzenLayout style="height: 400px">
    <Navigation /> <!-- This contains the interactive sidebar and toggle -->
    <RadzenBody>
        <div class="rz-p-4">
            @Body
        </div>
    </RadzenBody>
    <RadzenFooter>
        Footer
    </RadzenFooter>
</RadzenLayout>

Also note the @rendermode setting of RadzenNotification - it is needed otherwise it won't work

By the way your app was missing two critical things in Program.cs which are required for any interactivity:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents(); // <--

and

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode(); // <--

I have added them in the attached app.
Radzen.Net8.zip (155.4 KB)

1 Like

And another update. It seems there is an easier way to enable interactivity for all components (including the layout). Modify the App.razor file

OLD:

<Routes  />

NEW:

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

This seems to enable the old pre-.NET8 behavior. Also you don't need to change anything in MainLayout.razor - it can stay the same as in .NET7. Of course by doing this you would be losing static rendering mode altogether.

Bonus - here is the explanation of this behavior by the Blazor creator himself.

2 Likes

Hi Korchev,

Thank you very much for your help and support on this one.
I would never have figured it out on my own.

I am starting on a new big project which will take 5-6 months to develop and want to do it with .NET 8 and Blazor, using your components and Radzen Blazor Studio (for UI layout).

Thanks to you I can finally get the UI part underway.

Have a great weekend.

1 Like

I must point out that Radzen Blazor Studio does not support .NET 8 Blazor apps yet and there may be problems.

I am using it only to create the layout of the Radzen components on each page.
The rest I do in Visual Studio.

Just to be clear, because these render modes have me in loops...
If I were to add this:

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

It would make all of my components / pages whatever use the Server render mode?

But if I were to make a component for the sidebar, mark that with @attribute [RenderModeServer] and leave the Routes component alone, that would allow me to use different render modes on a component to component basis?

Yes. I've attached a sample project that does that.

I have updated all code snippets according to the RC2 release which has changed API.

RenderMode.Server -> RenderMode.InteractiveServer

@attribute [RenderModeServer] -> @attribute [RenderModeInteractiveServer]

I have also updated the sample project to use the new API.

Thank you. I had a slightly different case and was able to use your example to see where I had gone wrong.

MainLayout in .net 8 By default it is and will be static rendering, so the SideBars do not work inside, they are components.
You must create a Menu component and then embed it.

create a new component and add @rendermode InteractiveServer

Using the method of embidding the header and sidebar in a component has a wierd effect on the styling?

<RadzenLayout>
    <Menu></Menu>
    <RadzenBody>
        <div class="rz-p-4">
            @Body
        </div>
    </RadzenBody>
    <RadzenFooter>
        Footer
    </RadzenFooter>
</RadzenLayout>
@rendermode InteractiveServer

<RadzenHeader>
    <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Start">
            <RadzenSidebarToggle Click="@(() => _sideBarExpanded = !_sideBarExpanded)"/>
        </RadzenStack>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.End" class="pr-2">
            <RadzenText Text="test"/>
        </RadzenStack>
    </RadzenStack>
</RadzenHeader>
<RadzenSidebar @bind-Expanded="@_sideBarExpanded">
    <RadzenPanelMenu>
        <RadzenPanelMenuItem Text="Home" Icon="home"/>
        <RadzenPanelMenuItem Text="Users" Icon="account_box"/>
    </RadzenPanelMenu>
    <div class="rz-p-4">
        Sidebar
    </div>
</RadzenSidebar>

@code{
    bool _sideBarExpanded;

}

The body gets pushed up to the top.
This doesn't happen if I take the code from the Menu component and use directly.

EDIT. I just saw how to solve it. Add style="position: static" to the RadzenHeader

1 Like