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
2、点击star,如下图,即可完成star,关注项目不迷路:
另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:
BootstrapAdmin 项目地址:
https://gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 项目地址:
https://gitee.com/LongbowEnterprise/SliderCaptcha
交流群(QQ)欢迎加群讨论
BA & Blazor ①(795206915) BA & Blazor ②(675147445)
本文来自博客园,作者:一事冇诚,转载请注明原文链接:https://www.cnblogs.com/ysmc/p/16128206.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战