mvc3 Html.DropDownListFor - dynamically create "value" attribute in <option>

Question

I am trying to dynamically generate the "value" attribute of the tag using the HTML.DropDownListFor, but I am running into issues. I am thinking of just hard-coding a for-loop and inserting raw HTML, but I am positive there is an easier way to do this (?)

I have a view model:

    public class DSDCustomerViewModel
        {
            public IEnumerable<dsd_l_chain> chainBuild { get; set; }
            public string Id_dsd { get; set; }
            public string Owner { get; set; }
            public IEnumerable<string> WFCategory { get; set; }
            public IEnumerable<string> TransactionType { get; set; } 
[etc etc etc]

the chainBuild property comes from my database (using EF) that I fill using an extension method for my view as follows:

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <table>
        <tbody>
[etc etc]
<td colspan="1" rowspan="1">
                    Chain Name
                </td>
                <td colspan="1" style="vertical-align: top;">
                    @Html.DropDownListFor(model => model.cc_chainName, new SelectList(Model.cc_chainName), "Select ...")
                </td>
                <td rowspan="1" colspan="2" style="vertical-align: top;">
                    @Html.ValidationMessageFor(model => model.cc_chainName)
                </td>
[etc etc]

the cc_chainName EF object has the attributes "Chain_Desc", "Chain", "Chain_Group" and "ID" among others.

The generated HTML is as follows:

<select id="cc_chainName" name="cc_chainName"><option value="">Select ...</option>
<option>1ST STOP</option>
<option>3 RIVERS ICE CREAM SPCLTS</option>
<option>3RIVERS SALES TO NON-NAP CUSTS</option>

How do I modify:

@Html.DropDownListFor(model => model.cc_chainName, new SelectList(Model.cc_chainName), "Select ...")

...so that the generated HTML code set the "value" attribute of the tag to cc_chainName.ID? so that the generated HTML would look like this:

<select id="cc_chainName" name="cc_chainName"><option value="">Select ...</option>
<option value="1">1ST STOP</option>
<option value="2">3 RIVERS ICE CREAM SPCLTS</option>
<option value="3">3RIVERS SALES TO NON-NAP CUSTS</option>

note the "value" tags contain the IDs from the cc_chainName model

Thanks!

Simon Whitehead · Accepted Answer · 2013-09-05 22:30:05Z

3

Each SelectList takes a dataValueField and dataTextField property in the constructor:

@Html.DropDownListFor(model => model.cc_chainName, 
                     new SelectList(Model.cc_chainName, 
                                    "ID", "TextualPropertyNameHere"), "Select ...")
                            //      ^^ id property and text property here

You didn't supply the text property name.. so the above assumes a model similar to this:

class cc_chainName {
    public int ID { get; set; }
    public string TextualPropertyNameHere { get; set; }
}

EDIT:

In response to your comment.

Consider this model:

public class Product {
    public int Id { get; set; }
    public string ProductName { get; set; }
}

With it setup as an enumerable in a view:

@model IEnumerable<YourApplication.Models.Product>

..with this Controller action:

var products = new List<Product>()
{
    new Product() { Id = 1, ProductName = "Lollies" },
    new Product() { Id = 2, ProductName = "Beer" },
    new Product() { Id = 3, ProductName = "Funny Hat" }
};

return View(products);

This DropDownList (notice the property names are strings in the SelectList):

@Html.DropDownList("myDropDown", new SelectList(Model, "Id", "ProductName"), "-- Select item --")

Produces the following markup:

<select id="myDropDown" name="myDropDown">
    <option value="">-- Select item --</option>
    <option value="1">Lollies</option>
    <option value="2">Beer</option>
    <option value="3">Funny Hat</option>
</select>

To get what you wanted, you can explicitly pass "ProductName" in both strings.. like this:

@Html.DropDownList("myDropDown", new SelectList(Model, "ProductName", "ProductName"), "-- Select item --")

Which produces:

<select id="myDropDown" name="myDropDown">
    <option value="">-- Select item --</option>
    <option value="Lollies">Lollies</option>
    <option value="Beer">Beer</option>
    <option value="Funny Hat">Funny Hat</option>
</select>

edited Sep 5, 2013 at 22:30

answered Sep 5, 2013 at 0:07

Simon Whitehead

65.3k10 gold badges120 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TryingReallyHardToDoBetter Over a year ago

I still get "<Option>" tags without "<Option value="something">. Perhaps I should rephrase something more simple: what if I wanted to out put HTML that looked like this: <Option value="1ST STOP">1ST STOP</option> <option value="3 RIVERS ICE CREAM SPCLTS">3 RIVERS ICE CREAM SPCLTS</option> ???

Simon Whitehead Over a year ago

Updated my answer to better show you how it works. Hope that helps.

Tarang Hirani · Accepted Answer · 2014-06-20 19:19:41Z

0

How would take into consideration distinct option elements? I have a DropDownList with some repeated elements from a Database. I can only seem to get either value attributes or distinct elements.

Here's my code for that:

@Html.DropDownList("ResidentialBuilding", new SelectList(Model.Select(x => x.type).Distinct()))

answered Jun 20, 2014 at 19:19

Tarang Hirani

5901 gold badge12 silver badges44 bronze badges

Collectives™ on Stack Overflow

mvc3 Html.DropDownListFor - dynamically create "value" attribute in <option>

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related