Bootstrap Blazor Table 组件（二）手动刷新组件数据

2022-04-11 00:03:31 阅读：226 来源： 互联网

标签：Task star Items Bootstrap 组件 Table Blazor

原文链接：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
    });
}

写在最后

　　希望大佬们看到这篇文章，能给项目点个star支持下，感谢各位！

star流程：

1、访问点击项目链接：BootstrapBlazor

2、点击star，如下图，即可完成star，关注项目不迷路：

另外还有两个GVP项目，大佬们方便的话也点下star呗，非常感谢：

　　BootstrapAdmin 项目地址：
　　https://gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 项目地址：
　　https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群（QQ）欢迎加群讨论

　　 BA & Blazor ①（795206915）　　　　　　　 BA & Blazor ②（675147445）

标签：Task,star,Items,Bootstrap,组件,Table,Blazor
来源： https://www.cnblogs.com/ysmc/p/16128206.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Bootstrap Blazor Table 组件（二）手动刷新组件数据

写在最后