时间戳

首页 > 解决方案 > Blazor：如何存储页面状态（所有组件状态）？

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

问题描述

我有 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... *@
}

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

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

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

标签： blazorblazor-server-side

解决方案

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

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

因此，有两个更简单的解决方案：

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

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

推荐阅读