时间戳

首页 > 解决方案 > 如何在 Blazor 中检测整页刷新/重新加载

blazor - 如何在 Blazor 中检测整页刷新/重新加载

问题描述

我正在尝试在 Blazor 中检测页面刷新，因此在刷新发生之前，我将一些数据保存到本地存储，我尝试了 Dispose，但是我获取要保存的数据的服务在此阶段不可用。我还尝试了 JavaScript 的 window.onbeforeunload 并在发生这种情况时调用 C# 方法，如下所示：

public static class SessionSaver
{
    [JSInvokable]
    public static Task SaveServicesToSession()
    {
        ViewDataService viewData = (ViewDataService)GetMeSomeServiceLocator.Instance.GetService(typeof(ViewDataService));           
        ProtectedBrowserStorage protectedBrowserStorage = (ProtectedBrowserStorage)GetMeSomeServiceLocator.Instance.GetService(typeof(ProtectedSessionStorage));
        protectedBrowserStorage.SetAsync("ViewData", viewData);
        protectedBrowserStorage.SetAsync("AuthModel", viewData.AuthModel);            
        return Task.FromResult("Success.");
    }
}

Javascript：

 window.onbeforeunload  = () => {
        DotNet.invokeMethodAsync('BlazorStore9', 'SaveServicesToSession')
            .then(message => { console.log(message); });
        }

Startup.cs：一个嵌套类：

 public static class GetMeSomeServiceLocator
    {
        public static IServiceProvider Instance { get; set; }
    }

在配置方法中：

GetMeSomeServiceLocator.Instance = app.ApplicationServices;

当我重新加载页面时调用 JsInvokable 但我收到错误：

System.InvalidOperationException：'无法从根提供程序解析范围服务'BlazorStore9.Services.ViewDataService'。'

有什么办法可以解决这个问题吗？

标签： blazorblazor-server-side

解决方案

根据 @Mister Magoo 和 @mz1378 的评论以及这个 Microsoft 文档，我创建了一个适合我的解决方案。要从 HTML 属性（如 onBeforeUnload）调用 C# 函数，您必须使用 JavaScript。

让我们创建一个像这样命名的 java 脚本函数callDotNetFunctionFromJS（我在一个名为的文件中创建了我的函数，该文件callDotNetFunctionFromJS.js保存在wwwroot客户端项目的文件夹中）：

function callDotNetFunctionFromJS(functionName) {
    DotNet.invokeMethod('YourProjectName.Client', functionName);
}

然后创建您要调用的函数：

[JSInvokable]
public static void PageAboutToBeReloaded()
{
    Console.WriteLine("Page will be refreshed");
}

重要提示：不要忘记添加[JSInvokable]，否则无法从 java 脚本函数调用 C# 函数。该方法也必须是静态的。如果您的方法是非静态的，请在下面查看我的编辑。

在您的 .razor 文件中，让我们添加如下内容：

<body onbeforeunload="callDotNetFunctionFromJS('PageAboutToBeReloaded')"></body>

最后但并非最不重要的一点是，您必须将对 .js 文件的引用添加到index.html：

<script src="callDotNetFunctionFromJS.js"></script>

现在，如果您刷新要通知的页面，您应该会看到输出“页面将被刷新”。专业提示：在浏览器控制台的设置中激活Preserve log，以防止控制台刷新后清除。

编辑：如果你想调用一个非静态方法，你去：

该PageAboutToBeReloaded方法必须如下所示：

[JSInvokable]
public static void PageAboutToBeReloaded()
{
   callNonStaticFunction.Invoke();
}

为此，您必须在顶部添加一个操作：

private static Action callNonStaticFunction;

你OnInitialized()应该是这样的：

protected override void OnInitialized()
{
    callNonStaticFunction = NonStaticFunction;
}

现在您可以实现在页面刷新时调用的非静态方法：

void NonStaticFunction()
{
    Console.WriteLine("DEBUG: huhu");
}

推荐阅读