I am working on an ASP.NET Core 3.1 Blazor Server-Side application that has a Blazor ponent 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 remendations on how to best handle this requirement?

I am working on an ASP.NET Core 3.1 Blazor Server-Side application that has a Blazor ponent 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 remendations on how to best handle this requirement?

• javascript
• asp-core
• signalr
• blazor
• blazor-server-side

• 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./ctrl-alt-d/BlazorConfirm – dani herrera Commented Mar 17, 2020 at 20:26

2 Answers 2

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.

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

Check this link: https://learn.microsoft./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./en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0#navigation-history-state