Table of Contents

MVVM Navigation

Blazing.Mvvm adds ViewModel-aware navigation on top of Blazor's NavigationManager. Instead of hard-coding route strings across your app, you can navigate by ViewModel type, abstraction, or key.

How navigation works

When MvvmNavigationManager is initialized as a singleton, it scans assemblies and caches the relationships between ViewModels and pages. Navigation then becomes a lookup from ViewModel metadata to a route.

Note

MvvmNavigationManager extends MVVM scenarios. It does not replace every use of Blazor's built-in NavigationManager.

Replace route-based NavLink usage with MvvmNavLink:

<div class="nav-item px-3">
    <MvvmNavLink class="nav-link" TViewModel="FetchDataViewModel">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
    </MvvmNavLink>
</div>

MvvmNavLink is based on Blazor's NavLink, but adds TViewModel and RelativeUri.

Inject MvvmNavigationManager and navigate by ViewModel type:

mvvmNavigationManager.NavigateTo<FetchDataViewModel>();

You can also pass route segments or query strings through relativeUri.

If your app depends on interfaces or abstract ViewModel types, you can navigate through those abstractions:

mvvmNavigationManager.NavigateTo<ITestNavigationViewModel>();

The same pattern works in markup:

<MvvmNavLink class="nav-link"
             TViewModel="ITestNavigationViewModel"
             Match="NavLinkMatch.All">
    <span class="oi oi-calculator" aria-hidden="true"></span>Test
</MvvmNavLink>

You can also append route data or query strings:

<MvvmNavLink class="nav-link"
             TViewModel="ITestNavigationViewModel"
             RelativeUri="?test=this%20is%20a%20MvvmNavLink%20querystring%20test"
             Match="NavLinkMatch.All">
    <span class="oi oi-calculator" aria-hidden="true"></span>Test + QueryString
</MvvmNavLink>

If you register keyed ViewModels, you can navigate by string key:

MvvmNavigationManager.NavigateTo("FetchDataViewModel");

Use MvvmKeyNavLink for keyed navigation in Razor:

<MvvmKeyNavLink class="nav-link"
                NavigationKey="@nameof(TestKeyedNavigationViewModel)"
                Match="NavLinkMatch.All">
    <span class="oi oi-calculator" aria-hidden="true"></span> Keyed Test
</MvvmKeyNavLink>

RelativeUri works here too for route data and query strings.

Fallback behavior

MvvmNavigationManager still supports normal NavigationManager string navigation internally, so you can mix MVVM-style navigation with standard Blazor routing where needed.

Edit this page