How to navigate to a new page in layout component

Radzen.Blazor Components
1

I have a page with Radzen layout similar to what is presented in the demo.

@page "/"
@rendermode InteractiveServer
@inject NavigationManager NavigationManager

<RadzenLayout>
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" />
            <RadzenLabel Text="SEEAI" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar @bind-Expanded="@sidebar1Expanded">
        <RadzenPanelMenu>

            <RadzenPanelMenuItem Text="Home1" Icon="home" Click="@(() => NavigateTo("/weather"))">
            </RadzenPanelMenuItem>

            <RadzenPanelMenuItem Text="Users" Icon="account_box" />
        </RadzenPanelMenu>
        <div class="rz-p-4">
            Sidebar
        </div>
    </RadzenSidebar>
    <RadzenBody>
        Body
    </RadzenBody>
    <RadzenFooter>

    </RadzenFooter>
</RadzenLayout>

@code {
    bool sidebar1Expanded = true;
    private void NavigateTo(string path)
    {
        NavigationManager.NavigateTo(path);
    }
}

The above code will go to the weather page and not display the weather page inside the body section of the layout. How can I show the weather page in the body section of radzen layout?

2

RadzenLayout is more like responsive container and if you are interested to know how to use Blazor layouts you can check the official Microsoft documentation:

3

Thanks. I tried to use it as my mainlayout without any success.
I changed the MainLyaour.Razor to this code:

@inherits LayoutComponentBase

<RadzenLayout>
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" />
            <RadzenLabel Text="Layout" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar @bind-Expanded="@sidebar1Expanded">
        <RadzenPanelMenu>

            <RadzenPanelMenuItem Text="Home" Icon="home" href="dashboard")">
            </RadzenPanelMenuItem>

            <RadzenPanelMenuItem Text="Users" Icon="account_box" href="allusers")" />
        </RadzenPanelMenu>
        <div class="rz-p-4">
            Sidebar
        </div>
    </RadzenSidebar>
    <RadzenBody>
        @Body
     </RadzenBody>
    <RadzenFooter>
    </RadzenFooter>
</RadzenLayout>

@code {
    bool sidebar1Expanded = true;
}

When I use this layout,
1- There is no interactivity so the sidebar is not hidden (the mouseclick of <RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" /> is not working. Searching the internet, I came across this post, which indicates that if I want interactivity, I need to set the interactivity for all pages and I can not change it per component (In .NET8 Blazor WebApp can MainLayout.cs be interactive without a global render mode in App.razor? · dotnet/aspnetcore · Discussion #51491 · GitHub)
2- When I click on any menu items (AllUsers or Home), that page is not shown in the body section. When the application starts, it shows my Home component, but clicking on menu items doesn't work.

Is there any sample project that uses the layout component as the mainlayout of the project so I can use it as the base for understanding how to use this component?

4

Our demos are example project where you can find everything you need, how to enable interactivity, how to use Blazor layouts, etc.

5

Thank you, I studied how the project works and tried to copy its structure to my project. I can now navigate the pages and use the menu items and @Body but still, the page activity doesn't work. the mainLayout page content is as follow:

@using Microsoft.AspNetCore.Components
@using Radzen.Blazor
@inherits LayoutComponentBase

@inject ThemeService ThemeService
@inject QueryStringThemeService QueryStringThemeService
@inject NavigationManager UriHelper
@inject IJSRuntime JSRuntime
@inject TooltipService TooltipService
@inject DialogService DialogService

@using Test.Components.Pages
@using Test.Components.Pages.User

<RadzenComponents />
<RadzenLayout>
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" />
            <RadzenLabel Text="Test" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar @bind-Expanded="@sidebar1Expanded">
        <RadzenPanelMenu>

            <RadzenPanelMenuItem Text="Home" Icon="home" Path="/" )">
            </RadzenPanelMenuItem>

            <RadzenPanelMenuItem Text="Users" Icon="account_box" Path="AllUsers" )" />
        </RadzenPanelMenu>
        <div class="rz-p-4">
            Sidebar
        </div>
    </RadzenSidebar>
    <RadzenBody>
        @Body
     </RadzenBody>
    <RadzenFooter>

    </RadzenFooter>
</RadzenLayout>

@code {
    bool sidebar1Expanded = true;
}

I have these codes in my Program.cs

 // Add services to the container.
 builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents()
     .AddInteractiveWebAssemblyComponents();
 builder.Services.AddDbContext<TestDBContext>(options =>
 {

     options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection"));

 });
 // Add Scoped service (optional for server-side Blazor)
 builder.Services.AddScoped<TestDBContext>();
 builder.Services.AddScoped<UserRepository>();

 builder.Services.AddRadzenComponents();
 builder.Services.AddRadzenQueryStringThemeService();
 builder.Services.AddScoped<Radzen.DialogService>();
 builder.Services.AddScoped<Radzen.NotificationService>();
 builder.Services.AddScoped<Radzen.ThemeService>();
 var app = builder.Build();

and also on my webassemly program.cs, I have:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
           
builder.Services.AddRadzenComponents();
builder.Services.AddScoped<Radzen.DialogService>();
builder.Services.AddScoped<Radzen.NotificationService>();
builder.Services.AddScoped<Radzen.ThemeService>();
await builder.Build().RunAsync();

If I try to define the render mode (@rendermode InteractiveServer), I am getting this error:

nvalidOperationException: Cannot pass the parameter 'Body' to component 'MainLayout' with render mode 'InteractiveServerRenderMode'. This is because the parameter is of the delegate type 'Microsoft.AspNetCore.Components.RenderFragment', which is arbitrary code and cannot be serialized.

It should be noted that I am getting interactivity on other pages without any problem, but not on main layout page

6

The exception explains what the problem is. I recommend reviewing the Blazor rendering mode documentation.