Добавить атрибут для выбора опции списка

Все забывают «классический» способ решения этих проблем: использовать цикл foreach и на самом деле писать входной html. Единственным недостатком является то, что вам нужно добавить автоматические атрибуты (например, проверку и т. д.), что в зависимости от вашей цели может не иметь большого значения.

Что-то типа:

<select> // add other attributes as expected
@foreach(var type in Model.MyFancyTypes) {
<option value="@type.SubTypeID" data-description="@type.Description" 
    @if(ViewBag.TypeSelected == type.SubTypeID) {
        selected="selected"
    }>@type.Name</option>
}
</select>

У меня была аналогичная ситуация, когда мне нужно было передать третье значение каждому из элементов списка, чтобы определить действие, которое нужно выполнить в функции jQuery. Вот мое решение (которое позволит вам добавить любое количество атрибутов к каждому элементу в раскрывающемся списке):

Сначала я создал класс SelectListItemWithAttributes следующим образом:

    public class SelectListItemWithAttributes : SelectListItem {
        public IDictionary<string, string> HtmlAttributes { get; set; }
    }

Это позволяет мне создавать элементы для списка выбора с прикрепленными дополнительными атрибутами.

Во-вторых, я создал вспомогательный HTML-метод DropDownListWithItemAttributesFor следующим образом:

public static MvcHtmlString DropDownListWithItemAttributesFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, IEnumerable<SelectListItemWithAttributes> selectList) {
    string name = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(ExpressionHelper.GetExpressionText(expression)); 

    var selectDoc = XDocument.Parse(htmlHelper.DropDownList(name, (IEnumerable<SelectListItem>)selectList).ToString());

    var options = from XElement el in selectDoc.Element("select").Descendants()
                          select el;

    for (int i = 0; i < options.Count(); i++){
        var option = options.ElementAt(i);
        var attributes = selectList.ElementAt(i);

        foreach (var attribute in attributes.HtmlAttributes){
                    option.SetAttributeValue(attribute.Key, attribute.Value);
        }
    }

    selectDoc.Root.ReplaceNodes(options.ToArray());
    return MvcHtmlString.Create(selectDoc.ToString());
}

Это позволяет мне создать раскрывающийся список, используя новый класс SelectListWithAttributes в качестве атрибутов. По сути, он создает HTML для раскрывающегося списка, анализирует его в XML-документе, а затем добавляет любые элементы в массив HtmlAttributes в качестве дополнительных атрибутов для каждого элемента в раскрывающемся списке.

В-третьих, в моем коде ViewModel у меня есть следующее:

private List<SelectListItemWithAttributes> pDropDownDatas = null;
public List<SelectListItemWithAttributes> DropDownDatas {
    get {
        var DropDownDataItems = (
            from c in db.GetDropDownDataList(1, 1000)
            where c.AccountTypeID == this.AccountTypeID
            select new SelectListItemWithAttributes() { Text = c.Title, Value = c.ID.ToString(), HtmlAttributes = new Dictionary<string, string> { { "data-callback", c.RequiresCallback.ToString().ToLower() } } } ).ToList()
            ;

        DropDownDataItems.Insert(0, new SelectListItemWithAttributes() { Text = "-- Select --", Value = "", HtmlAttributes = new Dictionary<string, string> { { "data-callback", "false" } } });

        return DropDownDataItems;
    }
}

Это создает список SelectListItemsWithAttributes, который в конечном итоге заполнит раскрывающийся список. Это может быть в контроллере, а не в модели представления, я просто решил сделать его свойством моей модели представления.

Наконец, в представлении это будет выглядеть так:

@Html.DropDownListWithItemAttributesFor(m => m.DropDownDataID, Model.DropDownDatas)

Это отобразит раскрывающийся список на странице, используя свойство из модели представления, которое содержит список SelectListItemsWithAttributes.

Я создал это решение из различных решений, которые нашел в Интернете, поэтому оно не было для меня оригинальным, но я собрал его во что-то, что сработало для меня.

Надеюсь, это поможет вам решить вашу проблему.

Внутри действия контроллера, которое должно получать отправку формы, вы можете использовать идентификатор выбранного значения для запроса вашей базы данных, чтобы получить длинное отображаемое имя и делать с ним все, что вы намеревались сделать.

