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
    });
}

写在最后

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

star流程:

1、访问点击项目链接BootstrapBlazor   

star

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

 

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

  BootstrapAdmin 项目地址:

star


  https://gitee.com/LongbowEnterprise/BootstrapAdmin

  SliderCaptcha 项目地址:

star


  https://gitee.com/LongbowEnterprise/SliderCaptcha

 

交流群(QQ)欢迎加群讨论

       BA & Blazor ①(795206915)          BA & Blazor ②(675147445)

 

相关文章

Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...