Getting error when using radzen layout

Radzen.Blazor Components
1

I am trying to use radzen layout and for this, I created a new Blazor project. I changed its MainLayout.razor to this (After following your install instructions adding the required files and references to the project and confirming that activities on a page are working properly by adding a radzen button to it and checking that its click recent works) :

@inherits LayoutComponentBase
@rendermode InteractiveServer
<RadzenComponents @rendermode="InteractiveServer" />

<RadzenLayout>
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" />
            <RadzenLabel Text="Header" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar @bind-Expanded="@sidebar1Expanded">
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="Home" Icon="home" />
            <RadzenPanelMenuItem Text="Users" Icon="account_box" />
        </RadzenPanelMenu>
        <div class="rz-p-4">
            Sidebar
        </div>
    </RadzenSidebar>
    <RadzenBody>
        <div class="rz-p-4">
            Body
        </div>
    </RadzenBody>
    <RadzenFooter>
        Footer
    </RadzenFooter>
</RadzenLayout>

@code {
    bool sidebar1Expanded = true;
}

But when I ran this code, I am getting this error:

InvalidOperationException: Cannot pass the parameter 'Body' to component 'MainLayout' 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.

Is there any project in which you used the layout component as the main layout? I tried to study your demo, but in that demo, the layout is not the main layout of the application.

if not, what other changes should I make to the project to use radzen layout in the MainLayout of the project?

2

It is the MainLayout of the application: radzen-blazor/RadzenBlazorDemos/Shared/MainLayout.razor at master · radzenhq/radzen-blazor · GitHub

The exception means that a component with @rendermode set cannot have child content. This is by Microsoft design. Either remove the @rendermode from RadzenLayout or create a new Blazor application which has interactivity enabled globally - usually via <Routes @rendermode="InteractiveServer" /> in App.razor.

3

Thanks for your reply. I will study the code again to see if I can understand what is wrong with my code.
Based on your suggestion, I changed the base project and added interactivity to the app.razor as follows:

<!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="testlayout.styles.css" />
   <link rel="icon" type="image/png" href="favicon.png" />
   <RadzenTheme Theme="material" @rendermode="InteractiveAuto" />
   <HeadOutlet />
  
</head>

<body>
   <Routes />
   <script src="_framework/blazor.web.js"></script>
   <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
   <Routes @rendermode="InteractiveServer" />
</body>

</html>

and removed the interactivity from the mainlayout.razor:

@inherits LayoutComponentBase

<RadzenComponents @rendermode="InteractiveServer" />

<RadzenLayout>
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" />
            <RadzenLabel Text="Header" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar @bind-Expanded="@sidebar1Expanded">
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="Home" Path="/" Icon="home" />
            <RadzenPanelMenuItem Text="Users" Path="/Weather" Icon="account_box" />
        </RadzenPanelMenu>
        <div class="rz-p-4">
            Sidebar
        </div>
    </RadzenSidebar>
    <RadzenBody>
        <div class="rz-p-4">
            Body
        </div>
    </RadzenBody>
    <RadzenFooter>
        Footer
    </RadzenFooter>
</RadzenLayout>

@code {
    bool sidebar1Expanded = true;
}

Now the layout is shown, but there is no interactivity. When clicking on any page, the target page is not shown (home or weather). also when clicking on the sidebar icon, it doesn't hide the sidebar. When clicking on a menu item, the effect of a click appears (so the CSS is working), but there is no interactivity.

Any idea what is wrong here?

4

No. The code seems correct. Make sure interactivity is properly enabled for the entire application. Refer to the official documentation: ASP.NET Core Blazor render modes | Microsoft Learn

5

I did change the position of <Routes @rendermode="InteractiveAuto" /> and bring it before <Routes /> and now it seems that it is working.
the source of app.razor is as follows:

<!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="testlayout.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <RadzenTheme Theme="material" @rendermode="InteractiveAuto" />
    <HeadOutlet />
   
</head>

<body>
    <Routes @rendermode="InteractiveAuto" />
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>

</body>

</html>

also, I made a bit of changes to the MainLayout.razor so it shows the pages on the body section properly.

@inherits LayoutComponentBase

<RadzenComponents @rendermode="InteractiveServer" />

<RadzenLayout>
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" />
            <RadzenLabel Text="Header" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar @bind-Expanded="@sidebar1Expanded">
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="Home" Path="/" Icon="home" />
            <RadzenPanelMenuItem Text="Users" Path="/Weather" Icon="account_box" />
        </RadzenPanelMenu>
        <div class="rz-p-4">
            Sidebar
        </div>
    </RadzenSidebar>
    <RadzenBody>
        <div class="rz-p-4">
            @Body
        </div>
    </RadzenBody>
    <RadzenFooter>
        Footer
    </RadzenFooter>
</RadzenLayout>
 
@* <button @onclick="ButtonClicked">Click Me9999</button> *@
@code {
    bool sidebar1Expanded = true;
    
}
6

You shouldn't have <Routes /> twice though. I've missed it in the previous post. Keep only the one that has @rendermode set.

7

Thanks
It solved my problem