So frustrated. Please help.I have a blazor we app, created using MudBlazor template Interactive Render Mode = Auto, and Interactivity Location = Per page/component.
I have a scenario where I need to make 2 separate layout file.
- WebLayout.razor (which is in server side project and blank)
- AppLayout.razor (which is in client side project and has Mudblazor components)
Here is the file structure of my project
also I have changed the layout in the _Imports.razor file in the pages (client side) folder like this
@using OctuFit.WebApp.Client.Layout@layout AppLayoutThe AppLayout page looks like this
@inherits LayoutComponentBase<MudPopoverProvider /><MudDialogProvider /><MudSnackbarProvider /><MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" /><MudLayout><MudAppBar Elevation="1"><MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" /><MudSpacer /><MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" /><MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" /></MudAppBar><MudDrawer @bind-Open="_drawerOpen" Elevation="2"><MudDrawerHeader><MudText Typo="Typo.h5" Class="mt-1">Application</MudText></MudDrawerHeader><NavMenu /></MudDrawer><MudMainContent> @Body</MudMainContent></MudLayout><div id="blazor-error-ui" data-nosnippet> An unhandled error has occurred.<a href="." class="reload">Reload</a><span class="dismiss">🗙</span></div>@code { private bool _drawerOpen = true; private bool _isDarkMode = false; private MudTheme? _theme = null; protected override void OnInitialized() { base.OnInitialized(); _theme = new() { PaletteLight = _lightPalette, PaletteDark = _darkPalette, LayoutProperties = new LayoutProperties() }; StateHasChanged(); } private void DrawerToggle() { _drawerOpen = !_drawerOpen; StateHasChanged(); } private void DarkModeToggle() { _isDarkMode = !_isDarkMode; StateHasChanged(); } private readonly PaletteLight _lightPalette = new() { Black = "#110e2d", AppbarText = "#424242", AppbarBackground = "rgba(255,255,255,0.8)", DrawerBackground = "#ffffff", GrayLight = "#e8e8e8", GrayLighter = "#f9f9f9", }; private readonly PaletteDark _darkPalette = new() { Primary = "#7e6fff", Surface = "#1e1e2d", Background = "#1a1a27", BackgroundGray = "#151521", AppbarText = "#92929f", AppbarBackground = "rgba(26,26,39,0.8)", DrawerBackground = "#1a1a27", ActionDefault = "#74718e", ActionDisabled = "#9999994d", ActionDisabledBackground = "#605f6d4d", TextPrimary = "#b2b0bf", TextSecondary = "#92929f", TextDisabled = "#ffffff33", DrawerIcon = "#92929f", DrawerText = "#92929f", GrayLight = "#2a2833", GrayLighter = "#1e1e2d", Info = "#4a86ff", Success = "#3dcb6c", Warning = "#ffb545", Error = "#ff3f5f", LinesDefault = "#33323e", TableLines = "#33323e", Divider = "#292838", OverlayLight = "#1e1e2d80", }; public string DarkLightModeButtonIcon => _isDarkMode switch { true => Icons.Material.Rounded.AutoMode, false => Icons.Material.Outlined.DarkMode, };}The UI is rendering fine, but the issue is interactivity.The collapse menu is not working. Nothing is working on the Layout page.If I move it to the separate component page and mark it as @rendermode InteractiveAssembly, everything works but the I cannot pass the body to it (I get the json serialzation error).
Any help here please?How can I move my code to the component to make it reactive and pass the body as well.I am struggling from 2 days to find a solution.
Any help will be appreciated.
Regards
Edit 1: I got the idea that when we choose the interactivity per page/component, everything is treated as statically rendered unless we mention that explicitly in the project.Then what is the solution my problem? Where should I put the @Body and the main menu code?