Bootstrap Blazor Table 组件手动刷新组件数据详解

2022年5月23日09:55:56

官网连接:https://www.blazor.zone

很多小伙伴在使用 Bootstrap Blazor Table组件的时候,都会有这样的一个需求:

  我怎么在代码中重新加载Table组件的数据?

  然后小伙伴们都不约而同的想方设法去调用 OnQueryAsyc 函数,结果都卡在了 QueryPageOptions options 这个参数怎么传的问题上,直接 new 一个吧,是一个好想法,但是这么调用跟 Table 组件是一点关系没有,一样无法达到 “重新加载Table组件的数据”的期望

private Task<QueryData<ITem>> OnQueryAsync(QueryPageOptions options)
{// 设置记录总数var total = Items.Count();return Task.FromResult(new QueryData<ITem>()
    {
        Items= Items,
        TotalCount= total
    });
}

  那我们需求怎么做才能达到 “重新加载Table组件的数据” 这个期望呢?其实非常简单,因为我们是要刷新 Table 组件的数据,那我们首先肯定是需要拿到 Table 组件这个实例,这里我们用到了 @ref,这个是 razor 的东西,不清楚的小伙伴可以先去看看下面这两个链接:

ASP.NET Core 的 Razor 语法参考 | Microsoft Docs

使用 Blazor 生成可重用的 UI 组件 | Microsoft Docs

下面是完整的代码展示

razor页面

<ButtonOnClick="@OnRefreshTableAsync">刷新Table</Button><TableTItem="TItem"
       @ref="@Table"
       AutoGenerateColumns="true"
       OnQueryAsync="@OnQueryAsync"></Table>

razor.cs

主要就是 OnRefreshTableAsync 函数

[NotNull]private Table<TItem>? Table {get;set; }privateasync Task OnRefreshTableAsync()
{await Table.QueryAsync();
}private Task<QueryData<TItem>> OnQueryAsync(QueryPageOptions options)
{var total = Items.Count();return Task.FromResult(new QueryData<TItem>()
    {
        Items= Items,
        TotalCount= total
    });
}

  • 作者:一事冇诚
  • 原文链接:https://www.cnblogs.com/ysmc/p/16128206.html
    更新时间:2022年5月23日09:55:56 ,共 1079 字。