Blazor: SPA Template
coding blazor dotnetcore
SPA means Single Page Application. In this context, taken literally, it beens that the Blazor app has only one razor page. Here is a way to use just one page but appears to have multiple pages through multiple paths and ASP.NET conditional coding.
Sample Repository
BlazorSPA
A template for a Blazor SPA, with multiple virtual pages.
A Single Page Application.
Demostrates using multiple paths to the one page.
NavMenu is just a menu with each item a different path to the same page.
eg:
@page "/"
@page "/Page/First"
@page "/Page/Second"
@page "/Page/Third"
Conditional HTML depending upon the path used.
@if (target == "")
{
<h2>Root</h2>
}
@if (target == "First")
{
<h2>First</h2>
}
@if (target == "Second")
{
<h2>Second</h2>
}
@if (target == "Third")
{
<h2>Third</h2>
}
Demonstrates use of the MyNavigationManager.LocationChanged event.
Also uses OnInitializedAsync handler as well as the OnInitialized event handler.
OnRendered event handler is also present as well as OnAfterRenderAsync.
The app is a Blazor WASM app with ASP.NET backend, Has PWA enabled.
The server has no special functionality at this stage.
See index.razor for the page coding here as on GitHub.
The following is needed to causes rerendering when the path changes but the page is the same:
void LocationChanged(object sender, LocationChangedEventArgs e)
{
string location = e.Location;
GetPageHeading(location);
StateHasChanged();
}
This requires the following hookup in OnInitializedAsync() or in OnInitialized()
protected override async Task OnInitializedAsync()
{
MyNavigationManager.LocationChanged += LocationChanged;
...
}
| Topic | Subtopic | |
| < Prev: | Blazor | A WASM app for presenting Sample Apps from an API Repository |
| This Category Links | ||
| Category: | Coding Index: | Coding |
| Next: > | .NETCore | appsettings.json |
| < Prev: | Nuget Packages 101 | Creating and using a local Nuget Package |
