ASP.NET Core 8 MVC：如何配置多对多关联的多选下拉框？

问题根源分析 #

• SelectList显示字段绑定错误：Email模型中存储邮箱的属性是Email1，但Create方法里用了"Email"，导致无法获取显示文本，下拉框无选项。
• 未开启多选功能：select标签缺少multiple属性，无法进行多选操作。
• 类型不匹配：EmailValues定义为List<string>，但Email的Id是long类型，提交后无法正确绑定选中的邮箱ID。

逐步修复步骤 #

1. 修正Compitem模型的EmailValues类型 #

将EmailValues的类型改为List<long>，匹配Email的Id类型：

public partial class Compitem
{
    // ... 其他原有属性
    
    // 修改为List<long>以适配Email的Id类型
    public List<long> EmailValues { get; set; } = new List<long>();
}

2. 修正Create方法中的SelectList配置 #

把SelectList的显示字段改为"Email1"，对应Email模型的实际属性：

public IActionResult Create()
{
    ViewData["CompProgramId"] = new SelectList(_context.CompPrograms, "Id", "Title");
    ViewData["FrequencyId"] = new SelectList(_context.Frequencies, "Id", "Title");
    ViewData["StatusId"] = new SelectList(_context.Statuses, "Id", "Title");
    // 修正显示字段为Email1，确保能正确读取邮箱地址
    ViewData["EmailValues"] = new SelectList(_context.Emails, "Id", "Email1");
    return View();
}

3. 改造视图中的多选下拉框 #

添加multiple属性开启多选，可搭配size属性优化显示行数：

<div class="form-group">
    <label asp-for="EmailValues" class="control-label">选择邮箱</label>
    <!-- 添加multiple属性开启多选，size设置默认显示行数 -->
    <select asp-for="EmailValues" asp-items="ViewData["EmailValues"]" multiple size="5" class="form-control"></select>
    <span asp-validation-for="EmailValues" class="text-danger"></span>
</div>

4. 处理表单提交后的关联数据保存 #

修改POST版Create方法，在保存Compitem后，批量创建EmailCompitem关联记录：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Compitem compitem)
{
    if (ModelState.IsValid)
    {
        _context.Add(compitem);
        await _context.SaveChangesAsync();
        
        // 遍历选中的邮箱ID，创建中间表关联记录
        foreach (var emailId in compitem.EmailValues)
        {
            var emailCompitem = new EmailCompitem
            {
                CompitemId = compitem.Id,
                EmailId = emailId,
                CreatedAt = DateTime.Now,
                UpdatedAt = DateTime.Now
            };
            _context.EmailCompitems.Add(emailCompitem);
        }
        await _context.SaveChangesAsync();
        
        return RedirectToAction(nameof(Index));
    }
    
    // 验证失败时重新绑定下拉框数据，保留用户已选内容
    ViewData["CompProgramId"] = new SelectList(_context.CompPrograms, "Id", "Title", compitem.CompProgramId);
    ViewData["FrequencyId"] = new SelectList(_context.Frequencies, "Id", "Title", compitem.FrequencyId);
    ViewData["StatusId"] = new SelectList(_context.Statuses, "Id", "Title", compitem.StatusId);
    ViewData["EmailValues"] = new SelectList(_context.Emails, "Id", "Email1", compitem.EmailValues);
    return View(compitem);
}

额外注意事项 #

• 确保数据库的emails表中有数据，如果没有邮箱记录，下拉框自然不会显示选项，可先添加几条测试数据验证。
• 若需要更友好的多选交互（如搜索、标签式选择），可集成Select2等前端插件，上述步骤为原生HTML的基础实现方案。

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