如何将Create页面选中的下拉项名称显示在Index记录列表页

问题描述 #

在Create页面中，我有一个下拉列表，已将选中项的正确编号保存至数据库。返回Index页面查看所有记录时，希望显示选中的名称而非编号，该如何实现？

提供的作物类代码 #

public class myCrops
{
    public static List<Crops> GetAll()
    {
        return new List<Crops>
        {
            new Crops() { Id = 1, Name = "Apples"},
            new Crops() { Id = 2, Name = "Bananas"},
            new Crops() { Id = 3, Name = "Grapes"},
            new Crops() { Id = 4, Name = "Orange"},
        };
    }
}

当前显示与期望效果 #

当前Index页面显示的是选中的编号（如Bob对应的3），期望显示对应的名称，示例如下：

"ID"  "Name"  "Age"   "Crop"
      42    Bob     23      Grapes
      43    Sue     45      Apples

解决方法 #

方法1：后端查询时关联获取名称 #

在获取Index页面的记录列表时，对每条记录的作物编号，从myCrops.GetAll()中匹配对应的名称，再将名称传递给前端视图：

// 假设你的记录实体是Person，包含CropId字段
var people = _dbContext.People.ToList();
var allCrops = myCrops.GetAll();
foreach(var person in people)
{
    // 匹配对应的作物名称，无匹配时显示默认文本
    person.CropName = allCrops.FirstOrDefault(c => c.Id == person.CropId)?.Name ?? "未知作物";
}
// 将带有CropName的people列表传递给视图

之后在Index视图中直接显示CropName字段即可。

方法2：前端视图中直接匹配名称 #

如果是Razor视图，可以在视图中调用myCrops.GetAll()，根据每条记录的CropId查找名称：

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>Crop</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var item in Model)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
                <td>@item.Age</td>
                <td>@(myCrops.GetAll().FirstOrDefault(c => c.Id == item.CropId)?.Name ?? "未知")</td>
            </tr>
        }
    </tbody>
</table>

注意：数据量较大时，该方法每次循环都会调用GetAll()，可能影响性能，建议优先使用方法1。

方法3：使用ViewModel封装数据 #

创建专门的Index视图模型，包含需要显示的所有字段（包括作物名称），在后端组装好ViewModel列表后传递给视图：

// 定义ViewModel
public class PersonIndexViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
    public string CropName { get; set; }
}

// 后端组装数据
var people = _dbContext.People.ToList();
var allCrops = myCrops.GetAll();
var viewModelList = people.Select(p => new PersonIndexViewModel
{
    Id = p.Id,
    Name = p.Name,
    Age = p.Age,
    CropName = allCrops.FirstOrDefault(c => c.Id == p.CropId)?.Name ?? "未知作物"
}).ToList();

// 将viewModelList传递给视图

视图中直接绑定ViewModel的CropName字段，代码更清晰，也便于后续维护。

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