在.NET MVC中如何使用ViewModel中的数组内容填充DropDown下拉框

你不需要额外创建ViewModel或者List类，直接复用你生成按钮的逻辑改造即可，操作步骤如下：

1. 把原来的按钮组代码替换为下拉框代码，和生成按钮的逻辑完全一致，只是把<button>标签换成<option>标签：

<!-- 下拉框结构，如果要适配Chosen插件，给select加chosen对应的class即可 -->
<select class="form-control btn-filter" id="projectFilter">
    <option value="all">全部</option>
    @foreach (var item in Model.Select(s => s.ProjectName).Distinct().ToArray())
    {
        <option value="@item">@item</option>
    }
</select>

2. 适配你已有的过滤逻辑，只需要把之前监听按钮点击的事件，换成监听下拉框的change事件即可，筛选值的获取逻辑几乎没有变化：

// 替换原来的按钮点击监听代码即可
$('#projectFilter').on('change', function() {
    // 拿到选中的项目名，和你之前从按钮data-target取到的值格式完全一致
    const filterTarget = $(this).val();
    // 直接复用你已经写好的过滤逻辑即可
})

如果需要启用Chosen样式，正常初始化即可：

$(function(){
    $('#projectFilter').chosen();
})

你之前的思路完全没错，只是没反应过来生成按钮和生成下拉选项的逻辑是通用的，只是外层容器和子标签的类型不一样而已，不需要额外做服务端的改造。

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