Blazorise DataGrid动态列与数据绑定渲染异常求助

问题背景 #

数据库表Controls存储网格列配置，包含COLUMN_NAME、COLUMN_CAPTION字段；通过public IEnumerable<ControlSettings> datagrid { get; set; }获取列配置，用List<Dictionary<string, object>> gridData存储网格数据（字典键对应列名）。

尝试用以下代码渲染DataGrid时抛出错误：

<Blazorise.DataGrid.DataGrid Data="@gridData" TItem="Dictionary<string, object>">  
    <DataGridColumns>  
        @foreach (var column in datagrid)  
        {  
            <DataGridColumn TItem="Dictionary<string, object>" Field="@column.COLUMN_NAME" Caption="@column.COLUMN_CAPTION" />  
        }  
    </DataGridColumns>  
</Blazorise.DataGrid.DataGrid>

错误信息：

ArgumentException: Cannot detect the member of System.Collections.Generic.Dictionary`2[System.String,System.Object] (Parameter 'LOC')

原因：Blazorise DataGrid的Field属性依赖反射查找类的成员属性，而Dictionary<string,object>没有对应列名的属性，导致无法解析。

解决方案 #

放弃使用Field属性，改用DisplayTemplate手动渲染字典中的值，实现动态列绑定：

<Blazorise.DataGrid.DataGrid Data="@gridData" TItem="Dictionary<string, object>">  
    <DataGridColumns>  
        @foreach (var column in datagrid)  
        {  
            <DataGridColumn TItem="Dictionary<string, object>" Caption="@column.COLUMN_CAPTION">
                <DisplayTemplate>
                    @context.Value[column.COLUMN_NAME]
                </DisplayTemplate>
            </DataGridColumn>
        }  
    </DataGridColumns>  
</Blazorise.DataGrid.DataGrid>

关键说明 #

• DisplayTemplate用于自定义列的内容渲染，context.Value代表当前行的Dictionary<string,object>实例
• 通过字典键（列名）直接取值，绕开了DataGrid对类成员属性的依赖

扩展支持排序（可选） #

如果需要排序功能，可通过SortTemplate自定义排序逻辑：

<DataGridColumn TItem="Dictionary<string, object>" Caption="@column.COLUMN_CAPTION" Sortable="true">
    <DisplayTemplate>
        @context.Value[column.COLUMN_NAME]
    </DisplayTemplate>
    <SortTemplate>
        @{
            var columnName = column.COLUMN_NAME;
            gridData = context.SortDirection == SortDirection.Ascending
                ? gridData.OrderBy(d => d[columnName]).ToList()
                : gridData.OrderByDescending(d => d[columnName]).ToList();
        }
    </SortTemplate>
</DataGridColumn>

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