asp.net core razor 页面“加载指示器”答案

【问题标题】：asp.net core razor page 'loading indicator'asp.net core razor 页面“加载指示器”
【发布时间】：2018-12-20 21:43:00
【问题描述】：

一般来说，我是 Web 开发的新手，所以我怀疑我误解了剃须刀页面的核心前提。

我正在尝试在提取数据时向我的页面添加加载指示器。虽然这可以通过 js 承诺来实现，但我假设我可以完全在 c# 中使用 cshtml 文件来做到这一点。

在我的控制器中，我的页面模型看起来像这样：

public Boolean IsLoading { get; set; } = true;

public async Task<IActionResult> OnGetAsync()
{
    await Task.Run(() =>
    {
        Thread.Sleep(1000 * 10);
        IsLoading = false;
    });
    return Page();
}

只是用来模拟昂贵的数据库查询，以及指示加载完成时间的布尔值。

在我的页面文件中，我有这样的东西：

@if (@Model.IsLoading)
{
    <div>
        <img src="~/Images/loading.gif" />
    </div>
}
else
{
    <div>
        <<Some Code Showing My Data>>
    </div>
}

我已经尝试了多种方法来尝试更新模型或在数据提取完成后重绘页面，但我无法找到任何可行的方法。

期望的行为是让页面显示加载符号，直到“数据库查询”完成，然后显示数据。

我看到的当前行为是，在“数据库查询”完成之前，页面不会百分比。所以我从来没有看到加载 gif。

【问题讨论】：

您必须牢记这一点：Razor => 服务器端代码。当您在浏览器中看到该页面时，Razor 不再存在，您的所有逻辑都已运行。
呼应 Camilo 所说的，所有的 C# 代码都在服务器上运行并用于构建一些静态 HTML，然后将其发送到浏览器。浏览器无法运行 C#，也没有 C# 代码发送到浏览器。浏览器将等待 HTML 交付。因此，在这种情况下长时间运行的数据库查询只会导致页面加载时间更长。为了使您的想法生效，您将加载页面的骨架，然后使用 JS 向单独的 URL 发出 AJAX 请求，该 URL 将运行长时间运行的查询并返回结果。使用 JS 在请求开始和结束时显示/隐藏加载指示器

标签： c# razor asp.net-core razor-pages

【解决方案1】：

通常，如果IsLoading 属性为true，您应该会看到加载图像。您看不到它的原因是因为IsLoading 永远不是true。发生这种情况是因为您使用的是 await 关键字。通过使用它，这部分代码：return Page(); 只有在任务完成后才能到达。所以当Page对象返回时，IsLoading属性就是false。

另外，重申@LosManos 的答案，C# 不能在客户端上执行。所以即使显示了图片，你仍然需要 JavaScript 来查询服务器以检查作业是否已经完成并隐藏图片。

【讨论】：

【解决方案2】：

除非您使用Blazor 或类似的酷技术，否则aspnet 领域的规则是“Javascript 在客户端运行。Dotnet/C# 在服务器上运行。”另请参阅 ADyson 的评论。

【讨论】：