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 .
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntifery();
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="/" 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">