Bootstrap Blazor Table 组件(二)手动刷新组件数据

虚幻大学 xuhss 481℃ 0评论

Python微信订餐小程序课程视频

https://blog.csdn.net/m0_56069948/article/details/122285951

Python实战量化交易理财系统

https://blog.csdn.net/m0_56069948/article/details/122285941
原文链接:https://blog.csdn.net/ysmc/p/16128206.html  

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

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

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

private Task> OnQueryAsync(QueryPageOptions options)
{
 // 设置记录总数
 var total = Items.Count();

 return Task.FromResult(new QueryData()
 {
 Items = Items,
 TotalCount = total
 });}

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

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

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

下面是完整的代码展示

razor页面

<Button OnClick="@OnRefreshTableAsync">刷新TableButton>

<Table TItem="TItem"
 @ref="@Table"
 AutoGenerateColumns="true"
 OnQueryAsync="@OnQueryAsync">
Table>

razor.cs

主要就是 OnRefreshTableAsync 函数

[NotNull]
private Table? Table { get; set; }

private async Task OnRefreshTableAsync()
{
 await Table.QueryAsync();
}

private Task> OnQueryAsync(QueryPageOptions options)
{
 var total = Items.Count();

 return Task.FromResult(new QueryData()
 {
 Items = Items,
 TotalCount = total
 });
}

写在最后

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

star流程:

1、访问点击项目链接:BootstrapBlazor [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8YpwVZmS-1649611229919)(https://gitee.com/LongbowEnterprise/BootstrapBlazor/badge/star.svg?theme=gvp)]

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

dda69d2e550269f46486b8479c449fe8 - Bootstrap Blazor Table 组件(二)手动刷新组件数据

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

  BootstrapAdmin 项目地址:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KwfE3pCy-1649611229925)(https://gitee.com/LongbowEnterprise/BootstrapAdmin/badge/star.svg?theme=gvp)]  https://gitee.com/LongbowEnterprise/BootstrapAdmin  SliderCaptcha 项目地址:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wV0QZbj-1649611229926)(https://gitee.com/LongbowEnterprise/SliderCaptcha/badge/star.svg?theme=gvp)]  https://gitee.com/LongbowEnterprise/SliderCaptcha

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

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

cae7721c02a058733688b94921c01a06 - Bootstrap Blazor Table 组件(二)手动刷新组件数据4c13f67e7592902a929ea8785d054b66 - Bootstrap Blazor Table 组件(二)手动刷新组件数据

转载请注明:xuhss » Bootstrap Blazor Table 组件(二)手动刷新组件数据

喜欢 (0)

您必须 登录 才能发表评论!