Sidebar not working in .NET 8 RC1 experiment

Radzen.Blazor Components
1

Hello,

I am building a test app using Blazor .NET 8 RC1, and have pasted one of your basic layout examples into the MainLayout page.
However when I run the app, the toggle and menu items do not respond.
I know .NET 8 is not yet released and therefore still not supported, but any feedback would be greatly appreciated.
This is the code example I have used:

<RadzenLayout style="height: 400px">
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" />
            <RadzenLabel Text="Header" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar Style="width:auto">
        <RadzenPanelMenu DisplayStyle="@(sidebar1Expanded?MenuItemDisplayStyle.IconAndText:MenuItemDisplayStyle.Icon)">
            <RadzenPanelMenuItem Text="Overview" Icon="home" />
            <RadzenPanelMenuItem Text="Dashboard" Icon="dashboard" />
            <RadzenPanelMenuItem Text="UI Fundamentals" Icon="auto_awesome">
                <RadzenPanelMenuItem Text="Themes" Icon="color_lens" />
                <RadzenPanelMenuItem Text="Colors" Icon="invert_colors" />
            </RadzenPanelMenuItem>
        </RadzenPanelMenu>
    </RadzenSidebar>
    <RadzenBody>
        <div class="rz-p-4">
            Body
        </div>
    </RadzenBody>
    <RadzenFooter>
        Footer
    </RadzenFooter>
</RadzenLayout>

@code {
    bool sidebar1Expanded = true;
}

Anywhere I can track any identified issues with the Radzen components and .NET 8?

Thank you very much for your help.

Torben Nielsen

2

We don’t have any reported issues so far related to .NET 8.

3

I have the side menu not expanding/collapsing at all and also dropdown menus are not activating when pushed, even if the data has loaded.
Any idea what could be the issue?

Thank you.

4

Check your browser console for errors.

5

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

6

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

7

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)

8

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

9

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.

10

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

11

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

12

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
13

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
14

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
15

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
16

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

17

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

18

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?

19

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

20

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.