Question

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

我正在尝试在提取数据时向页面添加加载指示器。尽管可以通过js promise来实现，但是我假设我可以完全使用cshtml文件在c＃中完成此操作。

在我的控制器中，我有一个Page模型，如下所示：

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。

Answer 1

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

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

Answer 2

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

asp.net核心剃须刀页面“加载指示器”

2 个答案: