如何将单选择下拉框改为多选择下拉框？ASP.NET Core实现疑问

当前已实现的单选择下拉框代码 #

Municipality模型代码片段 #

[Display(Name = "Associated Agencies")]
public string? AssocAgencies { get; set; }

Municipality Create.cs（PageModel）代码片段 #

public class CreateModel : PageModel
{
    private readonly ApplicationDbContext _db;
    public Municipality Municipality { get; set; }
    public CreateModel(ApplicationDbContext db)
    {
        _db = db;
    }

    public IEnumerable<Agency> DisplayAgencyData { get; set; }

    public async Task OnGet()
    {
        await _db.Agency.Select(a => a.AgencyName).ToListAsync();
        DisplayAgencyData = await _db.Agency.ToListAsync();
    }

    public async Task<IActionResult> OnPost()
    {
        if (ModelState.IsValid)
        {
            _db.Municipality.Add(Municipality);
            await _db.Municipality.AddAsync(Municipality);
            await _db.SaveChangesAsync();
            TempData["success"] = "Municipality added successfully.";
            return RedirectToPage("Index");
        }
        return Page();
    }
}

Municipality Create.cshtml（视图）代码片段 #

<table class="table table-bordeless" style="width:100%">
    <tr>
            <td style="width: 25%">
                <div class="mb-3">
                    <label asp-for="Municipality.AssocAgencies"></label>
                    <select asp-for="Municipality.AssocAgencies" id="Select2" class="form-select" asp-items="@(new SelectList(Model.DisplayAgencyData.OrderBy(x => x.AgencyName),"AgencyName", "AgencyName"))"><option value="" selected disabled>---Select Agency---</option></select>
                </div>
            </td>
    </tr>
</table>

Agency模型数据 #

疑问解答 #

1. 数据表中存储的结果是否为逗号分隔值？ #

是的，ASP.NET Core默认模型绑定逻辑会将多选下拉框的选中值自动拼接为逗号分隔的字符串存储：

• 若下拉框绑定AgencyName（如当前代码），选中选项2、4、6时，存储值为"Board of Appeals, Planning Board, Town Board"
• 若修改为绑定Id，则存储值为"2,4,6"（默认无空格，具体取决于模型绑定处理逻辑）

2. 多选择下拉框相比多个独立单选择下拉框的优劣 #

优势：

• 界面紧凑：选项数量较多时，不会占用大量页面空间，保持界面简洁
• 操作高效：用户无需反复点击不同单选控件，一次打开下拉框即可完成多选项选择，流程更顺畅
• 数据存储简洁：仅需一个字段存储所有选中值，无需为每个选项单独添加数据表字段，减少冗余

劣势：

• 交互门槛：部分新手用户可能不知道需按住Ctrl（Windows）/Command（Mac）键多选，移动端需长按操作，友好度不如直观的多个单选框
• 扩展性差：若后续需为每个选中机构添加额外属性（如备注、优先级），多选下拉框无法满足，需改用其他组件或关联表结构
• 查询局限性：逗号分隔字符串存储时，复杂查询（如精确匹配某一选项）需用LIKE语句，易出现匹配歧义（如名称相似的选项），查询效率和准确性不如多对多关联表结构

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