MVC 5 Razor：如何将下拉列表与视图模型属性关联

嘿，我来帮你搞定这个下拉框和模型属性关联的问题！你已经完成了创建选项列表的第一步，接下来只需要把列表和视图模型的属性绑定起来就行，分三步走：

1. 准备你的视图模型 #

首先确保你的视图模型里有两个关键属性：一个用来存储选中项的值，另一个用来存放下拉框的选项列表。比如：

public class YourViewModel
{
    // 绑定下拉框选中值的属性（提交表单时会自动填充）
    public string SelectedJobId { get; set; }

    // 下拉框的所有选项
    public IEnumerable<SelectListItem> JobOptions { get; set; }
}

这里的SelectedJobId类型可以根据你的需求调整，比如如果选项值是整数，就改成int?（允许空选的话）或者int。

2. 控制器中给视图模型赋值 #

修改你的控制器代码，把创建好的SelectListItem列表赋值给视图模型的JobOptions属性，然后把整个模型传递给视图：

public IActionResult YourAction()
{
    // 你原来创建选项的代码
    List<SelectListItem> jobs = new List<SelectListItem>();
    SelectListItem job1 = new SelectListItem() { Text = "Email", Value = "1" };
    SelectListItem job2 = new SelectListItem() { Text = "SMS", Value = "2" };
    jobs.Add(job1);
    jobs.Add(job2);

    // 实例化视图模型并赋值
    var viewModel = new YourViewModel
    {
        JobOptions = jobs,
        // 如果需要默认选中某个选项，直接给SelectedJobId赋值即可
        // SelectedJobId = "1"
    };

    return View(viewModel);
}

3. 在视图中绑定下拉框 #

现在用ASP.NET Core的标签助手（推荐强类型方式）或者Html辅助类来创建下拉框，绑定到模型的属性：

方式一：使用标签助手（更简洁） #

@model YourViewModel

<div class="form-group">
    <label asp-for="SelectedJobId">选择工作类型</label>
    <!-- asp-for绑定选中值的属性，asp-items指定选项列表 -->
    <select asp-for="SelectedJobId" asp-items="Model.JobOptions" class="form-control"></select>
    <!-- 可选：显示验证信息 -->
    <span asp-validation-for="SelectedJobId" class="text-danger"></span>
</div>

方式二：使用Html.DropDownListFor #

@model YourViewModel

<div class="form-group">
    @Html.LabelFor(m => m.SelectedJobId)
    <!-- 第一个参数是绑定的属性，第二个是选项列表，第三个是默认提示文本 -->
    @Html.DropDownListFor(m => m.SelectedJobId, Model.JobOptions, "请选择", new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.SelectedJobId, "", new { @class = "text-danger" })
</div>

这样设置后，下拉框的选中值就会和视图模型的SelectedJobId属性关联起来：

• 页面加载时，如果你在控制器里给SelectedJobId赋值，对应的选项会自动选中；
• 提交表单时，选中的选项值会自动填充到SelectedJobId中，控制器接收视图模型就能直接拿到这个值啦！

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