How to display multiple DropDownLists and get values in ASP.Net MVC

Question

I'm looking for a simple way of creating dropdownlists through loop, and then store the values in the model.

View Model:

public class PreferencesShoppingCartViewModel
            {
                public List<CartItemPreference> CartItemPreferences{get;set;}

                public class CartItemPreference{
                      public string Selected{get;set;}
                      public CartItem CartItem {get;set;}
                }
            }

@model MVC_COMP1562.ViewModels.PreferencesShoppingCartViewModel

View:

@model MVC_COMP1562.ViewModels.PreferencesShoppingCartViewModel

@foreach (var cartItem in Model.CartItemPreferences)
{
    @Html.DropDownListFor(m => cartItem.Selected, Model.PreferenceOptions)

}

The ID for each dropdown is the same.

So I'm creating the the div btn-group for each item in cartItemPreferences but now how could I assign value selected to the proper CartItemPreference in Model?

You cannot use buttons for that scenario unless you use third party JavaScript library. Easiest way is to use radio buttons. — Win, Apr 01 '17 at 13:25
@Win what about dropdowns? I have updated the question, the issue I'm having is that dropdown id stays the same even though those are different variables in the list. — Higeath, Apr 01 '17 at 13:30
You cannot use a `foreach` loop - refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943). And [this answer](http://stackoverflow.com/questions/37407811/mvc5-razor-html-dropdownlistfor-set-selected-when-value-is-in-array/37411482#37411482) for generating a dropdownlist in a loop. — , Apr 01 '17 at 21:52

score 1 · Accepted Answer · answered Apr 01 '17 at 14:42

You need to use for loop instead of foreach, so that each dropdownlist has unique id.

<form action="/" method="post">
   <select id="CartItemPreferences_0__Selected" name="CartItemPreferences[0].Selected">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
   </select>
   <select id="CartItemPreferences_1__Selected" name="CartItemPreferences[1].Selected">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
   </select>
   <input type="submit" value="Submit"/>
</form>

Model

public class PreferencesShoppingCartViewModel
{
    public List<CartItemPreference> CartItemPreferences { get; set; }

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

    public PreferencesShoppingCartViewModel()
    {   
        CartItemPreferences = new List<CartItemPreference>();
        PreferenceOptions = new List<SelectListItem>();
    }
}

public class CartItemPreference
{
    public string Selected { get; set; }
    public CartItem CartItem { get; set; }
}

public class CartItem
{
    public string Sample { get; set; }
}

View

@model DemoMvc5.Models.PreferencesShoppingCartViewModel
@{
    ViewBag.Title = "Home Page";
}

@using (Html.BeginForm("Index", "Home"))
{
    for (int i = 0, length = Model.CartItemPreferences.Count; i < length; i++)
    {
        @Html.DropDownListFor(m => Model.CartItemPreferences[i].Selected, Model.PreferenceOptions)
    }
    <input type="submit" value="Submit"/>
}

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new PreferencesShoppingCartViewModel
        {
            CartItemPreferences = new List<CartItemPreference>
            {
                new CartItemPreference { CartItem = new CartItem { Sample = "Sample 1"}},
                new CartItemPreference { CartItem = new CartItem { Sample = "Sample 2"}}
            },
            PreferenceOptions = new List<SelectListItem>
            {
                new SelectListItem {Text = "Option 1", Value = "1"},
                new SelectListItem {Text = "Option 2", Value = "2"},
                new SelectListItem {Text = "Option 3", Value = "3"}
            }
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(PreferencesShoppingCartViewModel model)
    {
        // Do something

        return View(model);
    }
}

How to display multiple DropDownLists and get values in ASP.Net MVC

1 Answers1

Model

View

Controller

Screen Shots