ASP.NET MVC创建视图中实现部门下拉框随公司选择联动过滤

1. 后端准备 #

初始化视图数据 #

在UserController的Create方法中，先传递所有公司数据到视图，用于渲染公司下拉框：

public IActionResult Create()
{
    // 加载所有公司列表
    ViewBag.CompanyList = new SelectList(_context.Companies, "ID", "Name");
    // 初始部门列表设为空，或默认加载第一个公司的部门
    ViewBag.DepartmentList = new SelectList(Enumerable.Empty<Department>(), "ID", "Name");
    return View();
}

添加部门查询接口 #

新增一个HTTP Get接口，用于根据公司ID返回对应部门数据：

[HttpGet]
public IActionResult GetDepartmentsByCompanyId(int companyId)
{
    var departments = _context.Departments
        .Where(d => d.CompanyID == companyId)
        .Select(d => new { d.ID, d.Name })
        .ToList();
    return Json(departments);
}

2. 视图（Create.cshtml）实现 #

在表单中添加两个下拉框，分别绑定公司和部门：

<div class="form-group">
    <label class="control-label">选择公司</label>
    <select id="companySelect" asp-items="ViewBag.CompanyList" class="form-control">
        <option value="">请选择公司</option>
    </select>
</div>

<div class="form-group">
    <label asp-for="DepartmentID" class="control-label"></label>
    <select id="departmentSelect" asp-for="DepartmentID" asp-items="ViewBag.DepartmentList" class="form-control">
        <option value="">请选择部门</option>
    </select>
    <span asp-validation-for="DepartmentID" class="text-danger"></span>
</div>

3. JavaScript联动逻辑 #

在视图末尾添加脚本，监听公司下拉框的变化，异步更新部门列表：

<script>
    const companySelect = document.getElementById('companySelect');
    const departmentSelect = document.getElementById('departmentSelect');

    companySelect.addEventListener('change', function() {
        const companyId = this.value;
        // 清空现有部门选项
        departmentSelect.innerHTML = '<option value="">请选择部门</option>';

        if (companyId) {
            // 请求后端接口获取部门数据
            fetch(`/User/GetDepartmentsByCompanyId?companyId=${companyId}`)
                .then(res => res.json())
                .then(data => {
                    // 动态生成部门选项
                    data.forEach(dept => {
                        const option = document.createElement('option');
                        option.value = dept.ID;
                        option.textContent = dept.Name;
                        departmentSelect.appendChild(option);
                    });
                })
                .catch(err => console.error('加载部门失败:', err));
        }
    });
</script>

额外注意事项 #

• 确保控制器已正确注入DbContext，用于数据库查询操作。
• 若需支持编辑场景的回显，在对应方法中要根据用户所属公司预先加载部门列表并设置默认选中值。
• 可添加加载状态提示（如禁用下拉框、显示加载图标），优化用户体验。
• 后端接口需添加参数校验，防止非法请求。

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