Blazor - 试一下Fluent UI Blazor的Table组件

1. 简单介绍

        Fluent UI Blazor是微软开源的一个组件库，以下简单试用一下其中的table组件

2. 准备阶段

        创建一个Blazor Server项目(.NET8, Blazor WebApp 模板)，引入如下nuget package

        

 3. 应用Table组件

       3.1 代码更改

        1) 需要注入Fluent UI Blazor到容器中 (program.cs)

        

       2)在_imports.razor中加上 using Microsoft.FluentUI.AspNetCore.Components

        

        3) 在默认的weather.razor页面中进行一下更改，使用 FluentDataGrid组件

        

        

3.2 运行效果

        

微软还有另外一个table相关的组件 QuickGrid(.Net8), 是在下面这个namespace中，

Microsoft.AspNetCore.Components.QuickGrid

QuickGrid也支持进行排序，分页，搜索，模板列

目前还没试过在大数据量而没有分页的情况下，Fluent UI Blazor和QuickGrid的性能表现

3.3 其他组件

 Fluent UI Blazor提供了很多的组件，比如通知提醒

        Dialog,

        

        Toast,

        

        note: 需要注入DialogService和ToastService

       

4. 总结

以上简单试用了一下Fluent UI Blazor，更多的组件，还需进一步尝试一下。

NET8中Blazor增加了很多新特性，2024年11月 .NET9 也要发布了，技术变更很快。当前Blazor社区也有很多出色的开源组件库出现，为应用的开发提供了很多便利。本文如果哪里有错误的地方，麻烦告之，谢谢谢谢！