ASP.Net MVC中HTML表格显示记录名称而非ID的实现咨询

以下两种方案均可实现需求，可根据实际场景选择：

方案一：通过领域模型导航属性实现 #

1. 更新Combination模型 #

为Combination类添加Food和Drink导航属性，关联对应的实体对象：

public class Combination
{
    public int Combination_ID { get; set; }
    public int Food_ID { get; set; }
    public int Drink_ID { get; set; }
    
    // 添加导航属性
    public Food Food { get; set; }
    public Drink Drink { get; set; }
}

2. 修正控制器代码 #

创建Combination时，同时关联对应的Food和Drink对象（注意修正原代码中Drink_ID重复的问题）：

public ActionResult Index()
{
    List<Food> FoodList = new List<Food>();
    List<Drink> DrinkList = new List<Drink>();
    List<Combination> CombinationList = new List<Combination>();

    // 添加食物项
    FoodList.Add(new Food() { Food_ID = 1, Food_Name = "Burger" });
    FoodList.Add(new Food() { Food_ID = 2, Food_Name = "Chips" });

    // 添加饮料项（修正Drink_ID重复问题）
    DrinkList.Add(new Drink() { Drink_ID = 1, Drink_Name = "Coke" });
    DrinkList.Add(new Drink() { Drink_ID = 2, Drink_Name = "Pepsi" });

    // 创建组合并关联实体对象
    CombinationList.Add(new Combination 
    { 
        Combination_ID = 1, 
        Food_ID = 1, 
        Drink_ID = 1,
        Food = FoodList.First(f => f.Food_ID == 1),
        Drink = DrinkList.First(d => d.Drink_ID == 1)
    });
    CombinationList.Add(new Combination 
    { 
        Combination_ID = 2, 
        Food_ID = 1, 
        Drink_ID = 2,
        Food = FoodList.First(f => f.Food_ID == 1),
        Drink = DrinkList.First(d => d.Drink_ID == 2)
    });

    return View(CombinationList);
}

3. 更新视图代码 #

修改表格表头和内容，显示名称而非ID：

@model IEnumerable<WebApplication4.Models.Combination>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Combination_ID)
        </th>
        <th>
            食物
        </th>
        <th>
            饮料
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Combination_ID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Food.Food_Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Drink.Drink_Name)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Combination_ID }) |
            @Html.ActionLink("Details", "Details", new { id = item.Combination_ID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Combination_ID })
        </td>
    </tr>
}

</table>

方案二：通过视图模型实现（不修改领域模型） #

1. 创建视图模型 #

定义专门用于视图展示的模型，包含需要显示的字段：

public class CombinationViewModel
{
    public int Combination_ID { get; set; }
    public string Food_Name { get; set; }
    public string Drink_Name { get; set; }
}

2. 控制器中映射视图模型 #

将领域模型数据映射到视图模型后传递给视图：

public ActionResult Index()
{
    List<Food> FoodList = new List<Food>();
    List<Drink> DrinkList = new List<Drink>();
    List<Combination> CombinationList = new List<Combination>();

    // 添加食物项
    FoodList.Add(new Food() { Food_ID = 1, Food_Name = "Burger" });
    FoodList.Add(new Food() { Food_ID = 2, Food_Name = "Chips" });

    // 添加饮料项（修正Drink_ID重复问题）
    DrinkList.Add(new Drink() { Drink_ID = 1, Drink_Name = "Coke" });
    DrinkList.Add(new Drink() { Drink_ID = 2, Drink_Name = "Pepsi" });

    // 创建组合
    CombinationList.Add(new Combination { Combination_ID = 1, Food_ID = 1, Drink_ID = 1 });
    CombinationList.Add(new Combination { Combination_ID = 2, Food_ID = 1, Drink_ID = 2 });

    // 映射到视图模型
    var viewModelList = CombinationList.Select(c => new CombinationViewModel
    {
        Combination_ID = c.Combination_ID,
        Food_Name = FoodList.First(f => f.Food_ID == c.Food_ID).Food_Name,
        Drink_Name = DrinkList.First(d => d.Drink_ID == c.Drink_ID).Drink_Name
    }).ToList();

    return View(viewModelList);
}

3. 更新视图代码 #

修改模型类型为视图模型，并调整显示逻辑：

@model IEnumerable<WebApplication4.Models.CombinationViewModel>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Combination_ID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Food_Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Drink_Name)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Combination_ID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Food_Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Drink_Name)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Combination_ID }) |
            @Html.ActionLink("Details", "Details", new { id = item.Combination_ID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Combination_ID })
        </td>
    </tr>
}

</table>

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