Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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):</p> <p>First, I created a SelectListItemWithAttributes class as follows:</p> <pre><code> public class SelectListItemWithAttributes : SelectListItem { public IDictionary&lt;string, string&gt; HtmlAttributes { get; set; } } </code></pre> <p>This allows me to create items for the select list with the extra attributes attached.</p> <p>Second, I created an HTML helper method called DropDownListWithItemAttributesFor as follows:</p> <pre><code>public static MvcHtmlString DropDownListWithItemAttributesFor&lt;TModel, TValue&gt;(this HtmlHelper&lt;TModel&gt; htmlHelper, Expression&lt;Func&lt;TModel, TValue&gt;&gt; expression, IEnumerable&lt;SelectListItemWithAttributes&gt; selectList) { string name = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(ExpressionHelper.GetExpressionText(expression)); var selectDoc = XDocument.Parse(htmlHelper.DropDownList(name, (IEnumerable&lt;SelectListItem&gt;)selectList).ToString()); var options = from XElement el in selectDoc.Element("select").Descendants() select el; for (int i = 0; i &lt; 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()); } </code></pre> <p>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.</p> <p>Third, in my ViewModel code I have the following:</p> <pre><code>private List&lt;SelectListItemWithAttributes&gt; pDropDownDatas = null; public List&lt;SelectListItemWithAttributes&gt; 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&lt;string, string&gt; { { "data-callback", c.RequiresCallback.ToString().ToLower() } } } ).ToList() ; DropDownDataItems.Insert(0, new SelectListItemWithAttributes() { Text = "-- Select --", Value = "", HtmlAttributes = new Dictionary&lt;string, string&gt; { { "data-callback", "false" } } }); return DropDownDataItems; } } </code></pre> <p>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.</p> <p>Lastly, in the view it would look like this:</p> <pre><code>@Html.DropDownListWithItemAttributesFor(m =&gt; m.DropDownDataID, Model.DropDownDatas) </code></pre> <p>This will display the drop down on the page using the property from the viewmodel that contains the list of SelectListItemsWithAttributes.</p> <p>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.</p> <p>Hope this will help you solve your issue.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload