ASP.NET Core MVC 基于ViewModel实现数据库下拉列表加载及保存

前置修复：补全实体类外键字段 #

你当前的Car实体缺少显式外键字段，EF Core无法正确映射关联，先修改代码：

public class Car
{
    [Key]
    public int CarId { get; set; }
    [Required]
    public string CarBrand { get; set; }
    [Required]
    public string CarName { get; set; }

    // 补全显式外键
    public int ColorId { get; set; }
    public string ApplicationUserId { get; set; }

    // 导航属性
    public virtual Color Color { get; set; }    
    public ApplicationUser ApplicationUser { get; set; }
}

问题1：将数据库颜色渲染到下拉列表 #

分3步实现：

1. 创建专用视图模型(ViewModel) #

不要直接用实体类作为视图模型，避免过度提交风险，新建CarCreateViewModel.cs：

using Microsoft.AspNetCore.Mvc.Rendering;
public class CarCreateViewModel
{
    [Required]
    public string CarBrand { get; set; }
    [Required]
    public string CarName { get; set; }
    [Required(ErrorMessage = "请选择颜色")]
    public int SelectedColorId { get; set; }
    // 存储下拉列表选项
    public IEnumerable<SelectListItem> ColorOptions { get; set; }
}

2. 控制器GET方法加载颜色数据 #

在CarController的表单展示方法中查询数据库颜色，转为下拉选项：

// 假设你的表单页对应Create Action
public IActionResult Create()
{
    var viewModel = new CarCreateViewModel
    {
        // 从数据库查询颜色生成下拉选项
        ColorOptions = _context.Colors.Select(c => new SelectListItem
        {
            Value = c.ColorId.ToString(),
            Text = c.ColorName
        }).ToList()
    };
    return View(viewModel);
}

3. 修改视图代码 #

替换原有硬编码的下拉列表，绑定ViewModel数据：

@model CarCreateViewModel
<div>
    <div class="form">
        <form class="Car-form" method="Post" asp-controller="Car" asp-action="Save">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <input asp-for="CarBrand" placeholder=" Car Brand" />
                <span asp-validation-for="CarBrand" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input asp-for="CarName" placeholder=" Car Name" />
                <span asp-validation-for="CarName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="SelectedColorId">Choose a Color:</label>
                <br />
                <select asp-for="SelectedColorId" asp-items="Model.ColorOptions" class="form-control">
                    <option value="">请选择</option>
                </select>
                <span asp-validation-for="SelectedColorId" class="text-danger"></span>
            </div>
            <button class="btn btn-success" type="submit">提交</button>
        </form>
    </div>
</div>

问题2：Save方法需要添加ColorId处理逻辑 #

必须添加对应处理，才能将选中的颜色和Car关联存储，示例代码如下：

[HttpPost]
public async Task<IActionResult> Save(CarCreateViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        var car = new Car
        {
            CarBrand = viewModel.CarBrand,
            CarName = viewModel.CarName,
            ColorId = viewModel.SelectedColorId,
            // 获取当前登录用户ID
            ApplicationUserId = _userManager.GetUserId(User)
        };
        _context.Cars.Add(car);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    // 验证失败时重新加载颜色选项，避免视图报错
    viewModel.ColorOptions = _context.Colors.Select(c => new SelectListItem
    {
        Value = c.ColorId.ToString(),
        Text = c.ColorName
    }).ToList();
    return View("Create", viewModel);
}

注意：需要在控制器中注入UserManager<ApplicationUser>才能获取当前登录用户ID。

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