Помощник DropDownListFor не поддерживает добавление атрибутов data-* HTML5 к параметрам, но даже если бы это было так, они не будут отправлены как часть стандартной отправки формы. Вам придется использовать javascript для отправки их на сервер с использованием другого метода (скрытые поля, AJAX, параметры строки запроса, ...).

Но если по какой-то причине вам нужны дополнительные атрибуты в теге option, вы всегда можете написать собственный помощник.

@nikeaa Спасибо за ваш код. Я обнаружил несколько проблем с ним (например, когда список параметров пуст, выбор отображается неправильно; вам не нужно заменять параметры, просто измените их, иначе некоторые атрибуты выбора удаляются), и я добавил некоторые дополнительные параметры, чтобы в полной мере использовать возможности DropDownListFor. Вот моя версия метода:

public static MvcHtmlString DropDownListWithItemAttributesFor<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItemWithAttributes> selectList,
    string optionLabel, IDictionary<string, object> htmlAttributes)
{
    if (selectList == null || !selectList.Any())
        return htmlHelper.DropDownListFor(expression, selectList, optionLabel, htmlAttributes);

    var selectDoc = XDocument.Parse(htmlHelper.DropDownListFor(expression, selectList, optionLabel, htmlAttributes).ToString());

    var options = selectDoc.Element("select").Descendants().ToArray();

    for (int i = 0; i < options.Length; i++)
    {
        var option = options[i];
        var attributes = selectList.ElementAt(i);

        foreach (var attribute in attributes.Attributes)
            option.SetAttributeValue(attribute.Key, attribute.Value);
    }

    return MvcHtmlString.Create(selectDoc.ToString());
}

Просто возвращаюсь к этому сейчас. Хотя ответ @nikeaa, безусловно, является жизнеспособным решением, я подумал, что он немного тяжеловат, особенно с использованием XDocument. Напомню, что я имею дело с TypeType (Cars) и SubType (список типов автомобилей — Viper, Granada, Hunter, Zodiac, Wolsley 1660 и т. д.). TypeType также может быть Trucks, Bicycles и т. д. Итак, вот как я это решил:

Я добавил метод JsonResult в контроллер, чтобы вернуть анонимный объект с тремя нужными мне свойствами:

public class VehicleController : Controller
{
    // etc.
    public JsonResult GetSubTypesForTypeType(string typeTypeName)
    {
        var cars = pronova2Repository.GetTypeWithSubTypes(typeTypeName);

        return cars == null
        ? Json(new object[0], JsonRequestBehavior.AllowGet)
        : Json(cars.SubTypes.OrderBy(s => s.Name).Select(
            s => new { s.SubTypeID, s.Name, s.Description }).ToArray(),
            JsonRequestBehavior.AllowGet);
    }
    // etc.
}

Затем в js:

Заполните раскрывающийся список:

// populate the cars drop down when the select list is available
if ($('select#SubTypeID').length) {
    var carsSelect = $('select#SubTypeID');
    var carsList = populateCarsList("CARS");
    var carsListHtml = createCarsSelectList(carsList);
    carsSelect.html('');
    carsSelect.append(carsListHtml);

    $('#SubTypeID').change(function (e) {
        clearFormData();
    });
}

Вызовите функцию для получения подтипов (автомобилей) через вызов ajax:

function populateCarsList(typeTypeName) {
    var carsList;

    $.ajax({
        url: '/Vehicle/GetSubTypesForTypeType',
        data: { typeTypeName: typeTypeName },
        async: false
    }).done(function (data) {
        carsList = data;
    }).error(function (msg, url, line) {
        alert("Error retrieving cars from Vehicle/GetSubTypesForTypeType. Error message: " + line);
    });

    return carsList;
}

Функция для создания списка выбора с добавленным описанием в виде атрибута «data-*»:

function createCarsSelectList(selectData) {
    var html = '',
        len = selectData.length,
        selected,
        description;

    for (var i = 0; i < len; i++) {

        // "Viper" should be selected by default
        if (selectData[i].Name.toLocaleUpperCase() === "VIPER") {
            selected = ' selected="selected" ';
        } else {
            selected = '';
        }

        // Add the description (as a "data-" attribute), some descritions are null
        if (selectData[i].Description != null) {
            description = selectData[i].Description;
        } else {
            description = '';
        }

        html += '<option value="' + selectData[i].SubTypeID + '" data-description="' + description + '"' + selected + '>' + selectData[i].Name + '</option>';
    }

    return html;
}