DevExpress Blazor DxGrid如何将多字段合并为单列显示

在DevExpress Blazor模板项目中，通过EntityFrameworkCore调用注入的PublicacionesService加载数据至DxGrid，需要将ViewPublicaciones实体类的ExpteNro与ExpteAnio字段合并，以“ExpteNro / ExpteAnio”格式显示在同一DxGridDataColumn列中。

相关代码如下：

数据加载代码 #

IGrid Grid { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
 await Task.Delay(1000);
 GridData = await PublicacionesService.ViewPublicaciones.ToListAsync();

 PanelVisible = false;
 StateHasChanged();
}

DxGrid组件代码 #

<DxGrid @ref="Grid"
 Data="GridData"
 EditMode="GridEditMode.EditRow"
 CssClass="mw-1100"
 CustomizeElement="Grid_CustomizeElement"
 @oncontextmenu:preventDefault
 EditModelSaving="Grid_EditModelSaving"
 DataItemDeleting="Grid_DataItemDeleting">

 <Columns>
 <DxGridDataColumn FieldName="Numero" Caption="Ver" Width="40px" />

 <DxGridDataColumn Caption="Expediente"/> <!-- 期望显示为ExpteNro / ExpteAnio -->

 <DxGridDataColumn FieldName="Objeto" DisplayFormat="D" Caption="Objeto" />
 <DxGridDataColumn FieldName="Descripcion" Caption="Descripcion" />
 <DxGridDataColumn FieldName="Fecha" Caption="Fecha" Width="140px" />
 </Columns>
</DxGrid>

实体类代码 #

public partial class ViewPublicaciones
{
 public long Id { get; set; }

 public int? ExpteNro { get; set; }

 public int? ExpteAnio { get; set; }

 public DateTime? FechaPres { get; set; }
}

下面提供三种可行的实现方式，根据你的场景选择即可：

方法一：给实体类添加计算属性 #

直接在ViewPublicaciones类中添加只读计算属性，返回合并后的字符串：

public partial class ViewPublicaciones
{
 public long Id { get; set; }

 public int? ExpteNro { get; set; }

 public int? ExpteAnio { get; set; }

 public DateTime? FechaPres { get; set; }

 // 添加合并字段的计算属性
 public string ExpedienteCompleto 
 { 
     get 
     {
         // 处理null值，避免空引用异常
         if (ExpteNro == null || ExpteAnio == null)
             return string.Empty;
         return $"{ExpteNro} / {ExpteAnio}";
     } 
 }
}

修改DxGrid的列配置，绑定这个计算属性：

<DxGridDataColumn FieldName="ExpedienteCompleto" Caption="Expediente" />

优点：代码简洁，合并逻辑可全局复用；缺点：若实体为EF Core数据库映射类，需确保新增属性不会被EF尝试映射（partial类新增的属性默认会被EF忽略，无需额外配置）。

方法二：使用DxGrid的模板列 #

无需修改实体类，直接在DxGrid列中定义显示模板，手动合并字段：

<DxGridDataColumn Caption="Expediente">
    <DisplayTemplate>
        @{
            var item = (ViewPublicaciones)context.DataItem;
            if (item.ExpteNro != null && item.ExpteAnio != null)
            {
                @($"{item.ExpteNro} / {item.ExpteAnio}")
            }
            else
            {
                @("-") // 空值时显示占位符
            }
        }
    </DisplayTemplate>
</DxGridDataColumn>

优点：无需改动实体类，适合无法修改实体的场景；缺点：合并逻辑仅当前列可用，无法复用。

方法三：加载数据时通过LINQ投影合并 #

在数据加载阶段，通过LINQ查询将两个字段合并为新属性，返回匿名类或DTO：

修改数据加载代码：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
 await Task.Delay(1000);
 // 通过LINQ投影生成包含合并字段的集合
 GridData = await PublicacionesService.ViewPublicaciones
     .Select(v => new 
     {
         v.Id,
         v.Numero,
         v.Objeto,
         v.Descripcion,
         v.Fecha,
         v.FechaPres,
         ExpedienteCompleto = v.ExpteNro != null && v.ExpteAnio != null ? $"{v.ExpteNro} / {v.ExpteAnio}" : ""
     })
     .ToListAsync();

 PanelVisible = false;
 StateHasChanged();
}

修改DxGrid列绑定：

<DxGridDataColumn FieldName="ExpedienteCompleto" Caption="Expediente" />

优点：实体类无改动，合并逻辑在数据加载时完成；缺点：若需编辑数据，匿名类无法作为编辑模型，需改用自定义DTO类。

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