Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4031

MainLayout and Sidebar rendermode in Blazor

$
0
0

My application is built with .NET8 in Blazor. The configuration in the Program.cs is like

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

I want to have a nice sidebar for it. I created a SidebarComponent that generates the sidebar quite nicely. This is the code of the component

@inject NavigationManager _navigationManager@rendermode InteractiveAuto<aside id="sidebar" class="sidebar break-point-sm has-bg-image @(_isCollapsed ? "collapsed" : "") @(_isToggled ? "toggled" : "")"><a @onclick="BtnCollapseClicked" id="btn-collapse" class="sidebar-collapser"><i class="ri-arrow-left-s-line"></i></a><div class="image-wrapper"></div><div class="sidebar-layout"><div class="sidebar-header"><div class="pro-sidebar-logo"><div>P</div><h5>Pro Sidebar</h5></div></div><div class="sidebar-content"><nav class="menu open-current-submenu"><ul><li class="menu-header"><span>BLAZOR</span></li>                    @foreach (var menuItem in standardItems)                    {<MenuItemComponent MenuItem="@menuItem" MenuItemClickCallback="MenuItemClick" />                    }</ul></nav></div></div></aside>@code {    private bool _isCollapsed { get; set; } = false;    private bool _isToggled { get; set; } = false;    List<MenuItem> standardItems = SidebarData.GetStandardMenuItems();    List<MenuItem> generalMenuItems = SidebarData.GetGeneralMenuItems();    public void BtnToggleClicked()    {        _isToggled = !_isToggled;        StateHasChanged();    }    public void MouseClickedInOverlay()    {        if (_isToggled)            _isToggled = false;        generalMenuItems.ForEach(x => x.IsOpened = false);        StateHasChanged();    }   // Omitted}

Then in the MainLayout, I added

<div class="layout has-sidebar fixed-sidebar fixed-header"><SidebarComponent @ref="sideBarComponent"/><div @onclick="@(e => sideBarComponent?.MouseClickedInOverlay())" id="overlay" class="overlay"></div><div class="layout"><!-- Omitted --></div></div>

When the application starts, I get this errorSystem.InvalidCastException: 'Unable to cast object of type'Microsoft.AspNetCore.Components.Endpoints.SSRRenderModeBoundary' totype 'HypnoPlatform.Client.Pages.Shared.Sidebar.SidebarComponent'.'

enter image description here

How can I call methods from the MainLayout to the SidebarComponent?


Viewing all articles
Browse latest Browse all 4031

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>