Blazor中如何将列表绑定到Fluent DataGrid？

1. 引入Fluent UI组件命名空间 #

在Razor页面顶部添加命名空间引用：

@using Microsoft.FluentUI.AspNetCore.Components

2. 添加DataGrid组件并绑定数据源 #

将Fluent DataGrid组件放置在页面合适位置，绑定你已获取的assm列表，并定义需要展示的列：

<FluentDataGrid Items="@assm" LoadingContent="加载中...">
    <!-- 替换为你的Assessment实体实际属性 -->
    <PropertyColumn Property="@(item => item.Id)" Title="ID" />
    <PropertyColumn Property="@(item => item.Name)" Title="评估名称" />
    <PropertyColumn Property="@(item => item.CreatedDate)" Title="创建时间" />
    <!-- 根据业务需求添加更多列 -->
</FluentDataGrid>

3. 完整页面代码示例 #

结合你的数据获取逻辑，完整的Razor页面代码如下：

@using Microsoft.FluentUI.AspNetCore.Components

<FluentDataGrid Items="@(assm ?? Enumerable.Empty<Assessment>())" LoadingContent="加载中...">
    <PropertyColumn Property="@(item => item.Id)" Title="ID" />
    <PropertyColumn Property="@(item => item.Name)" Title="评估名称" />
    <PropertyColumn Property="@(item => item.CreatedDate)" Title="创建时间" />
</FluentDataGrid>

@code {
    IList<Assessment>? assm = new List<Assessment>();

    protected override async Task OnInitializedAsync()
    {
        assm = await Assessment.GetAllAssessments();
    }
}

关键说明 #

• 务必将PropertyColumn中的属性（如Id、Name）替换为Assessment实体实际存在的属性，保证名称和类型匹配。
• 使用Items="@(assm ?? Enumerable.Empty<Assessment>())"可以避免数据加载前的空引用异常。
• LoadingContent为可选配置，用于在数据加载完成前显示提示文本，优化用户体验。

内容的提问来源于stack exchange，提问作者john