Blazor：如何存储页面状态（所有组件状态）？

Question

我有 1 个完整的页表组件（自定义，带有列过滤器、排序、动态加载、“无限”滚动等），然后用户单击一行上的“编辑”操作，它导航到编辑项目页面。再次，整页。这是一个要求，它应该在视觉上是单独的页面。 2 个原因：用户所做的一项重要任务是搜索，表越大，数据越多 - 越好。第二个任务是更新一些记录。单个记录是一个非常、非常、非常复杂的数据集，它确实需要尽可能多的屏幕空间。

问题是当用户完成编辑记录时，应用导航到上一页，但表格被重置，默认过滤、排序和滚动位置。

好吧，我可以从表格组件中提取数据并将其存储在“伪会话”服务数据中。问题是我必须向表格组件添加大量代码 - 加载/保存状态方法。真的很多工作（对于每个列过滤器元素，然后是列过滤器行）。

但是有一个更简单的方法。而不是使用单独的页面，我可以伪造它。将表格和行编辑表单放在同一个页面上，然后用 JS/CSS 隐藏一个部分。这应该可行，但是 IDK，对我来说似乎是一个丑陋的黑客。你渲染两个部分，显示一个。

顺便说一句，如果您在.razor 文件中隐藏服务器端的组件，然后再次显示它 - 它会被重置。将调用构造函数，将所有参数设置为默认初始值。

有没有办法在服务器端隐藏渲染的片段，然后在不导致 Blazor 重新初始化的情况下显示它？

或者是一个“返回”功能，它以与导航发生前完全相同的状态显示最后一页？

更新： 我刚刚测试了隐藏选项。作为魅力发挥作用。方法如下：

<div style="@("display: " + (CurrentView == ViewOptions.List ? "block" : "none"))">
    @* My list view here... *@
</div>
@if (CurrentView == ViewOptions.Edit) {
    @* My edit entry view here... *@
}

其中ViewOptions 只是一个包含可能视图的enum。 CurrentView 的类型为 ViewOptions。当CurrentView 设置为List 时，第一部分可见，第二部分根本不渲染。当它改变时，第一部分被隐藏（但不被销毁），第二部分被初始化并渲染。由于我的表单已经作为单独的组件完成，它们将行标识符作为参数，并且它们触发自己的事件，允许在用户完成它们时将 CurrentView 切换回列表。所以我们基本上在 1 页上有 2 个虚拟页面。一个hacky的解决方案，但它有效。我在 30 分钟内完成了这项工作，而不是花费几个小时向我的 DataTable 组件添加加载/保存功能。

不过，也许还有更好的方法？或者也许它是最佳的？比如...我们有页面（彼此不直接相关）和... SUBPAGES，就像在视觉上是分开的，但在逻辑上与其父页面直接相关。

这让我有了一个想法……如果我制作了一个名为Subpage 的组件会怎样？ :) Blazor 中已经有一个名为Page 的组件。所以它想完成页面和子页面的整个概念。当页面不直接相关时 - 导航“返回”到上一页没有多大意义。甚至维护无关页面的状态。但是子页面是直接相关的。它的内容取决于父页面的状态。 IDK，也许走那条路太疯狂了；）

Answer 1

TL;DR：我认为，您走的是正确的省力之路。

“正确”（或者更确切地说，完整、完整）的方式是实现所有状态存储（实现、公开、处理事件、将数据存储在浏览器本地存储或应用程序状态等某处）。正如您所发现的，使用真正的if 切换组件会重置它 - 这就是应用程序状态的来源 - 您将状态保留在用于更改它的事件中，然后在下次组件初始化时，它会读取该状态。但是您必须自己实现这一切，而且工作量很大。

所以，有两个更简单的解决方案：

• 如您所见，使用 CSS 隐藏旧内容（如果需要），并在同一页面上显示新内容。但是，如果您在某种窗口/对话框中显示它，您可能根本不必隐藏旧内容。

• 或者，使用某人编写的已内置这些状态功能的组件，以便您可以直接使用它们。 Here 是我所知道的商业广告。