ASP.NET Core的dataTable中如何显示外键关联的客户姓名而非customerId

你需要从后端实体关联、查询逻辑、前端渲染三个层面调整，具体操作如下：

1. 扩展Appointment模型添加导航属性 #

在你的Appointment实体类中添加关联Customer表的导航属性，以EF Core为例：

public class Appointment
{
    // 保留原有所有字段
    public int CustomerId { get; set; }
    // 新增Customer导航属性，关联客户表
    public Customer Customer { get; set; }
}

2. 调整后端getall接口的查询逻辑 #

修改/Appointment/getall接口的查询代码，关联加载Customer表的字段，避免只返回customerId：

• 如果你直接返回实体给前端：

// 原查询逻辑没有关联加载，修改为以下写法
var appointmentList = _dbContext.Appointments
    // 关联加载Customer数据
    .Include(a => a.Customer)
    .ToList();

注意直接返回实体需要配置序列化忽略循环引用，避免接口报错，以.NET 6+为例：

// Program.cs中添加配置
builder.Services.AddControllers()
    .AddJsonOptions(opt => 
    {
        opt.JsonSerializerOptions.ReferenceHandler = System.Text.Json.Serialization.ReferenceHandler.IgnoreCycles;
    });

• 如果你使用DTO（数据传输对象）返回（更推荐该方案，避免暴露多余字段和循环引用问题）：
  1. 新增/修改AppointmentDTO类，添加客户名字段

  public class AppointmentDTO
  {
      // 保留原有需要返回的预约字段
      public int CustomerId { get; set; }
      public string CustomerFirstName { get; set; }
      public string CustomerLastName { get; set; }
  }
  

  2. 查询时做字段映射

  var appointmentList = _dbContext.Appointments
    .Include(a => a.Customer)
    .Select(a => new AppointmentDTO
    {
        // 映射原有预约字段
        CustomerId = a.CustomerId,
        CustomerFirstName = a.Customer.CustomerFirstName,
        CustomerLastName = a.Customer.CustomerLastName
    })
    .ToList();
  

3. 修改前端DataTable的列配置 #

调整loadDataTable函数中的columns配置，渲染返回的客户名字段：

var dataTable;

$(document).ready(function () {
    loadDataTable();
});
function loadDataTable() {
    dataTable = $('#DT_load').DataTable({
        "ajax": {
            "url": "/Appointment/getall/",
            "type": "GET",
            "datatype": "json"
        },
        "columns": [
            // 保留原有其他需要展示的列
            // 新增客户名两列
            { "data": "customerFirstName", "width": "auto" },
            { "data": "customerLastName", "width": "auto" },
            // 如果需要合并展示全名，可以使用渲染函数
            // {
            //     "data": null,
            //     "render": function (row) {
            //         return row.customerFirstName + ' ' + row.customerLastName;
            //     },
            //     "width": "auto"
            // }
        ]
    });
}

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