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

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

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

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

  1. private Task<QueryData<ITem>> OnQueryAsync(QueryPageOptions options)
  2. {
  3. // 设置记录总数
  4. var total = Items.Count();
  5.  
  6. return Task.FromResult(new QueryData<ITem>()
  7. {
  8. Items = Items,
  9. TotalCount = total
  10. });
    }

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

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

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

下面是完整的代码展示

razor页面

  1. <Button OnClick="@OnRefreshTableAsync">刷新Table</Button>
  2.  
  3. <Table TItem="TItem"
  4. @ref="@Table"
  5. AutoGenerateColumns="true"
  6. OnQueryAsync="@OnQueryAsync">
  7. </Table>

razor.cs

主要就是 OnRefreshTableAsync 函数

  1. [NotNull]
  2. private Table<TItem>? Table { get; set; }
  3.  
  4. private async Task OnRefreshTableAsync()
  5. {
  6. await Table.QueryAsync();
  7. }
  8.  
  9. private Task<QueryData<TItem>> OnQueryAsync(QueryPageOptions options)
  10. {
  11. var total = Items.Count();
  12.  
  13. return Task.FromResult(new QueryData<TItem>()
  14. {
  15. Items = Items,
  16. TotalCount = total
  17. });
  18. }

写在最后

  希望大佬们看到这篇文章,能给项目点个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)

Bootstrap Blazor Table 组件(二)的更多相关文章

  1. Bootstrap Blazor Table 组件(四)自定义列生成

    原文链接:https://www.cnblogs.com/ysmc/p/16223154.html Bootstrap Blazor 官方链接:https://www.blazor.zone/tabl ...

  2. Bootstrap Blazor Table 组件(三)智能生成

    原文链接:https://www.cnblogs.com/ysmc/p/16201153.html Bootstrap Blazor 官网地址:https://www.blazor.zone 有了解过 ...

  3. Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  4. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  5. Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  6. Bootstrap Blazor 组件介绍 Table (三)列数据格式功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  7. Bootstrap Blazor 组件库 Row 布局组件(栅格系统)

    原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazo ...

  8. Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行

    今天我们来介绍一下 Bootstrap Blazor 中 Table 组件的虚拟滚动行,什么是虚拟滚动呢,我查到的解释是:只渲染可视区域的列表项,非可见区域的 完全不渲染,在滚动条滚动时动态更新列表项 ...

  9. Bootstrap入门(十二)组件6:导航标签页

    Bootstrap入门(十二)组件6:导航标签页   1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单   先引入本地的CSS文件和JS文件(注:1. ...

随机推荐

  1. JavaWeb 03_创建servlet项目(详细)

    一.创建web项目 1. File--New--Project 2. 设置项目相关信息 3. 设置项目名称及工作空间 4. web项目目录结构如下 二.Servlet的实现 1. 新建包---类    ...

  2. RabbitMQ Go客户端教程2——任务队列/工作队列

    本文翻译自RabbitMQ官网的Go语言客户端系列教程,本文首发于我的个人博客:liwenzhou.com,教程共分为六篇,本文是第二篇--任务队列. 这些教程涵盖了使用RabbitMQ创建消息传递应 ...

  3. 论文翻译:2021_Acoustic Echo Cancellation with Cross-Domain Learning

    论文地址:https://graz.pure.elsevier.com/en/publications/acoustic-echo-cancellation-with-cross-domain-lea ...

  4. 查找bug的一些经验总结

    项目开发中遇到的bug解决经验总结 今天在项目开发中遇到了两个很难解决的bug,我把我的思路记录下来,以供之后遇到bug时,提供一些思路: 编译通过,但总结"core dumped" ...

  5. Java中的list和set有什么区别

    list与set方法的区别有:list可以允许重复对象和插入多个null值,而set不允许:list容器是有序的,而set容器是无序的等等 Java中的集合共包含三大类,它们分别是Set(集),Lis ...

  6. Myql 中的事务回滚机制概述 ?

    事务是用户定义的一个数据库操作序列,这些操作要么全做要么全不做,是一个 不可分割的工作单位,事务回滚是指将该事务已经完成的对数据库的更新操作撤 销. 要同时修改数据库中两个不同表时,如果它们不是一个事 ...

  7. Kafka 判断一个节点是否还活着有那两个条件?

    (1)节点必须可以维护和 ZooKeeper 的连接,Zookeeper 通过心跳机制检查每 个节点的连接 (2)如果节点是个 follower,他必须能及时的同步 leader 的写操作,延时不能太 ...

  8. 为什么 wait(), notify()和 notifyAll ()必须在同步方法或 者同步块中被调用?

    当一个线程需要调用对象的 wait()方法的时候,这个线程必须拥有该对象的锁,接 着它就会释放这个对象锁并进入等待状态直到其他线程调用这个对象上的 notify() 方法.同样的,当一个线程需要调用对 ...

  9. 基于Python3实现的各类数据库连接和连接池

    基于Python3的各类数据库连接和连接池, 支持数据库有: Mysql(MariaDB), Oracle, PostgreSQL(GreenPlum), Vertica, Redis, MongoD ...

  10. 学习 Haproxy (六)

    HAProxy HAProxy是免费 高效 可靠的高可用及负载均衡解决方案,该软件非常适合于处理高负载站点的七层数据请求,HAProxy的工作模式使其可以非常容易且安全地集成到我们现有的站点架构中.使 ...