在 Blazor 服务器端中，如何检测用户是否尝试离开当前页面

Question

我正在开发一个 ASP.NET Core 3.1 Blazor 服务器端应用程序，该应用程序具有一个带有 EditForm 的 Blazor 组件。我想警告用户，如果他们试图离开页面（即单击浏览器后退按钮或进行导航菜单选择以在同一应用程序中加载另一个页面），他们有未保存的数据。

我已阅读有关使用 javascript window.onbeforeunload 的帖子，但我不确定在 Blazor 服务器端调用 javascript 是否会弄乱 SignalR 连接。

我还阅读了有关使用 CircuitHandler 的帖子，但我不确定如果用户只是移动到同一应用程序中的不同页面，SignalR 电路是否会发生变化。

有关如何最好地处理此要求的任何建议？

Answer 1

我猜想只为程序化导航执行此操作是有意的，因为不可能阻止人们单击标签时发生的导航。对于 Blazor Server，逻辑必须异步运行，因此无法取消 JS 事件。对于 Blazor WebAssembly 或任何基于 JS 的 SPA 框架的事件，阻止对标签的点击是没有意义的，因为浏览器并不总是尊重您的意图（例如，如果用户右键单击并选择在新选项卡中打开）。另请参阅此和此如您所见，在这方面可以做的不多。但是，您应该以一种可以让您尽可能多地控制用户操作的方式设计您的页面，包括将表单中输入的数据保存在本地存储中的好主意，并在用户等情况下检索它突然退出您的应用程序等。注意：您可以将 JSInterop 与 SignalR 一起使用。没问题。注意：CircuitHandler 处理 websocket 连接的生命周期，可能仅部分满足您的要求。