Bootstrap Blazor Table 组件（二）手动刷新组件数据已关闭评论
241 次浏览

A+

所属分类：.NET技术

摘要

原文链接：https://www.cnblogs.com/ysmc/p/16128206.html　　很多小伙伴在使用 Bootstrap Blazor Table组件的时候，都会有这样的一个需求：

原文链接：https://www.cnblogs.com/ysmc/p/16128206.html　　

很多小伙伴在使用 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页面

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

razor.cs

主要就是 OnRefreshTableAsync 函数

[NotNull] private Table<TItem>? Table { get; set; }  private async 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     }); }