title: ASP.Net MVC4 bind a "create view" to a model that contains List
body: <p>Hello out there in internet land, I have an interesting conundrum for you:</p>
  
  <p>Is it possible to bind a view for creating an object, if that object contains a list of other objects purely using MVC views/partial views?</p>
  
  <p>Man, that came out all complicated like...let me give you a quick code example of what I mean:</p>
  
  <pre><code>Models:
  public class ComplexObject
  {
      public string title { get; set; }
      public List&lt;ContainedObject&gt; contents { get; set; }
  }
  
  public class ContainedObject
  {
      public string name { get; set; }
      public string data { get; set; }
  }
  </code></pre>
  
  <p>Nice and simple right?  Okay, so a strongly typed view for creating one of these is really simple for the "title" property:</p>
  
  <pre><code>something like:
  @Html.TextBoxFor(x =&gt; x.title)
  </code></pre>
  
  <p>but I can't figure out a good way to bind a list of "ContainedObjects" using MVC.  The closest that I got was to create a strongly-typed IEnumerable partial view with the "List" scaffold template and include that on the page.  </p>
  
  <p>Without adding styling etc, the default look of that partial view is:</p>
  
  <pre><code>@model IEnumerable&lt;MVCComplexObjects.Models.ContainedObject&gt;
  
  &lt;p&gt;
  @Html.ActionLink("Create New", "Create")
  &lt;/p&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.name)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.data)
          &lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
  
  @foreach (var item in Model) {
      &lt;tr&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.name)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.data)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
              @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
              @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
          &lt;/td&gt;
      &lt;/tr&gt; 
  }
  
  &lt;/table&gt;
  </code></pre>
  
  <p>But frankly, I can't figure out how to include that as bound to the creation of a new ComplexObject.  In other words, I can show a list of already existing ContainedObjects by binding as so:
      @Html.Partial("PartialCreate", Model.contents)</p>
  
  <p>But what I really want I guess, is something like:</p>
  
  <pre><code>@Html.PartialFor("PartialCreate", x =&gt; x.contents)
  </code></pre>
  
  <p>I should note that I didn't have too much trouble coding around this with Javascript (I'll include the code below) but I'd really like to know if there's a way to do this purely with MVC.  I'm a recent convert from WebForms (where I'd pretty much just replaced all of my postbacks with AJAX calls anyway) and this sort of thing comes up a lot in projects that I work on.</p>
  
  <p>Anyway, here's how I currently do it:</p>
  
  <p>Html - </p>
  
  <pre><code>Name: &lt;input type="text" id="enterName" /&gt;
  Data: &lt;input type="text" id="enterData" /&gt;
  &lt;a id="addItem"&gt;Add Item&lt;/a&gt;
  
  &lt;ul id="addedItems"&gt;
  &lt;/ul&gt;
  
  &lt;a id="saveAll"&gt;Save Complex Object&lt;/a&gt;
  </code></pre>
  
  <p>Javascript - </p>
  
  <pre><code>&lt;script&gt;
  var contents = [];
  $(document).ready(function () {
  
      $('#addItem').click(function () {
          var newItem = { name: $('#enterName').val(), data: $('#enterData').val() };
          contents.push(newItem);
          $('#addedItems').html('');
          for (var i = 0; i &lt; contents.length; i++) {
              $('#addedItems').append(
                  "&lt;li&gt;" + contents[i].name + ", " + contents[i].data + "&lt;/li&gt;"
              );
          }
      });
  
      $('#saveAll').click(function () {
  
          var toPost = { title: "someTitle", contents: contents };
  
          $.ajax({
                  url: '/Home/SaveNew',
                  type: 'POST',
                  data: JSON.stringify(toPost),
                  dataType: 'json',
                  contentType: 'application/json; charset=utf-8',
                  success: function (data, textStatus, jqXHR) {
                      alert("win");
                  },
                  error: function (objAJAXRequest, strError) {
                      alert("fail");
                  }
              });
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And that's not a terrible solution or anything, I just don't want to have to implement Javascript calls everytime I want to save a new object, but use standard Razr code everywhere else.  I'd like to be reasonably consistent across the board.</p>
  
  <p>Has anyone else run into this issue and found a solution?</p>