title: @Html.ListBoxFor usage and creation questions
body: <p>I have a webpage with 2 list box (<em>list1, list2</em>), I can shift items from one listbox to the other and back. When I click on the submit button, I want to return all the items value in <em>list2</em> to the httppost method.</p>
  
  <p>I have 3 problems:</p>
  
  <ol>
  <li>How to definite the property for the selected list?</li>
  <li>How to have a initial empty list (for <em>list2</em>)? <em>list1</em> has populated items?</li>
  <li>How to return all of <em>list2</em> items to model, when submit button is clicked ?</li>
  </ol>
  
  <p>Model:</p>
  
  <pre><code>public class TestModel
  {
      public List&lt;SelectListItem&gt; OptionList { get; set; }
      public List&lt;SelectListItem&gt; SelectedOptionList { get; set; }
      public string[] SelectedOptions { get; set; }
  }
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>private TestModel testModel  = new TestModel();
  
  public ActionResult TestPage()
  {
      ViewBag.Message = "Test Page";
  
      testModel.OptionList = new List&lt;SelectListItem&gt;();
  
      for (int i = 1; i &lt;= 100; i++)
      {
          SelectListItem item = new SelectListItem();
          item.Text = "Option " + i.ToString();
          item.Value = item.Text;
  
          testModel.OptionList.Add(item);
      }
  
      return View("TestView", testModel);
  }
  
  [HttpPost]
  public ActionResult TestPage(TestModel formModel)
  {
      testModel.SelectedOptionList = formModel.SelectedOptionList;
      testModel.SelectedOptions = formModel.SelectedOptions;
  
      //do something
      return RedirectToAction("TestPage");
  }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>@model EngineeringDataAnalysisGui.Models.TestModel
  
  @{
      ViewBag.Title = @ViewBag.Message;
  }
  
  @section Subtitle
  {
      @ViewBag.Message
  }
  
  &lt;table width="100%"&gt;
  @using (Html.BeginForm("TestPage", "RetrieveData", FormMethod.Post))
  {
      &lt;tr&gt;
          &lt;td&gt;Event List:&lt;/td&gt;
          &lt;td&gt;@Html.ListBox("lstEventSelection", Model.OptionList, new { id = "list1", Multiple = "multiple", Size = 15, style = "width: 100%;" })&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;table style="text-align:center; width: 100%"&gt;
                  &lt;tr&gt;
                      &lt;td id="buttonCol"&gt;
                          &lt;input type="button" id="btnAddAllEvent" title="Add All Events" onclick="moveAllOptions('list1','list2', true)" /&gt;
                          &lt;input type="button" id="btnAddEvent" title="Add Selected Events" onclick="moveSelectedOptions('list1','list2', true)" /&gt;
                      &lt;/td&gt;
                      &lt;td id="buttonCol"&gt;
                          &lt;input type="button" id="btnRemoveEvent" title="Remove Selected Events" onclick="moveSelectedOptions('list2','list1', true)" /&gt;
                          &lt;input type="button" id="btnRemoveAllEvent" title="Remove All Events" onclick="moveAllOptions('list2','list1', true)" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Selected Event List:&lt;/td&gt;
          @*Not sure how to add the listbox*@
          &lt;td&gt;@*Wrong*@@Html.ListBoxFor(x =&gt; x.SelectedOptions, Model.SelectedOptionList, new { id = "list2", Multiple = "multiple", Size = 15, style = "width: 100%;" })&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="submit" value="submit" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
  }
  &lt;/table&gt;
  </code></pre>