Add attribute to select list option

Question

I have a list of items in a drop down list within a Razor view. In the database each item has 3 values associated with it - the database id, short name (for display), and long name (for passing to a service). The drop down must show the short name, so I'm populating the drop down with the database id as the value and the short name as the text.

However when a user selects an item I need pass the long name as a query parameter to a search service using jQuery, e.g when Cortina is seleted "Ford Cortina 1979 Blue" needs to be passed to the service. My first thought is store the long name as a data dash attribute but I'm wondering is there a better way. So

• How do I store all 3 values in the drop down list?
• If I do use data dash attributes how do I incorporate all the LONG_NAME values into Html.DropDownListFor or somehow add them to the drop down list?

DB:

CARID SHORT_NAME LONG_NAME
1     Viper     Dodge Viper 1982
2     Boxster   Porsche Boxster 2009 Black
3     Cortina   Ford Cortina 1979 Blue

Controller helper to create the drop down:

public static IEnumerable<SelectListItem> GetSelectList(this IEFRepository repository, string typeName)
{
    var vehicle = repository.TypeTypes.FirstOrDefault(t => t.Name.ToUpper() == typeName);
    if (vehicle != null)
    {
        var carList = vehicle.SubTypes.ToList().OrderBy(s => s.Name);
        var selectList = new SelectList(subTypeList, "SubTypeID", "Name");

        return selectList;
    }
}

Here's the code I use to create the drop down:

<div class="editor-field">
    @Html.DropDownListFor(model => model.CarID,
        new SelectList(ViewBag.Cars, "Value", "Text", "1"))
    @Html.ValidationMessageFor(model => model.CarShortName)
</div>

Here's the output:

<select id="CarID" name="CarID" data-val="true" data-val-number="The field CarID must be a number." data-val-required="The CarID field is required.">
    <option value="2">Boxster</option>
    <option value="3">Cortina</option>
    <option selected="selected" value="1">Viper</option>
</select>

Answer 1

Everyone forgets the "classic" way to solve these problems: use a foreach loop and actually write the input html. Only downside is you have to add the automatic attribute stuff (like validation, etc), which depending on your purpose may not be a big deal.

Something like:

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

Answer 2

I had a similar situation where I needed to pass a third value to each of the list items to determine the action to take in a jQuery function. Here is my solution (which will allow you to add any number of attributes to each item in the drop down):

First, I created a SelectListItemWithAttributes class as follows:

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

This allows me to create items for the select list with the extra attributes attached.

Second, I created an HTML helper method called DropDownListWithItemAttributesFor as follows:

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());
}

This allows me to create a drop down using the new SelectListWithAttributes class as the attributes. Basically, it creates the HTML for the drop down list, parses it into an XML document, then adds any items in the HtmlAttributes array as additional attributes to each item in the drop down.

Third, in my ViewModel code I have the following:

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;
    }
}

This builds the list of SelectListItemsWithAttributes that are going to ultimately populate the dropdown. This could be in a controller instead of the viewmodel, I just elected to make it a property of my viewmodel.

Lastly, in the view it would look like this:

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

This will display the drop down on the page using the property from the viewmodel that contains the list of SelectListItemsWithAttributes.

I constructed this solution from various solutions that I found on the internet, so it wasn't all original to me, but I put it together into something that worked for me.

Hope this will help you solve your issue.

Answer 3

Inside the controller action that is supposed to receive the form submit you could use the id of the selected value to query your database in order to fetch the long display name and do whatever you was intending to do with it.

The DropDownListFor helper doesn't support adding HTML5 data-* attributes to the options but even if it did they will not be sent as part of a standard form submission. You will have to use javascript to send them to the server using another technique (hidden fields, AJAX, query string parameters, ...).

But if form some reason you need additional attributes on the option tag you could always write a custom helper.

Answer 4

@nikeaa Thank you for your code. I found a few issues with it (e.g. when the option list is empty, the select is not rendered correctly; you don't need to replace the options, just modify them, otherwise some attributes of the select are removed) and I added some additional parameters to fully use the power of DropDownListFor. Here is my version of the method:

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());
}

Answer 5

Just getting back to this now. While @nikeaa's answer is certainly a viable solution I thought it was a bit heavyweight especially using XDocument. As a reminder what I'm dealing with is a TypeType (Cars) and SubType (list of car types - Viper, Granada, Hunter, Zodiac, Wolsley 1660, etc). TypeType could also be Trucks, Bicycles, etc. So here's how I solved it:

I added a JsonResult method on the Controller to return an anonymous object with the 3 properties that I wanted:

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.
}

Then in js:

Populate the drop down:

// 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();
    });
}

Call a function to get the subtypes (cars) via an ajax call:

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;
}

Function to create the select list with the added description as a "data-*" attribute:

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;
}