title: How to add items to MVC model in javascript?
body: <p>I would like to add items to a list in my model dynamically with java script. How can I make MVC bind the new item to the model?</p>
  
  <p>My models:</p>
  
  <pre><code>public class Garage
  {
      public string Name{ get; set; }
      public string Location { get; set; }
      public IList&lt;Car&gt; Cars{ get; set; }
  }
  
  public class Car
  {
      public string Color{ get; set; }
      public string Name { get; set; }
  }
  </code></pre>
  
  <p>My view, which uses a Garage as model:</p>
  
  <pre><code>&lt;% using (Html.BeginForm())
  {%&gt;
  &lt;div id="cars"&gt;
           &lt;% 
                 foreach (var item in Model.Cars)
                 {
                    Html.RenderPartial("CarView", item);
                } %&gt;
  &lt;/div&gt;
  &lt;% } %&gt;
  </code></pre>
  
  <p>And my CarView which uses a Car as model:</p>
  
  <pre><code> &lt;div class="carRow"&gt;               
  
          &lt;%--   Color--%&gt;
          &lt;%=Html.CustomLabelFor(model =&gt; model.Color)%&gt;
          &lt;%= Html.TextBox(Model.Color) %&gt;
  
           &lt;%--   Name--%&gt;
          &lt;%=Html.CustomLabelFor(model =&gt; model.Name)%&gt;
          &lt;%= Html.TextBox(Model.Name) %&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>When adding a new Car, I uses a AJAX call, and adds it to the html.
  The AJAX uses this method in the controller:</p>
  
  <pre><code> public ViewResult NewCar()
      {
          return View("CarView");
      }
  </code></pre>
  
  <p>My java script ajax call:</p>
  
  <pre><code>            $('.addCarButton').click(function () {
              $.ajax({
                  url: "&lt;%= Url.Action("CreateCars") %&gt;",
                  cache: false,
                  success: function (html) { $("#cars").append(html); }
              });
              return false;
          });
  </code></pre>
  
  <p>This renders the html nicely, but it does not add the car to the list of cars. </p>
  
  <p>How can this be done?</p>