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

Question

我有学院collection。它包含 ID、描述、名称、年龄等属性。选择后我可以获得ID和描述。但是如何根据选择获取其他属性（例如名称）。在这里，我还需要“姓名”属性。

我在 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" })

Answer 1

您可以使用 select 标签选项的数据属性属性。

您必须像这样修改 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);
    });
})

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

MVC dropdownlist - bind multiple property from items

javascript

asp.net-mvc

html-helper

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

MVC dropdownlist - bind multiple property from items

javascript

asp.net-mvc

html-helper

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