ASP.NET MVC DropDownList选中员工后跳转Edit视图实现问题

你必须给每一个下拉选项绑定对应的员工ID，这是跳转后能加载正确编辑记录的核心前提。你现有代码无法实现预期效果主要有3个原因：

• 下拉数据源只取了拼接的姓名字符串，没有关联员工ID值，就算触发跳转也没法把定位记录需要的ID传给Edit动作
• 错误给@Html.ActionLink传SelectList对象当路由参数，生成的链接不会带任何员工标识，完全起不到作用
• 下拉框本身没有绑定选中跳转的交互逻辑，Html辅助方法生成的就是纯静态下拉HTML，不会自带自动跳转的行为

修改Controller代码 #

保持你原有给视图传员工列表的业务逻辑不变，只需要补充组装带员工ID的下拉数据源：

public ActionResult Index(string sortOrder, string searchString)
{
    // 组装带员工ID的下拉列表，用SelectListItem结构避免动态解析出错
    ViewBag.EmployeeList = db.Employee
        .OrderBy(e => e.LastName)
        .Select(e => new SelectListItem
        {
            Value = e.EmployeeId.ToString(), // 下拉项的真实值，存储用来跳转的员工ID
            Text = $"{e.LastName}, {e.FirstName}" // 下拉项展示的文本，和你原来的姓名格式保持一致
        })
        .ToList();

    // 你原有返回员工列表的逻辑保持原样即可
    return View(employee.ToList());
}

修改View代码 #

直接删掉原来无效的ActionLink代码，给下拉补充跳转需要的交互逻辑：

<p>
    快速编辑：
    @* 下拉绑定改造后的带ID的数据源，添加默认提示项，加个ID方便JS选中元素 *@
    @Html.DropDownList("selectedEmployeeId", 
        (IEnumerable<SelectListItem>)ViewBag.EmployeeList, 
        "-- 请选择要编辑的员工 --", 
        new { id = "employeeSelect" })
</p>

@* 用原生JS绑定下拉选中事件，实现自动跳转 *@
<script>
    document.getElementById("employeeSelect").addEventListener("change", function () {
        const selectedEmployeeId = this.value;
        // 用户选中默认提示项时不触发跳转
        if (!selectedEmployeeId) return;
        // 拼接Edit页面地址，把选中的员工ID作为路由参数传过去，匹配ASP.NET MVC默认的路由规则
        window.location.href = '@Url.Action("Edit", "Employee")/' + selectedEmployeeId;
    })
</script>

常见注意点 #

• 保证你对应的Edit动作可以正常接收传过去的ID参数，一般VS脚手架生成的默认public ActionResult Edit(int id)可以直接匹配这个路由格式，不需要额外修改路由配置
• 不需要引入任何第三方插件，上述几行原生JS就可以实现选中即跳转的效果，不会增加额外的页面加载负担
• 如果你不想把下拉数据源存在ViewBag里，也可以把员工列表加到Index视图的强类型Model里，实现逻辑完全一致

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