c# - 是否可以在执行代码之前加载服务器端 Blazor 页面 HTML?

标签 c# .net razor .net-core blazor

以前,HTML 页面会在 .Net 中 Blazor 的客户端实现上运行 Blazor 页面的“@code”部分(默认项目中的“正在加载...”消息)之前/同时呈现核心2.2。但是,对于我在服务器端实现上使用 .NET Core 3.0 和 Blazor 来说,这种情况不再发生。

例如,包含从数据库获取数据的表格的页面仍会加载页面上的所有其他元素(标题、标签、表格标题等),但现在页面仅在所有数据之后加载已从数据库中提取/“OnInitAsync”方法中的操作已完成。除此之外,没有向用户发出“正在加载”信号,表明单击页面实际上正在加载任何内容。他们需要等待 10-15 秒才能加载所有数据(无旋转光标/提示)。

简而言之,我想要让用户知道页面正在加载,但理想情况下我希望这样,以便页面 HTML 被渲染,并且任何尚未完成的数据/操作在准备好时出现(如何它在客户端实现中工作)。

我是 Web 开发/Blazor 的新手,所以我在这里很困惑。我尝试到处寻找一些提示,但考虑到它是多么新,那里没有太多提示。我什至尝试让它与默认项目(WeatherForecaseService)一起工作,但即使在那里它也不起作用。

<html> a bunch of HTML </html>

@if (data == null)
{
    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
}

@code
{
    Data[] data;
    protected override async Task OnInitAsync()
    {
        data = await TaskService.GetDataAsync();
    }
}

上面的示例中预期的是有一个微调器显示数据正在加载,但实际情况是页面根本不会加载,直到数据实际加载(数据永远不为空),其中所有元素立刻出现。这就是服务器端实现的工作原理吗?

最佳答案

Issac 在评论中指出了解决方案:

Try to use OnAfterRenderAsync instead

我只是编写代码:

@code
{

    protected bool Rendered = false;

    protected async override Task OnAfterRenderAsync()
    {
        if (!Rendered) 
        {
            Rendered = true;
            await OnAfterFirstRenderAsync();
        }            
    }
    protected async Task OnAfterFirstRenderAsync()
    {
        data = await TaskService.GetDataAsync();
    }
}

关于c# - 是否可以在执行代码之前加载服务器端 Blazor 页面 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57381398/

相关文章:

asp.net-mvc-3 - 在 MVC3 页面 EF4 上使用 AJAX 部分回发带有下拉列表的页面

c# - VS 2017 c# Error CS0234 命名空间中不存在类型或命名空间名称(是否缺少程序集引用?)

.net - 显示不正确的密码信息

c# - 为什么 ConfigurationSection 需要使用字符串查找内容?

c# - 如何向非技术人员推广 WCF?

razor - 编辑和保存复杂对象

c# - 如何删除 int (C#) 中的最后一位数字?

C# 条件使用和默认参数

c# - 如何将 C 函数签名转换为 C# 并在 native DLL 中调用该函数?

asp.net-core - Ajax 发布到 ASP .NET 2.2 Razor 页面时出现 404 错误