title: Insert view with collection property
body: <p>I have a Person class and a Contact class.
  A person can have many contacts.</p>
  
  <pre><code>public class Person
  {
      [Required]
      public string FirstName { get; set; }
  
      public string LastName { get; set; }
  
      public string Notes { get; set; }
  
      [Required]
      public List&lt;Contact&gt; Contacts { get; set; }
  
  
      public Person()
      {
          Contacts = new List&lt;Contact&gt;();
      }
  }
  
  
  public class Contact
  {
      [Required]
      public string Title { get; set; }
  
      [Required]
      public string Value { get; set; }
  
      public Contact() { Title = ""; Value = ""; }
  
      public Contact(string title, string value)
      {
          Title = title;
          Value = value;
      }
  }
  </code></pre>
  
  <p><strong>Controller</strong>:</p>
  
  <pre><code>public class PersonController : Controller
  {
  
      public ActionResult Create()
      {
          return View(new PersonCreateModel());
      }
  
  
      // POST: /Person/Create
      [HttpPost]
      public ActionResult Create(string btnSubmit, PersonCreateModel personModel)
      {
          try
          {
              switch (btnSubmit)
              {
                  case "AddContact":
                      personModel.Person.Contacts.Add(new Contact(personModel.NewContact_Title, personModel.NewContact_Value));
                      personModel.NewContact_Title = personModel.NewContact_Value = "";
                      return View(personModel);
  
                  case "CreatePerson"://Add To Database
                      //blabla
                      break;
              }
  
              return RedirectToAction("Index");
          }
          catch
          {
              return View(personModel);
          }
      }
  }
  </code></pre>
  
  <p><strong>PersonCreateModel</strong>:</p>
  
  <pre><code>public class PersonCreateModel
  {
  
      public Person Person { get; set; }
  
      public string NewContact_Title { get; set; }
      public string NewContact_Value { get; set; }
  
      public PersonCreateModel()
      {
          Person = new Person();
      }
  }
  </code></pre>
  
  <p><strong>View</strong>:</p>
  
  <pre><code>@model MvcApplication1.Models.PersonCreateModel
  
  @{
      ViewBag.Title = "Create";
  
      var contactsGrid = new WebGrid(Model.Person.Contacts); 
  }
  
  &lt;h2&gt;Create&lt;/h2&gt;
  
  @using (Html.BeginForm())
  {
      @Html.ValidationSummary(true)
  
      &lt;fieldset&gt;
          &lt;legend&gt;Person&lt;/legend&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Person.FirstName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Person.FirstName)
              @Html.ValidationMessageFor(model =&gt; model.Person.FirstName)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Person.LastName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Person.LastName)
              @Html.ValidationMessageFor(model =&gt; model.Person.LastName)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Person.Notes)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Person.Notes)
              @Html.ValidationMessageFor(model =&gt; model.Person.Notes)
          &lt;/div&gt;
  
          &lt;br /&gt;
          &lt;div&gt;
              &lt;h4&gt;Contacts:&lt;/h4&gt;
  
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Title: @Html.EditorFor(model =&gt; model.NewContact_Title)&lt;/td&gt;
                      &lt;td&gt;Value: @Html.EditorFor(model =&gt; model.NewContact_Value)&lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="submit" name="btnSubmit" value="AddContact" /&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  
              &lt;div&gt;
                  @contactsGrid.GetHtml()
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;p&gt;
              &lt;input type="submit" name="btnSubmit" value="CreatePerson" /&gt;
          &lt;/p&gt;
      &lt;/fieldset&gt;
  }
  
  &lt;div&gt;
      @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  
  @section Scripts {
      @Scripts.Render("~/bundles/jqueryval")
  }
  </code></pre>
  
  <p>What I'm trying to accomplish is that the user can add multiple contacts to the Person before finally clicking Create.</p>
  
  <p>I have two questions:</p>
  
  <p>1- Is this the best approach?, isn't there an easier/shorter way of doing this like using javascript or jquery?</p>
  
  <p>2- when I click AddContact the first time it works great, second time the Person.Contacts is Empty, and also I can't clear the AddContact Textboxes.</p>
  
  <p>I've searched all over the web and here on Stackoverflow but I didn't find any answers, there is an unanswered question <a href="https://stackoverflow.com/questions/19637369/how-to-update-multiple-many-to-many-relationship-and-check-for-concurrency-excep?rq=1">here</a></p>
  
  <p>PS: I'm new to MVC, coming from ASP.NET Webforms.</p>