如何在ASP.NET MVC中创建可选择对象的下拉列表

可以实现，但由于ASP.NET MVC的DropDownListFor最终生成原生HTML的<select>标签，而原生<select>仅支持传递单个值（如Id），因此需要通过HTML5自定义属性结合前端JS来获取完整对象信息，无需额外编写匹配赋值代码。

实现方案：利用data-*属性存储额外字段 #

1. 后端生成带自定义属性的下拉选项 #

先在后端将CurrencyCode存入每个下拉选项的data-属性中，替代原有的SelectList：

@{
    // 生成包含data-currencycode属性的SelectListItem集合
    var countryOptions = Model.Countries.OrderBy(x => x.CountryName)
        .Select(x => new SelectListItem
        {
            Value = x.Id.ToString(),
            Text = x.CountryName,
            Selected = x.Id == Model.Id,
            // 把CurrencyCode存入自定义data属性
            Attributes = new Dictionary<string, string>
            {
                { "data-currencycode", x.CurrencyCode }
            }
        })
        .OrderBy(r => r.Text);
}

2. 渲染下拉列表 #

用生成好的countryOptions替换原DropDownListFor的数据源：

@Html.DropDownListFor(model => model.Id, countryOptions, "----- Select Country-----", new { @id = "ddlCountry", @class = "form-control select2" })

3. 前端获取选中项的CurrencyCode #

通过监听下拉框的change事件，直接从选中选项的data-currencycode属性中取值，无需遍历原列表匹配Id：

document.getElementById('ddlCountry').addEventListener('change', function() {
    const selectedOpt = this.options[this.selectedIndex];
    const currencyCode = selectedOpt.dataset.currencycode;
    // 可将currencyCode赋值给页面元素或用于提交
    console.log('选中的货币代码：', currencyCode);
});

说明 #

这种方式和Angular的[ngValue]逻辑类似：Angular是在前端维护对象引用，而此方案是将对象的额外字段提前存入HTML属性中，选中时直接读取，避免了手动根据Id去原列表匹配对象的冗余代码。

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