ASP.NET MVC如何获取模态框复选框选中值并以列表形式传入控制器

问题根源 #

你的代码存在两个核心问题：

1. 提交分配请求时未将选中的员工ID列表传递到后端
2. 后端Post方法直接遍历全量可分配员工列表，没有基于选中的ID做筛选

修改方案 #

1. 调整后端GroupAssign接口 #

新增接收选中员工ID的参数，替换原有全量遍历逻辑：

[HttpPost]
public ActionResult GroupAssign(int projectNumber, List<string> selectedEmployeeIds)
{
    // 未选中任何员工直接返回
    if(selectedEmployeeIds == null || !selectedEmployeeIds.Any())
    {
        return RedirectToAction("ManageTeam", new { projectNumber = projectNumber });
    }
    ProjectDetailsDTO project;
    ManageTeamModel viewModel;

    project = _projectService.GetProjectDetails(projectNumber);
    viewModel = MapProjectToManageTeamViewModel(project);

    // 替换为选中的员工列表
    var empList = selectedEmployeeIds;
    var assignedList = _projectService.GetTeamMembersDetails(projectNumber).Select(x => x.EmployeeID).ToList();

    foreach (var employeeId in empList)
    {
        try
        {
            if (!assignedList.Contains(employeeId))
            {
                _projectService.AssignTeamMember(projectNumber, employeeId, false);
            }
        }
        catch (Exception ex)
        {
            continue;
        }
       
    }
    // 若已经做了前端局部更新可以去掉location.reload，避免重复刷新
    return PartialView("ManageTeam", viewModel);
}

2. 调整视图复选框定义 #

给复选框新增统一类名，方便JS选择，可根据需求调整默认选中状态（原代码第二个参数为true默认全选）：

@* 把原有复选框行替换为如下代码，默认未选中可以把第二个参数改成false *@
<td>@Html.CheckBox("selectedItem", false, new {@value = @employee.EmployeeId, @class = "employee-checkbox"})</td>

3. 修改确认按钮点击逻辑 #

收集选中的员工ID传递给请求方法：

_ctx.on('click', '#btnConfirmGroupAssign', function () {
    // 收集所有选中的员工ID
    const selectedIds = $('.employee-checkbox:checked').map(function(){
        return this.value;
    }).get();
    teamService.groupAssign(_projectNumber, selectedIds, function (response) {
        _ctx.find('#groupAssignSettingModal').modal('hide');
        _ctx.update(response);
        // 若已经做了局部更新可删除下一行
        location.reload();
    });
});

4. 调整groupAssign请求方法 #

新增选中ID参数，提交到后端：

groupAssign: function () {
    $.post('./Team/GroupAssign', { 
        projectNumber: arguments[0], 
        selectedEmployeeIds: arguments[1] 
    }, arguments[2]);
},

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