title: Handle dynamic Number of Listboxes with Strongly Typed Model
body: <p>I'm looking for a way to handle a dynamic number of Listboxes and don't seem to be able to find the answer searching SO or Google.</p>
  
  <p>Considering the following ViewModel</p>
  
  <pre><code>public class IndexViewModel
  {
      public List&lt;Option&gt; Options { get; set; }
      public List&lt;int&gt; SelectedOptions { get; set; } 
  }
  
  public class Option
  {
      public OptionType Type { get; set; }
      public int Id { get; set; }
      public string Name { get; set; }
  }
  
  public class OptionType
  {
      public int Id { get; set; }
      public string Name { get; set; }
  }
  </code></pre>
  
  <p>This can then be presented using the following razor view</p>
  
  <pre><code>@model MvcApplication2.Models.IndexViewModel
  @using(Html.BeginForm())
  {
      @Html.ListBoxFor(model =&gt; model.SelectedOptions, new MultiSelectList(Model.Options, "Id", "Name"), new {Multiple = "multiple"})
      &lt;input type="submit" value="Submit" class="submit" /&gt;
  }
  </code></pre>
  
  <p>and handled using the following action methods</p>
  
  <pre><code>public ActionResult Index()
  {
      var model = new IndexViewModel();
      var colourType = new OptionType {Id = 0, Name = "Colour"};
      var shapeType = new OptionType {Id = 1, Name = "Shape"};
      model.Options = new List&lt;Option&gt;
          {
              CreateOption(0, "Red", colourType),
              CreateOption(1, "Green", colourType),
              CreateOption(2, "Circle", shapeType),
              CreateOption(2, "Square", shapeType)
          };
      return View(model);
  }
  
  [HttpPost]
  public ActionResult Index(IndexViewModel model)
  {
      //Do something with the posted model
      return RedirectToAction("Index");
  }
  
  private static Option CreateOption(int id, string name, OptionType colourType)
  {
      return new Option
      {
          Id = id,
          Name = name,
          Type = colourType
      };
  }
  </code></pre>
  
  <p>If I were to separate the <code>Option</code>s Based on their <code>OptionType</code> into multiple list boxes by changing the model and views as so </p>
  
  <pre><code>public class IndexViewModel
  {
      public Dictionary&lt;string, List&lt;Option&gt;&gt; Options { get; set; }
  
      //public List&lt;int&gt; SelectedOptions { get; set; } 
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>@model MvcApplication2.Models.IndexViewModel
  @using (Html.BeginForm())
  {
      &lt;ul&gt;
          @foreach (var optList in Model.Options)
          {
              &lt;li&gt;
                  @optList.Key : @Html.ListBoxFor(model =&gt; model.SelectedOptions, new MultiSelectList(optList.Value, "Id", "Name"), new { Multiple = "multiple" })
              &lt;/li&gt;   
          }
      &lt;/ul&gt;
      &lt;input type="submit" value="Submit" class="submit" /&gt;
  }
  </code></pre>
  
  <p>And modify the supporting controller methods as so</p>
  
  <pre><code>    public ActionResult Index()
  {
      var model = new IndexViewModel();
      model.Options = new Dictionary&lt;string, List&lt;Option&gt;&gt;
          {
              {"Colour", CreateColourList()},
              {"Shape", CreateShapeList()}
          };
      return View(model);
  }
  
  [HttpPost]
  public ActionResult Index(IndexViewModel model)
  {
      return RedirectToAction("Index");
  }
  
  
  private static List&lt;Option&gt; CreateColourList()
  {
      var colourType = new OptionType { Id = 0, Name = "Colour" };
  
      return new List&lt;Option&gt;
          {
              CreateOption(0, "Red", colourType),
              CreateOption(1, "Green", colourType),
          };
  }
  private static List&lt;Option&gt; CreateShapeList()
  {
      var shapeType = new OptionType { Id = 1, Name = "Shape" };
      return new List&lt;Option&gt;
          {
              CreateOption(2, "Circle", shapeType),
              CreateOption(2, "Square", shapeType)
          };
  }
  private static Option CreateOption(int id, string name, OptionType colourType)
  {
      return new Option
      {
          Id = id,
          Name = name,
          Type = colourType
      };
  }
  </code></pre>
  
  <p>How would I define the Selected options in the view model so that it binds in the HttpPost Index Action?</p>
  
  <p>Also as an extra i would like to know how to change the SelectedOptions type to contain Option instances rather than integers but initially this isn't too important, a working solution with integers would help ease my head ache.</p>
  
  <p><strong>EDIT: Just to clarify, while I have defined the Options explicitly in the example above, in the actual code these are actually loaded from a database and there could be any number of <code>Option</code>s and and number of <code>OptionType</code>s</strong> </p>
  
  <p>Thanks in advance!</p>