53

Есть ли какой-либо вариант, который должен быть выбран в ListMistel с помощью атрибутов данных?SelectListItem с атрибутами данных

Я хочу сделать

@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> 

ответ

83

Вот простое решение.

Не все должно быть написано с помощью метода расширения в коде .NET. Одна из замечательных особенностей MVC - это легкий доступ к созданию собственного HTML.

С MVC4 вы можете получить идентификатор и имя элемента на дереве выражения с помощниками HTML.NameFor и HTML.IdFor

<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 представляет собой совокупность элементов, которые выставляют каждый из этих свойств. Тогда вы должны быть настроены.

Если вы хотите повторного, рассмотреть возможность сделать это шаблон редактора для чего-либо, что является перечислимых городов

+2

Интересно ... Я didn 't знать о html.namefor и т. д. Я дам ему попробовать –

+1

Отличный совет для добавления реальной гибкости в ваш html. – ChandlerPelhams

+5

Так как razor2 вы можете просто сделать 'selected =" @ city.Value == Model.CityId "' и он будет генерировать правильную разметку (либо выбрано = «выбрано», либо ничего) – Diego

9

Вы должны будете продлить SelectListItem, а затем продлить DropDownListFor использовать расширенную SelectListItem.

Посмотрите на это решение:

Adding html class tag under <option> in Html.DropDownList

+1

это выглядит как правильный ответ, но, кажется, своего рода некрасиво. Я скорее напишу сам, чем продюсер SelectListItem и DropDownListFor, я думаю. Я не уверен. –

+3

Я не знаю, почему ты считаешь это уродливым, но мне кажется более логичным. Каждый SelectListItem представляет собой тег параметра в последнем html, и вам нужно добавить пользовательские атрибуты html в тег option (SelectListItem), поэтому имеет смысл расширить SelectListItem. – ataravati

+1

Я думаю, что это уродливо с точки зрения mvc. но решение - это именно то, как с этим бороться. –