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

MJac

我一般是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。

恩迪朱帕尼

通常,如果该IsLoading属性为true,则应该看到加载图像。您没有看到它的原因是因为IsLoadingnever true发生这种情况是因为您正在使用await关键字。通过使用它,这部分代码:return Page();仅在任务完成后才能到达。因此,当Page返回对象IsLoading属性为false

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将数据从视图传递到控制器ASP.NET核心剃须刀页面

如何调用在asp.net核心剃须刀页面项目的控制器中定义的功能

如何在asp.net核心剃须刀页面中重用HTML代码段?

在asp.net核心剃须刀页面上使用局部视图

Asp.net核心剃须刀页面[BindProperty]在集合上不起作用

asp.net核心剃须刀页面支持删除和放置请求

Json发布到asp.net核心剃须刀页面模型返回null

ASP.NET Core 2.1从文本文件加载剃须刀页面

涉足ASP.Net Core的剃须刀页面执行

在asp.net核心剃须刀页面中将DI与部分视图一起使用

将值从“ select asp-for”传递到“ textarea” asp.net核心剃须刀

使用inputbox使用dapper过滤asp.net核心剃须刀

ASP.NET Core 2.0阅读:剃须刀页面中的选项

Route Override在ASP.NET Core 3.1剃须刀页面中不起作用

ASP.net剃须刀页面和多选,在select中发布所有项目

Asp.net core 打开剃须刀页面,我已经删除了

Asp.net剃须刀编辑器中的0x80131513

.gitignore用于asp.net剃须刀项目

将ASP.NET Core剃须刀页面中的下拉列表绑定到ado.net存储过程

是否可以在ASP.Net.Core 2.2+中将视图组件动态添加到剃须刀页面?

ASP.NET Core剃须刀页面应用程序中左侧的导航菜单以及关闭和打开按钮

如何将图像上传到asp.net core 2的剃须刀页面中的磁盘

如何在ASP.NET Core 2.2中使用MVC代替剃须刀页面来使用Identity

如何使用asp.net将对象从控制器传递到视图(电机aspx不是剃须刀)

ASP.NET Core Blazor对比.NET Core MVC与剃须刀

如何在ASP.NET MVC 3剃须刀ViewStart文件中指定不同的布局?

如何在ASP.net剃须刀网页中使用“使用”语句?

在Asp.net MVC剃须刀中获取Select Control的选定值

如何在ASP.NET MVC剃须刀中显示分组数据?