title: Two-Way Data Binding using jQuery Driven "Chosen" Drop Down
body: <p>Alright, I have a jQuery version of Chosen applied to a <code>select</code> displaying properly on my page and I've done so with the following code. First I have a <code>BaseController</code> that sets a <code>ViewBag</code> property listing all of the possible categories:</p>
  
  <pre><code>protected override void OnActionExecuted(ActionExecutedContext filterContext)
  {
      try
      {
          _connection.Open();
          this.ViewBag.AvailableCategories = new MultiSelectList(_connection.Query&lt;Category&gt;("select * from Category"), "CategoryID", "Name");
      }
      catch (Exception ex)
      {
          throw new HttpException(500, ex.Message);
      }
      finally
      {
          _connection.Close();
      }
  
      base.OnActionExecuted(filterContext);
  }
  </code></pre>
  
  <p>Next, when navigating to <code>/Event/View/1</code> I have the <code>EventController</code> setup (<strong>NOTE</strong> this controller bases the aforementioned controller) with the following <code>View</code> method.</p>
  
  <pre><code>public ActionResult View(int id)
  {
      Event evt = null;
  
      try
      {
          evt = Event.Where(_connection, id);
          if (evt == null)
          {
              throw new HttpException(404, "Oops! The event you're looking for does not exist.");
          }
      }
      catch (Exception ex)
      {
          throw new HttpException(500, ex.Message);
      }
  
      return View(evt);
  }
  </code></pre>
  
  <p>It sets the model, as you can see, to the following model.</p>
  
  <pre><code>public class Event
  {
      public int EventID { get; set; }
      public int BusinessID { get; set; }
      public string Name { get; set; }
      public string Description { get; set; }
      public int NeighborhoodID { get; set; }
  
      public IEnumerable&lt;int&gt; CategoryIds
      {
          get
          {
              if (Categories == null) { return new List&lt;int&gt;(); }
              return Categories.Select(c =&gt; c.CategoryID).AsEnumerable();
          }
      }
  
      public List&lt;EventCategory&gt; Categories { get; set; }
      public List&lt;EventHours&gt; Hours { get; set; }
  
      public static Event Where(IDbConnection connection, int id)
      {
          Event result = null;
  
          try
          {
              connection.Open();
  
              var sql =
                  @"  select * from Event where EventID = @EventID
                      select * from EventCategory where EventID = @EventID
                      select * from EventHours where EventID = @EventID";
              using (var multiResult = connection.QueryMultiple(sql, new { EventID = id }))
              {
                  result = multiResult.Read&lt;Event&gt;().FirstOrDefault();
                  if (result != null)
                  {
                      result.Categories = multiResult.Read&lt;EventCategory&gt;().ToList();
                      result.Hours = multiResult.Read&lt;EventHours&gt;().ToList();
                  }
              }
          }
          finally
          {
              connection.Close();
          }
  
          return result;
      }
  }
  </code></pre>
  
  <p>Finally I have the following markup in the view.</p>
  
  <pre><code>@Html.DropDownListFor(m =&gt; m.CategoryIds,
      ViewBag.AvailableCategories as MultiSelectList,
      new { multiple = "multiple", @class = "chzn-container" })
  </code></pre>
  
  <p>Now, as I stated at first, it's displaying properly and listing all of the categories as expected. However, even though the <code>CategoryIds</code> property does list in fact two selected categories, it's not setting them (or showing them for that matter) as selected in the Chosen drop down on load.</p>
  
  <p>I am forced to only further assume that if a user selected a value from the Chosen drop down that it would not bind properly on post either because it does not change the HTML when an item is selected.</p>
  
  <p>So, my question is this, how do I properly two-way data bind to a Chosen drop down in MVC?</p>