Rendermode in Blazor Web App

Radzen.Blazor Components
1

Hi,

I'm trying to use the "Icon Sidebar" in a new Blazor Web App project in .NET 8. I have followed the installation instructions carefully and I have also tried the component in a test project which is only a Blazor server project. There I put both:

<HeadOutlet @rendermode="InteractiveServer"/>

and

<Routes @rendermode="InteractiveServer"/>

and it worked fine.

In my Blazor Web App project I don't want to set my full application to this InteractiveServer. How do I get only the "Icon Sidebar" to work as a InteractiveServer so it opens and closes when I press the burger icon?

Here is my code now:

@inherits LayoutComponentBase

<RadzenLayout>
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
            <RadzenLabel Text="Header" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar Responsive="false" Style="width: max-content">
        <RadzenPanelMenu DisplayStyle="@(sidebarExpanded ? MenuItemDisplayStyle.IconAndText : MenuItemDisplayStyle.Icon)" ShowArrow="false">
            <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>
</RadzenLayout>


@* RADZEN COMPONENTS START *@

@*
    Important! Make sure that you do not nest 
    <RadzenContextMenu />, <RadzenDialog />, <RadzenNotification /> and <RadzenTooltip /> 
    inside a positioned element (i.e. with position: relative, position: absolute or position: fixed). 
    To be safe you can add it at the end of the layout file after all other elements.
*@

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

@* RADZEN COMPONENTS END *@

@code {
    bool sidebarExpanded = true;
}

I might add that I've tried creating a wrapper component as well but I can't get that to work either.

Thanks in advanced!

2

You need to set either WebAssembly or Server interactivity if you want non-static (a component responding to events) to work.

3

You can check this thread too: Sidebar not working in .NET 8 RC1 experiment - #13 by korchev (this post shows how to use an interactive component in the static layout).

4

I have done like you did @korchev , I have set this:

<Routes @rendermode="InteractiveServer"/>

as you can see here:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorApp1.styles.css" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes @rendermode="InteractiveServer"/>
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>

</html>

The resultat on the Login.razor component:

chrome_3DBuNXATTb

It's refreshing the page automatic? :thinking:

5

Hi again,

I downloaded the solution you provided @korchev in the other forum thread but as soon as I started it I got errors:

rider64_7eiWpDMUe7
rider64_7eiWpDMUe71231×593 83.7 KB

rider64_rNuAnSz1MS
rider64_rNuAnSz1MS743×594 46.7 KB

I can't use:

@attribute [RenderModeInteractiveServer]

6

Hello again,

I managed to get it working. I followed your example @korchev but I replaced the code:

@attribute [RenderModeInteractiveServer]

to:

@rendermode InteractiveServer

And it made no difference to use:

<RadzenNotification @rendermode="@RenderMode.InteractiveServer" />
<RadzenDialog @rendermode="@RenderMode.InteractiveServer" />
<RadzenContextMenu @rendermode="@RenderMode.InteractiveServer" />
<RadzenTooltip @rendermode="@RenderMode.InteractiveServer" />

VS:

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

But correct me if I'm wrong. I don't want to run into problems later in development. The same applies to the service, this code didn't seem to make a difference either:

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

If I comment out the code, the application still works as it should. As I wrote, you are welcome to comment if there is something I must use in order not to run into problems later in the development.

Thanks for the support guys!