MVC 下拉列表 - 从项目绑定多个属性

【问题标题】：MVC dropdownlist - bind multiple property from itemsMVC 下拉列表 - 从项目绑定多个属性
【发布时间】：2021-08-21 22:20:39
【问题描述】：

我有研究所收藏。它包含 ID、描述、名称、年龄等属性。选择后我可以得到ID和描述。但是如何根据选择获取其他属性（例如名称）。在这里，我也需要“Name”属性。

我有以下用 javascript 编写的 onchange 函数。我必须获得“名称”属性值。我不想再次调用服务器逻辑 -

$("#InstituteID").change(function() {
// Need some logic to get Name value

});

下拉列表代码-

@Html.DropDownList("InstituteID",
                       new SelectList(
                           ViewBag.Institutes,
                           "ID",
                           "Description"
                       ),
                "-- Institute Type --", new { @class = "form-control" })

【问题讨论】：

标签： javascript asp.net-mvc html-helper

【解决方案1】：

您可以使用选择标签选项的 data-attributes 属性。

你必须像这样修改 HTML 标记：

@{
 var Institutes = new List<Institutes>() {
 new Institutes(){ ID=1,Description="test1",Name="name1",age=20 },
 new Institutes(){ ID=2,Description="test2",Name="name2",age=21 },
 new Institutes(){ ID=3,Description="test3",Name="name3",age=22 }
 };
}

<select name="InstituteID" id="InstituteID">
@foreach (var item in Institutes)
{
    <option data-name="@item.Name" data-age="@item.age" value="@item.ID">@item.Description</option>
}
</select>

Javascript 将如下所示：

<script>
$(document).ready(function () {

    $("#InstituteID").change(function () {
        var element = $(this).find('option:selected');
        var name = element.attr("data-name");
        var name = element.attr("data-age");
        console.log("selected name is:"+ name);
    });
})

【讨论】：