How to set the value and text values of a select element from a list of integers

Question

How do you set the value and text values for a drop down list while at the same time binding it to a view model?

I have a list of quantities ranging from 1 thru 100. I want to pass this list of integers to my view and have them populated in a drop down list, and have the value and text values equal to the corresponding quantity. For example I am after something like this:

<select>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     ...
     <option value="100">100</option>
</select>

I currently only get:

<select>
     <option>1</option>
     <option>2</option>
     <option>3</option>
     ...
     <option>100</option>
</select>

My view model:

public class ProductViewModel : ViewModelBase
{
     public ProductViewModel()
     {
          Quantities = new List<int>();
          for (int i = 1; i <= 100; ++i)
          {
               Quantities.Add(i);
          }
     }

     public int Quantity { get; set; }

     public List<int> Quantities { get; set; }

     // Other view model properties left out
}

My controller:

public ActionResult Test()
{
     ProductViewModel model = new ProductViewModel();

     return View(model);
}

My view:

@model MyProject.Models.ProductViewModel

@Html.DropDownListFor(m => m.Quantity, new SelectList(Model.Quantities))

Why? `` and `` are exactly the same as far as the browser and what is posted in form data (if an option does not have a `value` attribute, the value of the select is the 'text' of the option) — , Aug 13 '15 at 11:22
@StephenMuecke, just curious, is that true for all browsers? — Andrei, Aug 13 '15 at 11:29
@Andrei, AFAIK yes. Its in the [standards](http://www.w3.org/TR/html5/single-page.html#concept-option-value) (HTML-4 is the same) and if even IE6 respects it :) — , Aug 13 '15 at 11:38

score 3 · Accepted Answer · edited May 23 '17 at 12:00

One workaround would be a little bit of LINQ:

new SelectList(Model.Quantities.Select(i => new {Text = i, Value = i}),
               "Text", "Value")

One field in the anonymous object will do as well, but I find separate fields to be more explicit.

Otherwise you could put SelectList object inside the model, and then there is an option to create individual SelectListItems. But from where you are the trick above is the shortest way I guess.

Update. I'll leave answer as it is, but Stephen Muecke's comment to the original post basically renders it useless. The right answer is you do not need this, as in case of absent value text is used when form is posted to the server.

score 1 · Answer 2 · answered Aug 13 '15 at 10:35

Add a property to your viewmodel:

public List<SelectListItem> AvailableQuantities { get; set; }

In the controller, populate the list like so:

ProductViewModel model = new ProductViewModel();

model.AvailableQuantities.AddRange(model.Quantities.Select(item => new SelectListItem
{
    Text = item.ToString(),
    Value = item.ToString()
});

In the view:

@Html.DropDownListFor(m => m.Quantity, Model.AvailableQuantities)

score 1 · Answer 3 · answered Aug 13 '15 at 10:35

Best solution will be to use your Model as follow:

public class TestModel
    {
        public IList<int> Quantities { get; set; }
        public int SelectedQuantity { get; set; }
        public IList<SelectListItem> QuantitiesSelectListItems
        {
            get
            {
                var list = (from item in Quantities
                            select new SelectListItem()
                            {
                                Text = item.ToString(),
                                Value = item.ToString(CultureInfo.InvariantCulture),
                            }).ToList();

                return list;
            }
        }

        public TestModel()
        {
            Quantities=new List<int>();
        }
    }

And in view you can do following:

@Html.DropdownListFor(c=>c.SelectedQuantity,Model.QuantitiesSelectListItems)

I think this is the best approach for that .

score 0 · Answer 4 · edited May 23 '17 at 12:00

0

I don't have the reputation to add a comment yet, that's why I'm posting it as a separate answer. You can find the solution to your problem in here, I think: Asp.Net MVC with Drop Down List, and SelectListItem Assistance

Basically, you need to have an IEnumerable of SelectListItem and then specify the Text and Value fields in the SelectList constructor in the View.

edited May 23 '17 at 12:00

Community

1
1

answered Aug 13 '15 at 10:27

Charmander

276
3
20

How to set the value and text values of a select element from a list of integers

4 Answers4