如何在Blazor页面之间导航而不重置状态

Question

我有一个脚本，它执行一个while循环并进行一些请求。

<p>Result @Content</p>

private string Content;
public async Task StartAsync() 
{
    while(!taskCanel) {  
          Content = await webSocket.SendAsync(..); 
          StateHasChanged();
          await Task.Delay(15000);
    }
   
}

但是每当我用导航栏切换到另一页，然后回到这个页面时，它会重置所有东西，就好像创建了一个新的 Razor 页面实例。

如何在不丢失所有状态和内容的情况下导航到该页面？

- qalooi

---

它不会“重置”任何东西。Web应用程序中没有隐式存储。除非您明确存储，否则不会保留任何内容的期望。 - Panagiotis Kanavos

@PanagiotisKanavos 创建一个Blazor模板并运行它，然后在导航栏之间切换，您会发现它将重置所有内容到默认状态。 - qalooi

再次强调，除非你显式保存它，否则没有任何东西被重置或保留。每次导航都会创建一个新的表单。即使在 Windows Forms 应用程序中，关闭一个表单并打开一个新的表单也不会保留旧表单的状态，除非你在某个地方显式保存它。 - Panagiotis Kanavos

@PanagiotisKanavos 在winforms中，您可以隐藏和显示窗体，一切都将保持不变，但无论如何。我该如何制作一些东西来代替navigationmanager，使一切保持不变？ - qalooi

但你很少这样做...我希望如此。表单关闭按钮实际上会关闭表单，而不是隐藏它。无论如何，在Web应用程序或SPA中导航时，您都会关闭旧页面并打开新页面。这些不是表格。如果您想保留信息，则必须存储它。 - Panagiotis Kanavos

您可以使用注入的服务将数据存储在内存中，例如在 Dictionary<T> 中。您可以从服务器读取和写入数据。或者您可以通过例如 Blazored SessionStorage 使用服务器的会话存储来存储数据。 - Panagiotis Kanavos

Answer 1

当您导航到另一个页面时，当前页面的所有变量都应该被处理掉，这是标准操作。状态管理采用不同的方法。如果您想保留当前页面的状态，则需要订阅全局对象中的更改，并在onInit钩子或onafterrender钩子上提取更改。有很多状态管理库可供使用，其中一些在此处介绍。

- Syed Mohammad Fahim Abrar

---

好的，但是我该如何管理已启动的任务？当我切换页面时，我的Content属性总是被更新，就好像当我停留在页面上时它不再被更新。 - qalooi

你可以尝试创建一个Blazor模板，然后通过循环来增加计数器，而不是通过按钮点击。如果你在导航栏中点击另一个页面并返回，你会发现它不再更新，除非你再次切换选项卡。 - qalooi

你在这里想要实现什么？打开一个WebSocket连接并将实时数据与当前组件同步吗？ - Syed Mohammad Fahim Abrar

这应该是一个 WebSocket 聊天，但每次我导航到另一个页面时它会重置一切。那是唯一的问题。看起来 NavigateTo 创建了 Razor 页面的新实例。 - qalooi

这应该是预期的行为。如果您再次访问页面，则应从服务器重新获取数据。 - Syed Mohammad Fahim Abrar

Answer 2

你需要将数据和展示分离开来。你的数据，包括获取和管理数据的方法，应该放在一个有作用域的 DI 服务中。你的 UI 通过注入方式访问这个 DI 服务，并从服务中显示信息。

- MrC aka Shaun Curtis