Expose location changing event for NavigationManger

[Postlagerkarte]

The NavigationManager exposes

LocationChanged | An event that fires when the navigation location has changed.

but it does not expose a LocationChanging event.

Such an event that occurs before navigation takes place is very useful because it allows the previous view to prepare for its deactivation, for example, to display a warning, cancel navigation or silently save changes.

Can you provide such a feature or is there already another way to achieve the above?

[javiercn]

Thank you for your feature request @Postlagerkarte.

We'll consider this feature during the next release planning period and update the status of this issue accordingly.

[Tiberriver256]

Not sure if this is what the OP was after with LocationChanging but it would be nice to have LocationChangeStart and LocationChangeEnd events. The use case for me would be to display a little progress bar to the user while navigation is happening.

[DanielHWe]

It would be nice to cancel the navigation to. Use Case is that the user has unsaved changes and show an error to him so he is not leaving without save.

[Postlagerkarte]

I hope that the team decides to give us a full set of methods, properties, and events to support navigation including easy access to the navigation history.

Such an improved version of the NavigationManager would certainly allow tracking the lifetime of a navigation via events like:

Navigating
Navigated
NavigationProgress
NavigationFailed
NavigationStopped

Basically, hoping for an improved/adjusted version of the NavigationService 😃

[ShaunCurtis]

Yes, it's great being able to develop an SPA application, but when the user can navigate away with changes unsaved, and no way to warn them, that's a serious flaw. You can use the javascript window.history.forward() trick in the _Hosts.html file to force the user back, but that refreshes the page losing all unsaved changes. For critical editing, I'm starting to use a state service to preserve changes, but it's a bit of a cludge to get round the problem.

[aaronhudon]

If anyone can post suggestions on how best to implement this in SSB without waiting for Microsoft, please do so here.

[lucianotres]

And would be nice to have a way to handle history stack or just a simple "location.replace(url);"
Only way I found to do this currently, was with JS interop.
js like this:

window.controles_interop = {
    ...
    location_replace: function (url) {
        window.location.replace(url);
    }
};

then call:
await JSRuntime.InvokeVoidAsync("controles_interop.location_replace", $"/protocolo/{_id.Value}");

I mean something like this, so more practical:
_nav.NavigateTo($"/protocolo/{_id.Value}", replace: true);

[javiercn]

@lucianotres We are adding that in a future update I think, but you don't need anything special to do that today, you can simply call JSRuntime.InvokeAsync("location.replace", url) and that will work

[OlegQu]

Are there any news about this issue's status?
May be there are some possibilities to override or extend functions from EventDelegator.ts or NavigationManager.ts or use own NavigationManager.cs realization with scripts duplicating above default? Sorry, if this question sounds kind of... elementary - i'm still novice at coding.

[ShaunCurtis]

Hi,
I've been flat out on a project where I've resolved most of the issues I had. I'm just finishing testing and hoping to publish something covering the subject later this week/next week. My basic approach has been:

1. Use the window.onbeforeunload event to warn the user that they are leaving the "application". You don't much control over this, but it works and users I have tested it on got the message.
   Place it in the _Host.cshtml.
2. Use a scoped data service class to track the condition (dirty/clean) of the edited record.
3. Use a scoped user session service class to temporarily hold page routing data while transitioning between routes. This also helps on the transition from New to Edit when first saving a record.
4. Customize the standard router to check the save state of the record and either navigate or instruct the current page that the user is trying to leave and an "Are You Sure/Unsaved Data" action is required. Note that the NavigationManager only catches navigation changes and raises the LocationChanged event, the router registers with this event and does the actual work.

The key here is to get your head around what's actually going on, and what the various classes/objects are up to.

With this approach I no longer need to tamper with the back/forward history - the router handles "In Application" page changes and onbeforeunload warns the user if they are trying to navigate away.

Note that creating a customized version of the router isn't trivial. You will need to make copies of various other classes that are namespace restricted.

I'll put a post here when I have something polished enough to publish.