I am currently developing an app using MAUI Blazor. On one of my pages, I have a back button due to the navbar being hidden on this page and trying to cater for platforms that don't have a back button. This page can be accessed from a few areas so I want the button to go back to the previous page and not just to a specific page.
I cannot find any way of getting the previous page from the history or something. I'm using Blazor navigation for this with NavigationManager but cannot find any properties anywhere or an alternative method of NavigateTo which supports going backwards.
Any help would be greatly appreciated.
I considered passing the current URI through as a parameter to the page however this wouldn't work to my knowledge as the Back button and it's function doesn't actually sit on the page but instead sits on the page's layout page.
I managed to solve this on my own eventually, granted it's not the cleanest solution however it does work. I did a bit of research into Cascading Parameters which may also be a solution however I don't understand this feature enough yet to make use of it.
In my case, I have a dependency injected class as a singleton which I use to transfer some common data between my pages. I simply added an extra property to this class for the previous URI. When I wanted to track the previous URI, I simply made sure the class was injected on that page and altered the property value before navigating away.
Example page to track current URI to be navigated back to
@page "/"
@inject Models.FormSelectModel model
@inject Models.GlobalModel global
<div class="row gx-4 mt-2">
@foreach (DTO.IForm form in FormList)
{
<div class="col-12 col-sm-6 mb-3" @onclick="() => NavigateToForm(form)" >
<div class="formSelector p-3 border" style="border-radius:10px;">
<h4>@form.FormType</h4>
<span>@form.FormDescription</span>
</div>
</div>
}
</div>
@code {
List<DTO.IForm> FormList { get; set; } = new List<DTO.IForm>();
public async Task NavigateToForm(DTO.IForm form)
{
model.selectedForm = form;
model.callOffForm = null;
global.PreviousUri = "/";
await Task.Run(() => navManager.NavigateTo($"/NewForm"));
}
}
Layout Page with Go Back Method
@inherits LayoutComponentBase
@using Microsoft.AspNetCore.Components.Authorization;
@inject Models.GlobalModel global
@inject AuthenticationStateProvider ASP
<div class="page">
<main>
<div class="top-row p-0">
<div class="row h-100 w-100 mx-0">
<div class="col align-self-center">
@if (navManager.Uri.Contains("NewForm"))
{
<a class="nav-link ms-0" @onclick=GoBack><i class="fa-solid fa-circle-left" style="color:#b89e25;font-size:200%;"></i></a>
}
</div>
<div class="col h-100 text-center">
<img style="object-fit:contain;height:100%;" src="Images/logo.png" />
</div>
<div class="col">
</div>
</div>
</div>
<article class="content px-4">
@Body
</article>
</main>
@if (!navManager.Uri.Contains("NewForm"))
{
<AuthorizeView>
<Authorized>
<NavMenu />
</Authorized>
</AuthorizeView>
}
</div>
@code {
private async Task Logout()
{
((ExternalAuthStateProvider)ASP).Logout();
await Task.Run(() => navManager.NavigateTo($"/Login"));
}
private async Task GoBack()
{
navManager.NavigateTo(global.PreviousUri ?? "/");
}
}
Dependency Injected in MauiProgram.cs
builder.Services.AddSingleton<GlobalModel>();