ASP.NET Core MVC 5结合ABP.IO框架时Datatables如何展示实体计算属性

步骤1：确保计算属性被序列化到返回的DTO中 #

ABP默认的AutoMapper配置只会映射显式配置的字段，你需要手动把计算属性加到你返回给前端的DTO里：

• 先给你的MileageLogDto添加和实体计算属性同名的字段：

public class MileageLogDto : EntityDto<Guid>
{
    public double StartOdometer { get; set; }
    public double EndOdometer { get; set; }
    // 新增对应计算属性的字段
    public double CalculateTotalMilesDriven { get; set; }
}

• 然后在你的Application层的AutoMapper配置文件里，显式配置映射规则，确保实体的计算属性被映射到DTO：

public class MyApplicationAutoMapperProfile : Profile
{
    public MyApplicationAutoMapperProfile()
    {
        CreateMap<MileageLogBase, MileageLogDto>()
            // 显式映射计算属性
            .ForMember(dto => dto.CalculateTotalMilesDriven, opt => opt.MapFrom(entity => entity.CalculateTotalMilesDriven));
    }
}

注意：如果你的计算属性只有getter没有setter，也不需要额外配置，AutoMapper默认会读取实体的getter值映射到DTO对应字段

步骤2：确认接口返回数据包含目标字段 #

可以先按F12打开浏览器开发者工具的网络面板，查看你获取列表数据的接口返回值，确认每条数据里已经有calculateTotalMilesDriven字段（注意ABP默认序列化会用驼峰命名，首字母小写）。如果没有，检查上一步的映射配置是否正确。

步骤3：配置Datatables对应列 #

修改你的Datatables初始化代码的columns配置，匹配返回的字段名即可：

$('#mileageTable').DataTable({
    serverSide: true,
    ajax: {
        url: '/api/services/app/mileageLog/getList',
        type: 'post'
    },
    columns: [
        { data: 'startOdometer' },
        { data: 'endOdometer' },
        // 新增对应计算属性的列，字段名和接口返回的驼峰命名保持一致
        { data: 'calculateTotalMilesDriven' }
    ]
})

如果不想修改后端DTO配置，也可以直接在Datatables里用渲染器实时计算：

columns: [
    { data: 'startOdometer' },
    { data: 'endOdometer' },
    {
        data: null,
        render: function (data) {
            return data.endOdometer - data.startOdometer;
        }
    }
]

第二种方法适合不需要后端计算的简单场景，无需修改后端代码即可实现效果

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