Blazor .NET在后台执行大量查询时在UI上显示加载微调器

xqnpmsa8 于 2022-11-26 发布在 .NET

关注(0)|答案(2)|浏览(151)

我有以下代码，我从SQL服务器获取结果。这些是剃刀页面，blazor框架。

<button @onclick="Filter">Filter</button>

@{

async Task Filter() {
    await FetchFromDb();
}

这个查询运行了18秒。所以我想显示加载spinner。在blazor中，你可以使用一个带有spinner类的预定义div来完成这个任务。

<div class="spinner"> </div>

我想使用这个div，如下所示

@(IsLoading) {
<div class="spinner"></div>
} else {

show results from query
}

为此，我需要更改Filter函数，如下所示

async Task Filter() {
    IsLoading = true;
    await FetchFromDb();
    IsLoading = false;
}

但是我想，改变IsLoading=true和Isloading=false的整个过程是一次完成的，我没有看到一个微调器。
当Filter函数正在从await FetchFromDb（）中的Db获取结果时，是否有方法更改IsLoading=true;？

@(IsLoading) {
<div class="spinner"></div>
} else {

show results from query
}

async Task Filter() {
    IsLoading = true;
    await FetchFromDb();
    IsLoading = false;
}

但这不起作用。IsLoading在更改IsLoading=True时不会得到更新。

.net

来源：https://stackoverflow.com/questions/74515918/blazor-net-show-loading-spinner-on-ui-while-doing-a-heavy-query-in-background

2条答案

按热度按时间

tf7tbtn21#

这看起来像：

async Task Filter() {
    IsLoading = true;
    await FetchFromDb();
    IsLoading = false;
}

并不是真正的异步代码块。
你应该能够做到这一点，它的工作：

async Task Filter() 
{
    IsLoading = true;
    await Task.Delay(1);
    await FetchFromDb();
    IsLoading = false;
}

假设Filter是从UI事件（如按钮按下）调用的，则会发生以下情况。
Task.Delay将控制权交还给UI事件处理程序。它（UI事件处理程序）调用StateHasChanged并产生等待Filter。呈现器获得处理器时间来服务其呈现队列，并运行组件呈现片段和呈现组件
我假设await FetchFromDb();是一个对数据库的调用，或者FetchFromDb将一个Task Package 在一个同步数据库调用周围，或者您正在使用一个数据库，比如SQLite，它在内部使用它公开的异步库做同样的事情。

赞(0）回复(0）举报 2022-11-26

ldioqlga2#

请检查以下组件。
演示：https://demos.getblazorbootstrap.com/preload

@code {
    [Inject] protected PreloadService PreloadService { get; set; }

    private void GetEmployees()
    {
        try
        {
            PreloadService.Show();

            // TODO: call the service/api to get the employees
        }
        catch
        {
            // handle exception
        }
        finally
        {
            PreloadService.Hide();
        }
    }
}

赞(0）回复(0）举报 2022-11-26

我来回答

Blazor .NET在后台执行大量查询时在UI上显示加载微调器

2条答案

相关问题

热门标签

最新问答