I am using the .NET 8 web app template. I simply want for the layout of my project to not be reloaded when a new routable page is accessed. The layout contains a nav menu tree view which should not be reset.
I noticed even with the base template the MainLayout.razor reloads with each new page. I am sure there must be a way to keep the layout consistent between routable pages but i have searched all over with no luck.
Further if this is possible, is it possible to do this with multiple layouts? I.e a few pages keep a layout consistent between them and a few other pages keep another layout consistent between them? Or is this asking for too much?
I am using the server interactivity. Here is my program.cs:
using BlazorApp2.Components;var builder = WebApplication.CreateBuilder(args);// Add services to the container.builder.Services.AddRazorComponents() .AddInteractiveServerComponents();var app = builder.Build();// Configure the HTTP request pipeline.if (!app.Environment.IsDevelopment()){ app.UseExceptionHandler("/Error", createScopeForErrors: true); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts();}app.UseHttpsRedirection();app.UseStaticFiles();app.UseAntiforgery();app.MapRazorComponents<App>() .AddInteractiveServerRenderMode();app.Run();Routes.razor:
<Router AppAssembly="typeof(Program).Assembly"><Found Context="routeData"><RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" /><FocusOnNavigate RouteData="routeData" Selector="h1" /></Found></Router>App.razor:
<!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="BlazorApp2.styles.css" /><link rel="icon" type="image/png" href="favicon.png" /><HeadOutlet /></head><body><Routes /><script src="_framework/blazor.web.js"></script></body></html>MainLayout.razor:
@inherits LayoutComponentBase<div class="page"><div class="sidebar"><NavMenu /></div><main><div class="top-row px-4"><a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a></div><article class="content px-4"> @Body</article></main></div><div id="blazor-error-ui"> An unhandled error has occurred.<a href="" class="reload">Reload</a><a class="dismiss">🗙</a></div>