title: Passing the collection of selected values from a Select2-Multi DropDownList to a Controller
body: <p>So I'm working up a example of the Select2 to use in a project and I'm missing a piece. I'm not sure how the selected dropdownlist collection will get back to the controller. I've tried several combinations of Automobiles and SoldAutomobiles and the Controller always show no data when I break in the Submit Action Method.</p>
  
  <p>View</p>
  
  <pre><code>@model Select2Demo.Models.Auto.Dealership
  
  @{
      ViewBag.Title = "Auto Home Page";
  }
  &lt;script src="~/Scripts/jquery-2.1.0.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/select2.js"&gt;&lt;/script&gt;
  &lt;link href="~/Content/css/select2.css" type="text/css" rel="stylesheet" /&gt;
  &lt;!-- &lt;link href="~/Content/css/select2-1.css" type="text/css" rel="stylesheet" /&gt;--&gt;
  &lt;link href="~/Content/bootstrap.css" type="text/css" rel="stylesheet" /&gt;
  &lt;link href="~/Content/select2-bootstrap.css" type="text/css" rel="stylesheet" /&gt;
  
  &lt;script&gt;
      $(document).ready(function () {
          $("#ddlCars").select2({
              placeholder: "Select a Cars.."
          });
  
          $("#ddlCarsCustom").select2({
              placeholder: "Select a Cars.."
          });
      });
  &lt;/script&gt;
  
  &lt;div class="jumbotron"&gt;
      &lt;h1&gt;Select2 Multi-Select Example&lt;/h1&gt;
  &lt;/div&gt;
  
  @using (Html.BeginForm("Submit", "Auto"))
  {
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4 form-group"&gt;
                  &lt;div class="editor-label"&gt;
                      @Html.LabelFor(model =&gt; model.Automobiles)
                  &lt;/div&gt;
                  &lt;div class="editor-field"&gt;
                      @Html.DropDownListFor(model =&gt; model.Automobiles, new SelectList(Model.Automobiles, "Id", "Make", Model.SoldAutomobiles), new { multiple = "multiple", @id = "ddlCars" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm-1"&gt;
              &lt;input type="submit" value="Submit" class="btn btn-primary btn-lg submit-btn"/&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>public class AutoController : Controller
  {
      public ActionResult Index()
      {
          List&lt;Automobile&gt; autos  = new List&lt;Automobile&gt;();
          Automobile auto = GetAuto(1,"Chevy");
          autos.Add(auto);
          auto = GetAuto(2, "Ford");
          autos.Add(auto);
          auto = GetAuto(3, "Audi");
          autos.Add(auto);
          auto = GetAuto(4, "Toyota");
          autos.Add(auto);
          auto = GetAuto(5, "Duster");
          autos.Add(auto);
          auto = GetAuto(6, "Esteem");
          autos.Add(auto);
          auto = GetAuto(7, "Fiero");
          autos.Add(auto);
          auto = GetAuto(8, "Lancer");
          autos.Add(auto);
          auto = GetAuto(9, "Phantom");
          autos.Add(auto);
  
          Dealership dealership = new Dealership {Automobiles = autos};
          return View(dealership);
      }
  
      public ActionResult Submit(Dealership dealer)
      {
          Dealership dealership = new Dealership {SoldAutomobiles = dealer.SoldAutomobiles};
  
          return View("Index", dealership);
      }
  
  
  
      private static Automobile GetAuto(int id, string make)
      {
          return new Automobile {Id = id, Make = make};
      }
  }
  </code></pre>
  
  <p>Classes</p>
  
  <pre><code>public class Automobile
  {
      public int Id { get; set; }
      [Display(Name = "Make")]
      public string Make { get; set; }
  }
  
  public class Dealership
  {
      public List&lt;Automobile&gt; Automobiles { get; set; }
      public List&lt;Automobile&gt; SoldAutomobiles { get; set; } 
  }
  </code></pre>
  
  <p>UPDATED With Working Code Changes.</p>
  
  <p>View</p>
  
  <pre><code>@model Select2Demo.Models.Auto.Dealership
  
  @{
      ViewBag.Title = "Auto Home Page";
  }
  
  
  &lt;script&gt;
      $(document).ready(function () {
          $("#ddlCars").select2({
              placeholder: "Select a Cars.."
          });
      });
  &lt;/script&gt;
  
  &lt;div class="jumbotron"&gt;
      &lt;h1&gt;Select2 Multi-Select Example&lt;/h1&gt;
  &lt;/div&gt;
  
  @using (Html.BeginForm("Submit", "Auto"))
  {
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4 form-group"&gt;
                  &lt;div class="editor-label"&gt;
                      @Html.LabelFor(model =&gt; model.Automobiles)
                  &lt;/div&gt;
                  &lt;div class="editor-field"&gt;
                      @Html.ListBoxFor(model =&gt; model.SelectedAutomobiles, new SelectList(Model.Automobiles, "Id", "Make"), new { multiple = "multiple", @id = "ddlCars" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm-1"&gt;
              &lt;input type="submit" value="Submit" class="btn btn-primary btn-lg submit-btn"/&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Model</p>
  
  <pre><code>public class Automobile
  {
      public int Id { get; set; }
      [Display(Name = "Make")]
      public string Make { get; set; }
  }
  
  public class Dealership
  {
      [Display(Name = "Available Auto Makes")]
      public List&lt;Automobile&gt; Automobiles { get; set; }
      public int[] SelectedAutomobiles { get; set; } 
  }
  </code></pre>