最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin4浏览0评论

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?

Share Improve this question asked Mar 17, 2020 at 19:16 whiskytangofoxtrotwhiskytangofoxtrot 9873 gold badges14 silver badges46 bronze badges 1
  • 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
Add a ment  | 

2 Answers 2

Reset to default 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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论