ASP.NET Core 2.0 Ajax表单多员工多选报销项关联处理问询

这个场景我之前做批量操作时也遇到过，核心痛点就是提交的表单数据没法把报销项和对应的员工ID关联起来。其实利用ASP.NET Core的模型绑定特性，就能轻松解决，给你两个实用的方案：

方案一：使用强类型列表模型绑定（推荐） #

这是最简洁的方式，通过规范表单字段的命名，让框架自动把数据绑定到对应的员工对象列表里。

1. 定义视图模型 #

首先在后端创建一个用于接收批量数据的视图模型：

public class EmployeeReimbursementViewModel
{
    public int EmployeeID { get; set; }
    // 存储该员工选中的报销项ID列表
    public List<int> SelectedReimbursementIds { get; set; }
}

2. 前端渲染表单 #

在Razor视图里循环渲染每个员工的信息和多选框时，要给表单字段设置带索引的命名，比如：

@model List<EmployeeReimbursementViewModel>

<form id="batchUpdateForm">
    @for (int i = 0; i < Model.Count; i++)
    {
        <div class="employee-row">
            <!-- 隐藏域存储员工ID -->
            <input type="hidden" name="[@i].EmployeeID" value="@Model[i].EmployeeID" />
            <label>员工编号：@Model[i].EmployeeID</label>
            <!-- 多选框的name要对应视图模型的属性，带索引 -->
            <select multiple name="[@i].SelectedReimbursementIds">
                @foreach (var reimbursement in ViewBag.AllReimbursements)
                {
                    <option value="@reimbursement.Id" 
                        @(Model[i].SelectedReimbursementIds.Contains(reimbursement.Id) ? "selected" : "")>
                        @reimbursement.Name
                    </option>
                }
            </select>
        </div>
    }
    <button type="button" id="submitBtn">批量提交</button>
</form>

3. 后端接收数据 #

控制器里直接用List<EmployeeReimbursementViewModel>作为参数，框架会自动完成绑定：

[HttpPost]
public IActionResult BatchUpdate(List<EmployeeReimbursementViewModel> employees)
{
    // 这里employees里每个对象都对应一个员工，包含其选中的报销项ID列表
    foreach (var emp in employees)
    {
        // 处理该员工的报销项更新逻辑，比如：
        // _employeeService.UpdateReimbursements(emp.EmployeeID, emp.SelectedReimbursementIds);
    }
    return Json(new { success = true, message = "批量更新完成" });
}

方案二：通过表单字段前缀关联员工ID（灵活场景） #

如果不想用索引，也可以把员工ID作为表单字段名的一部分，后端通过解析字段名来匹配关联关系。

1. 前端渲染表单 #

每个员工的多选框和ID字段都带上员工ID作为后缀：

@foreach (var employee in Model)
{
    <div class="employee-row">
        <input type="hidden" name="EmployeeID_@employee.EmployeeID" value="@employee.EmployeeID" />
        <label>员工编号：@employee.EmployeeID</label>
        <select multiple name="Reimbursement_@employee.EmployeeID">
            @foreach (var reimbursement in ViewBag.AllReimbursements)
            {
                <option value="@reimbursement.Id" 
                    @(employee.SelectedReimbursementIds.Contains(reimbursement.Id) ? "selected" : "")>
                    @reimbursement.Name
                </option>
            }
        </select>
    </div>
}

2. 后端解析表单数据 #

用IFormCollection接收表单，然后遍历字段拆分出员工ID和对应的报销项：

[HttpPost]
public IActionResult BatchUpdate(IFormCollection form)
{
    var employeeReimbursementMap = new Dictionary<int, List<int>>();

    // 先收集所有员工ID
    foreach (var key in form.Keys.Where(k => k.StartsWith("EmployeeID_")))
    {
        var empId = int.Parse(key.Replace("EmployeeID_", ""));
        employeeReimbursementMap[empId] = new List<int>();
    }

    // 再匹配每个员工的报销项
    foreach (var key in form.Keys.Where(k => k.StartsWith("Reimbursement_")))
    {
        var empId = int.Parse(key.Replace("Reimbursement_", ""));
        var selectedIds = form[key].Select(int.Parse).ToList();
        employeeReimbursementMap[empId].AddRange(selectedIds);
    }

    // 后续业务逻辑处理
    return Json(new { success = true });
}

Ajax提交注意事项 #

不管用哪个方案，Ajax提交时要确保数据格式正确：

$('#submitBtn').click(function() {
    var formData = $('#batchUpdateForm').serialize();
    $.ajax({
        url: '/Employee/BatchUpdate',
        type: 'POST',
        data: formData,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        success: function(res) {
            alert(res.message);
        },
        error: function(xhr) {
            console.error(xhr.responseText);
        }
    });
});

方案一的强类型绑定更符合ASP.NET Core的最佳实践，代码可读性和维护性都更好，优先推荐这个方案。

内容的提问来源于stack exchange，提问作者M.Sharma