asp.net 核心剃须刀页面 'loading indicator'

Question

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

我正在尝试在提取数据时向我的页面添加加载指示器。虽然这可以通过 js promise 实现，但我假设我可以完全在 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>
}

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

理想的行为是让页面显示加载符号直到 'database query' 完成，然后显示数据。

我看到的当前行为是在 'database query' 完成之前页面不会百分比。所以我从来没有看到加载 gif。

Answer 1

除非您使用 Blazor 或类似的酷技术，否则 aspnet 领域的规则是 "Javascript runs on the client. Dotnet/C# runs on the server." 另请参阅 ADyson 的评论。

Answer 2

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

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

asp.net 核心剃须刀页面 'loading indicator'

asp.net core razor page 'loading indicator'

c#

razor

asp.net-core

razor-pages