在Asp.net Core Razor Pages中批量提交多选列表项至数据库

问题分析 #

当前无法批量提交的核心原因：

• 表单多选控件绑定的是单个ReferralStaff.AssignmentNumber属性，仅能接收一个选中值
• Post方法中直接尝试添加单个ReferralStaff对象，未遍历选中的多个员工项生成对应记录
• 模型的外键关系未明确配置，可能导致关联数据保存异常

步骤1：修正模型的外键关联关系 #

给TblReferralStaff的外键属性添加特性，明确与TblReferrals的关联逻辑：

public class TblReferrals
{
    [Key]
    public string? IncidentId { get; set; }

    // 可选：添加导航属性，关联下属员工记录
    public ICollection<TblReferralStaff> ReferralStaffs { get; set; } = new List<TblReferralStaff>();
}

public class TblReferralStaff
{   
    public int Id { get; set; }

    public string? AssignmentNumber { get; set; }

    [ForeignKey(nameof(IncidentId))]
    public TblReferrals TblReferrals { get; set; }

    public string? IncidentId { get; set; }
}

步骤2：调整页面模型的绑定属性 #

将单值绑定改为列表绑定，用于接收多选的员工编号：

public class YourPageModel : PageModel
{
    private readonly YourDbContext _db;

    public YourPageModel(YourDbContext db)
    {
        _db = db;
    }

    [BindProperty]
    public List<string> SelectedAssignmentNumbers { get; set; } = new List<string>();

    [BindProperty]
    public TblReferrals Referral { get; set; } = new TblReferrals();

    public SelectList EsrRecords { get; set; }

    // 页面初始化逻辑（示例）
    public async Task OnGetAsync()
    {
        // 从数据库获取员工编号选项
        var staffNumbers = await _db.YourStaffTable.Select(s => s.AssignmentNumber).ToListAsync();
        EsrRecords = new SelectList(staffNumbers);
    }

    // 修正后的批量提交Post方法
    public async Task<IActionResult> OnPostNewReferral()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        // 先保存主表记录，确保IncidentId被赋值
        await _db.TblReferrals.AddAsync(Referral);
        await _db.SaveChangesAsync();

        // 遍历选中的员工编号，生成关联记录
        var referralStaffList = new List<TblReferralStaff>();
        foreach (var assignmentNum in SelectedAssignmentNumbers)
        {
            referralStaffList.Add(new TblReferralStaff
            {
                AssignmentNumber = assignmentNum,
                IncidentId = Referral.IncidentId // 关联主表的IncidentId
            });
        }

        // 批量添加并保存员工关联记录
        await _db.TblReferralStaff.AddRangeAsync(referralStaffList);
        await _db.SaveChangesAsync();

        return new JsonResult(referralStaffList);
    }
}

步骤3：修改表单的多选控件绑定 #

将多选框的asp-for指向页面模型的列表属性，确保所有选中值被正确提交：

<form method="post" id="newReferralForm">
    
    <div class="row my-md-3">
        <div class="col-md-6">
            <label>Staff Names</label>                 
            <select class="form-control staffReferral" multiple="multiple" asp-items="@Model.EsrRecords" asp-for="@Model.SelectedAssignmentNumbers">
                <option></option>
            </select>
        </div>               
    </div>           
    <div class="row my-md-3">              
        <div class="col-md-6">
            <label>Incident Number</label>
            <input class="form-control" asp-for="@Model.Referral.IncidentId" />
        </div>
    </div>
  
    <div class="d-flex justify-content-center mt-5">
        <button class="btn btn-primary fw-bold createReferral">Submit</button>
    </div>
</form>

关键说明 #

• 必须先保存TblReferrals主表记录，确保IncidentId生成后，才能关联到TblReferralStaff的外键
• 多选控件绑定到List<string>类型属性后，表单提交时会自动将所有选中值填充到列表中
• 使用AddRangeAsync批量添加关联记录，提升操作效率并保证批量提交的原子性

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