c# - 有哪些选项可以不为 ASP .NET Core Razor 页面上的文件浏览器重新加载整个页面？

Question

我有一个用 ASP .NET Core 3.1 编写的应用程序，它使用 Razor 页面来显示各种内容。

我有一种项目详细信息视图，其中显示项目的详细信息，如图像、描述、一些字段以及项目的文件列表。

我使用 Graph API（使用存储在配置/Azure Key Vault 中的凭据）收集的项目文件，目前我将它们列在一个平面列表中。我将文件列表存储在我的模型中（在带有自定义对象的列表中，以包含文件的元数据）

我想显示带有文件夹的文件，因此用户在打开页面时只能看到顶级文件夹和文件。当他点击一个文件夹时，该文件夹应该“打开”并且用户现在应该看到这个文件夹的内容（可以选择再次向上导航一个级别）。

老实说，我不太确定如何开始。当用户单击文件夹时，我不想重新加载整个页面，据我所知，在 ASP .Net Core 中没有像更新面板这样的东西，它只能让我更新页面的一部分。

我还编写了一些其他 Reat.JS 应用程序，我知道我可以创建一个非常动态的反应应用程序来显示这些文件，但我不确定是否有一种好方法可以将这样的反应组件集成到我的 ASP .NET Core 应用程序中我不知道如何将凭据传递给该组件。

希望有人能指出我正确的方向并给我一些提示。

标签： c#reactjsasp.net-coreasynchronousrazor-pages

Answer 1

是的，ASP.NET 核心 MVC 中没有更新面板，但这并不意味着您不能更新页面的各个部分。您可以使用视图组件来仅呈现文件夹的内容。以下是实现它所需要做的关键事情的列表：

• 将 MVC 操作添加到返回视图组件的控制器。
• 将文件夹内容包含div在已知的容器中id。
• 将 JavaScript 事件侦听器附加到子文件夹
• 当用户单击一个子文件夹时，事件侦听器使用 fetch API 来调用 MVC 操作。
• 事件侦听器innerHtml将容器的属性设置div为 MVC 操作返回的 HTML
• 将事件侦听器附加到最近加载的内容的子文件夹。

这种方法不需要任何 JavaScript 框架或库。它可以用普通的 JavaScript 来实现。

可能你会想要添加 fetch 和 promise polyfills。