[Blazor] Add event to NavigationManager to prevent navigating away from page

[mrpmorris]

Please provide a way of allowing the coder to prevent a page navigation.

This could be via an event in NavigationManager, or the current component implementing a new ICanDeactivateComponent type of interface - preferably both.

@SteveSandersonMS requested an example app from another APS framework that allows code to prevent the user navigating away from the current page when clicking Back on the browser history.

1. Download https://github.com/mrpmorris/candeactivate-angular
2. run ng serve
3. Click the Contact link
   Click the browser's history back button

[javiercn]

@mrpmorris thanks for contacting us.

This is not something we can do in Blazor since the model for server-side Blazor is asynchronous and by the time an event reaches the server the location has already changed.

[mkArtakMSFT]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[mrpmorris]

@javiercn It is asynchronous in Angular too - https://angular.io/api/router/CanDeactivate

"Do you want to save your changes" is a very common requirement and is supported asynchronously by

• Angular
• React
• Vue
• Ember

Perhaps you could cancel by default, run async code, and then actually perform the navigation if permitted? Just guessing how they do it.

[nvmkpk]

This is a reasonable ask.

@javiercn,
For server side blazor, the navigation may have happened but the new page render cannot happen without talking to server.

For blazor WebAssembly, it can be implemented very easily. But rather than through NavigationManager or custom interface, I would like to see this implemented through a simple virtual method in base component class.

[mrpmorris]

@nvmkpk it can be achieved without allowing the navigation at all.

[shawty]

AureliaJS manages this in it's router, don't know the exact details, as I've never really had any need to examine the code, but they manage it, and can prevent it, so it's definitely doable.

I also think that for a long time the web has been missing this kind of event in a page. I was just helping someone out in the CEFSharp room a few days ago, who was looking for a "Page closing" type of handler to shut down a mutation observer after he was finished with it.

We have half a dozen or more ways to know when/how a page and all it's dependents are loading, but we don't have a reliable way to track when a page is closing, and IMHO I think this is one of the primary reasons we see so many memory/GC related errors in browser apps, simply because there's no good hooks for cleaning stuff up.

[simonziegler]

This would be very helpful. I'm presently having to do this long hand.

[shawty]

As I've been informed today, chrome browser has a "window.unload" event implemented already, even though under the W3C it's still just considered a "working draft", I can't confirm as of yet if this (Or any of the UI events working draft items) are implemented here or any other browsers, it would however make sense to me that a suitable "everything is closing" event should be possible on the back of this event, and possibly others, either now or in the future.

[zHaytam]

Perhaps you could cancel by default, run async code, and then actually perform the navigation if permitted? Just guessing how they do it.

Sounds like a good approach, I'm not sure why wouldn't this be possible in Blazor too.

[StevenTCramer]

We won't let any of these other frameworks show us up.

"You have unsaved changes are you sure you want to exit?" kind of functionality I am sure we can get in Blazor.

[SteveSandersonMS]

Thanks for all the feedback here. It does sound like there are some options for us to investigate about how it could be achieved.

In terms of timeline, this won't be in .NET 5 because we're already fully committed to other feature and perf work. If someone finds a really small and simple implementation then we'd be open to a PR.

[MariovanZeist]

@SteveSandersonMS I have created an implementation. I think it's small and simple, (But I could be biased). And I am in the process of creating some e2e tests, but have some problems getting the e2e tests to run consistently. (getting some selenium errors)
I will create a PR as soon as I have working e2e tests if that's ok.