如何在 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); });
}

启动.cs:嵌套类:

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

在配置方法中:

GetMeSomeServiceLocator.Instance = app.ApplicationServices;

当我重新加载页面时调用 JsInvokable 但出现错误:

System.InvalidOperationException:"无法从根提供程序解析作用域服务'BlazorStore9.Services.ViewDataService'。

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

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

让我们像这样创建一个名为callDotNetFunctionFromJS的 java 脚本函数(我在一个名为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>

最后但并非最不重要的一点是,您必须在index.html中添加对.js文件的引用:

<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");
}

根据Microsoft文档,您可以使用带有firstRender参数的OnAfterRender或OnAfterRenderAsync方法识别第一个渲染。

protected override void OnAfterRender(bool firstRender)
{
...} 

相关内容

  • 没有找到相关文章

最新更新