In Blazor Server-Side how can I detect if the user tries to navigate off of the current page

Question

I am working on an ASP.NET Core 3.1 Blazor Server-Side application that has a Blazor component with an EditForm. I want to warn the user that they have unsaved data if they try to navigate off of the page (i.e. click the browser back button or make a Nav menu selection that loads another page within the same application).

I have read posts about using the javascript window.onbeforeunload but I was not sure if invoking javascript on a Blazor server-side would mess up the SignalR connection.

I have also read posts about using a CircuitHandler but I wan't sure if the SignalR circuit changed if the user just moves to a different page in the same application.

Any recommendations on how to best handle this requirement?

Urine

Easy way is to set and unset window.onbeforeunload via JS Inetrop. I wrote a lib time ago, at this time is deprecated but you can see the idea: github.com/ctrl-alt-d/BlazorConfirm – Chap

Answer 1

I'm guessing it's intentional to only do this for programmatic navigation, since it wouldn't be possible to block navigation that occurs when people click on tags. For Blazor Server, the logic has to run asynchronously so the JS event can't be cancelled. Event for Blazor WebAssembly or any JS-based SPA framework, it doesn't make sense to block clicks on tags, since browsers won't always honour your intentions (e.g., if a user right-clicks and chooses Open in new tab).

SteveSandersonMS

See also this and this

As you can see, not much can be done in this respect. However, you should design your pages in a way that can give you as much control over the users' actions as possible, including the good idea to save data entered in the forms in the local storage, and retrieve it in such cases as the user exit your app abruptly, etc.

Note: You may use JSInterop with SignalR. No problem.

Note: A CircuitHandler handles the life cycle of a websocket connection, and may only partially suits your requirements.

Abidjan

Answer 2

Blazor in .NET 7 came out with new features that effectively handle location changing.

Check this link: https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0#handleprevent-location-changes

For a brief overview, Steven Sanderson made a pretty good demonstration in this video: https://youtu.be/evW4Gj4sHsk?t=711

It's even possible to manipulate the browser navigation history state: https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0#navigation-history-state

Weixel

Is it possible to detect if user has refresh the page by himself? I have a Dispose() method in my blazor component which basically gets called when user leaves the page, closes the browser and refresh the page (F5). I want to capture this event, I don't want to implement certain logic if user has refreshed the page intentionally. – Riposte