具有数据属性的 SelectListItem

Question

无论如何有一个 SelectList 预填充在 ViewModel 与 data-attributes ？

我想要做

@Html.DropdownListFor(m=> m.CityId, Model.Cities);

所以它生成如下代码：

 <select id="City" class="location_city_input" name="City">
    <option data-geo-lat="-32.522779" data-geo-lng="-55.765835" data-geo-zoom="6" />
    <option data-geo-lat="-34.883611" data-geo-lng="-56.181944" data-geo-zoom="13" data-geo-name="Montevideo" data-child=".state1" value="1">Montevideo</option>
    <option data-geo-lat="-34.816667" data-geo-lng="-55.95" data-geo-zoom="13" data-geo-name="Canelones, Ciudad de la Costa" data-child=".state41" value="41">Ciudad de la Costa</option>
</select>

原文由 Bart Calixto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是简单的解决方案。

并非所有内容都必须在 .NET 代码中使用扩展方法编写。 MVC 的一大优点是它使您可以轻松访问以构建您自己的 HTML。

使用 MVC4，您可以使用助手 HTML.NameFor 和 HTML.IdFor 获取表达式树上元素的 ID 和名称

<select name="@Html.NameFor(Function(model) model.CityId)"
        id="@Html.IdFor(Function(model) model.CityId)"
        class="location_city_input">
    @For Each city In Model.Cities
        @<option value="@city.Value"
                 @(If(city.Value = Model.CityId, "selected", ""))
                 data-geo-lat="@city.Lat"
                 data-geo-lng="@city.Lng"
                 data-geo-zoom="@city.Zoom">
            @city.Text
        </option>
    Next
</select>

假设 Model.Cities 是公开每个属性的项的集合。那么你应该都准备好了。

如果您想要可重用性，请考虑将其作为任何可枚举城市的编辑器模板

原文由 KyleMit 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您必须扩展 SelectListItem，然后扩展 DropDownListFor 才能使用扩展的 SelectListItem。

看看这个解决方案：

在 Html.DropDownList 的 下添加 html class 标签

原文由 ataravati 发布，翻译遵循 CC BY-SA 3.0 许可协议