ASP.NET Core MVC如何实现带复选框列表的多选下拉菜单？

可行实现方案 #

方案1：原生HTML/CSS/JS实现（无额外依赖） #

不需要引入任何第三方组件，直接在你现有代码基础上做样式和交互改造，完全兼容你现有的视图模型绑定逻辑，后端不需要做任何修改。
实现步骤如下：

1. 新增下拉组件的基础样式

.multi-select-dropdown {
  position: relative;
  width: 300px;
}
.dropdown-trigger {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dropdown-content {
  position: absolute;
  top: 105%;
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px 0;
  display: none;
  z-index: 99;
}
.dropdown-content.show {
  display: block;
}
.dropdown-content label {
  display: block;
  padding: 6px 12px;
  cursor: pointer;
}
.dropdown-content label:hover {
  background: #f5f5f5;
}

2. 改造Razor视图代码，把现有复选框列表包裹进下拉容器

<div class="multi-select-dropdown">
  <div class="dropdown-trigger" id="categoryDropdownTrigger">
    <span>已选 @Model.AvailableCategories.Count(c => c.Selected) 个分类</span>
    <span>▼</span>
  </div>
  <div class="dropdown-content" id="categoryDropdownContent">
    @for (Int32 i = 0; i < this.Model.AvailableCategories.Count; i++)
    {
        <label asp-for="@Model.AvailableCategories[i]">
            <input asp-for="@Model.AvailableCategories[i].Selected" /> @Model.AvailableCategories[i].CategoryName
        </label>

        @Html.HiddenFor(x => x.AvailableCategories[i].CategoryId)
        @Html.HiddenFor(x => x.AvailableCategories[i].CategoryName)
    }
  </div>
</div>

3. 新增交互JS实现下拉展开收起、选中计数更新

document.addEventListener('DOMContentLoaded', function() {
  const trigger = document.getElementById('categoryDropdownTrigger');
  const content = document.getElementById('categoryDropdownContent');
  // 点击触发按钮切换下拉状态
  trigger.addEventListener('click', e => {
    e.stopPropagation();
    content.classList.toggle('show');
  });
  // 点击页面其他区域收起下拉
  document.addEventListener('click', () => content.classList.remove('show'));
  // 点击下拉内部区域不触发收起
  content.addEventListener('click', e => e.stopPropagation());
  // 勾选选项后更新顶部计数
  const checkboxes = content.querySelectorAll('input[type="checkbox"]');
  const updateCount = () => {
    const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
    trigger.querySelector('span:first-child').textContent = `已选 ${checkedCount} 个分类`;
  };
  checkboxes.forEach(cb => cb.addEventListener('change', updateCount));
});

方案2：基于前端组件库实现 #

如果你的项目已经引入了Bootstrap等前端框架，可以直接使用成熟的多选下拉组件，只需要把现有复选框列表转换成带multiple属性的select标签结构，组件会自动渲染为带复选框的下拉菜单。只要保证提交的表单字段名和你现有视图模型的属性路径匹配，后端同样不需要做修改。

后端适配注意事项 #

不管选择哪种前端实现方案，都不需要修改后端的视图模型和接收逻辑，只需要保证提交的表单字段名保持AvailableCategories[i].Selected、AvailableCategories[i].CategoryId、AvailableCategories[i].CategoryName的格式即可。

如果需要实现无刷新筛选，只需要在复选框的change事件中新增表单异步提交逻辑，即可在不跳转页面的情况下刷新文章列表。

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