title: Add a list of nested models to a parent model before creating in view
body: <p>Lets say I have some view models set up as follows:</p>
  
  <pre><code>public class User
  {
      public string Name {get; set;}
      public IList&lt;Phone&gt; Phones {get; set;}
  }    
  public class Phone
  {
      public string Number {get; set;}
  }
  </code></pre>
  
  <p>My view is setup as follows:</p>
  
  <pre><code>@(form){
  &lt;div&gt;
  
  @Html.EditorFor(model =&gt; model.Name)
  &lt;!-- Should be dynamic creation of phone numbers --&gt;
  &lt;a id="AddBtnPhone"&gt;add&lt;/a&gt;
  &lt;ul id="PhoneList"&gt;
  &lt;/ul&gt;
  
  &lt;input type="submit"/&gt;
  &lt;/div&gt;
  }
  &lt;script&gt;
  
  $(function(){
    $('#AddBtnPhone').click(function(){
      //What do I do here?
    });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>How do I add phone numbers dynamically so when this form gets posted, they are all in the list collection? I have no idea how to setup my views.</p>
  
  <p>Scenario:</p>
  
  <p>When the use clicks add, a list item containing a textbox to accept a phone number is added to <code>PhoneList</code>. When submit is clicked, the model <code>User</code> is posted to the controller with 1 element in the <code>Phones</code> list that contains the entered phone number.</p>