1
0

Apply global server side rendering, but exclude certain routable components. (.NET 9 feature)

This commit is contained in:
Kevin Matsubara 2025-03-25 15:01:37 +01:00
parent b23f7bac27
commit 1d7bb19c40
4 changed files with 19 additions and 4 deletions

View File

@ -9,13 +9,23 @@
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="ServerManagement.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
<HeadOutlet @rendermode="@PageRenderMode"/>
</head>
<body>
@* Note that @rendermode="InteractiveServer" can be used here on Routes to make it global. But this is not recommended by Microsoft. See: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0 *@
<Routes/>
<Routes @rendermode="@PageRenderMode"/>
<script src="_framework/blazor.web.js"></script>
</body>
</html>
@code {
@* Use for .NET 9, and make interactivity global in Routes and HeadOutlet components in App.razor file. *@
@* See: https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-9.0?view=aspnetcore-9.0#add-static-server-side-rendering-ssr-pages-to-a-globally-interactive-blazor-web-app *@
[CascadingParameter]
private HttpContext HttpContext { get; set; } = default!;
private IComponentRenderMode? PageRenderMode
=> HttpContext.AcceptsInteractiveRouting() ? InteractiveServer : null;
}

View File

@ -1,6 +1,8 @@
@page "/servers/add"
@using System.ComponentModel.DataAnnotations
@attribute [ExcludeFromInteractiveRouting]
@inject NavigationManager NavigationManager
<h3>Add server</h3>

View File

@ -1,6 +1,8 @@
@page "/servers/{id:int}"
@* Route constraints: https://learn.microsoft.com/en-us/aspnet/core/fundamentals/routing?view=aspnetcore-9.0#route-constraints *@
@attribute [ExcludeFromInteractiveRouting]
@inject NavigationManager NavigationManager
<h3>Edit server</h3>

View File

@ -14,7 +14,7 @@
<div class="col">
<div class="card">
<img src="@($"/images/{city}.png")" class="card-img-top" alt="@city")">
<img src=@($"/images/{@city}.png") class="card-img-top" alt="@city">
<div class="card-body">
<button class="btn btn-primary">@city</button>
</div>
@ -25,10 +25,11 @@
</div>
<br/>
<ServerComponent @rendermode="InteractiveServer"></ServerComponent>
<ServerComponent></ServerComponent>
<br/>
<a href="@($"/servers/add")" class="btn btn-primary">Add</a>
<br/>
<ul>
@foreach(var server in servers)
{