I've been fiddling with an empty .NET 9 Blazor Server project that has MudBlazor installed. I used the Mud Blazor Web App in this case so the Setup is standard without any changes. It's using Interactive Server globally.
I created this empty project due to an issue in my main project related to the layouts that I wanted to test in an empty project.
The problem
When changing to different layouts, for example from the home page that uses MainLayout.razor, and to a different page that uses the OtherLayout.razor (both identical), the interactivity for MudBlazor components kind of just stop working. The layouts drawer toggle still works without a problem. So only the page experiences the issue.
MainLayout.razor:
@inherits LayoutComponentBase<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" /><MudPopoverProvider /><MudDialogProvider /><MudSnackbarProvider /><MudLayout><MudAppBar Elevation="1"><MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" /><MudText Typo="Typo.h5" Class="ml-3">Application</MudText><MudSpacer /><MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" /></MudAppBar><MudDrawer id="nav-drawer" @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2"><NavMenu /></MudDrawer><MudMainContent Class="mt-16 pa-4"> @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 = true; private MudTheme? _theme = null; private void DrawerToggle() { _drawerOpen = !_drawerOpen; }}OtherLayout.razor:
@inherits LayoutComponentBase<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" /><MudPopoverProvider /><MudDialogProvider /><MudSnackbarProvider /><MudLayout><MudAppBar Elevation="1"><MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" /><MudText Typo="Typo.h5" Class="ml-3">Other Layout</MudText><MudSpacer /><MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" /></MudAppBar><MudDrawer id="nav-drawer" @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2"><NavMenu /></MudDrawer><MudMainContent Class="mt-16 pa-4"> @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 = true; private MudTheme? _theme = null; private void DrawerToggle() { _drawerOpen = !_drawerOpen; }}The component not working is a normal MudSelect:
@page "/other"<MudSelect @bind-Value="stringValue" Label="Select fast-food" HelperText="String" Placeholder="Please Select" AdornmentIcon="@Icons.Material.Filled.Fastfood" AdornmentColor="Color.Primary"><MudSelectItem Value="@("Pizza")" Disabled="true">Pizza (Disabled)</MudSelectItem><MudSelectItem Value="@("Burger")">Burger</MudSelectItem><MudSelectItem Value="@("Hotdog")">Hot Dog</MudSelectItem></MudSelect>@code { private string stringValue { get; set; }}Ultimately, on the first run of the project (or refresh) in the main layout, if I go to the OtherLayout page the select will work as intended, after navigating back to the mainlayout page, then forward again to the other page (using OtherLayout), then the select is no longer working.
program.cs:
builder.Services.AddRazorComponents() .AddInteractiveServerComponents();app.MapRazorComponents<App>() .AddInteractiveServerRenderMode();app.razor:
<body><Routes @rendermode="InteractiveServer" /><script src="_framework/blazor.web.js"></script><script src=@Assets["_content/MudBlazor/MudBlazor.min.js"]></script></body>Can anyone guide me in the right direction to get this working properly?
Thanks to anyone that could provide some insight or direction I should look into!