title: Passing partial view data to controller
body: <p>Let say I have a model DailyTasks and a model Task. The initial view is strongly typed with DailyTasks model. It shows a list of existing tasks for the day. Users can add more task to the list/table by clicking the add button. When the add button is clicked, I render a partial view which is tied to a Task model.</p>
  
  <p>I want to be able to save any changes the user made to the existing tasks and as well as newly added tasks.</p>
  
  <p>I'm not sure sure what is the best way to do this. I have been playing with model binding and as well as creating a json object of the model and then pass it to the controller upon Save. So far I was only able to pass back the existing tasks to the Save controller, none of the newly added tasks show up. </p>
  
  <p>Model:</p>
  
  <pre><code>public class DailyTasks
  {  
     public int ID { get; set; }
     public List&lt;Task&gt; TaskList{ get; set; }
  }
  
  public class Task
  {
     public int Id { get; set; }
     public string MyTask { get; set; }
  }
  </code></pre>
  
  <p>Main View:</p>
  
  <pre><code>@model Example.Models.DailyTasks
  
  @using (Ajax.BeginForm("Save", "DailyTasks", new AjaxOptions { HttpMethod = "Post" }))
  {
  &lt;input type="button" value="Add New Task" id="addBtn" /&gt;
  &lt;input type="submit" value="Save" id="saveBtn"/&gt;
  
  &lt;table class="table"&gt;
      &lt;tr&gt;
          &lt;th&gt;Column Header Name Goes Here&lt;/th&gt;
          &lt;th&gt;Column Header Name Goes Here&lt;/th&gt;
      &lt;/tr&gt;
  
      @for (var i = 0; i &lt; Model.TaskList.Count(); i++)
      {
      &lt;tr&gt;
          &lt;td&gt;
              @Html.DisplayFor(m =&gt; Model.TaskList[i].ID)
              @Html.HiddenFor(m =&gt; Model.TaskList[i].ID)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(m =&gt; Model.TaskList[i].MyTask)
              @Html.HiddenFor(m =&gt; Model.TaskList[i].MyTask)
          &lt;/td&gt;
      &lt;/tr&gt;
      }
  &lt;/table&gt;
  }
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $("#addBtn").on("click", function () {
          $.get('@Url.Action("AddTask")', function (data) {
              $("table tbody").append(data);
          });
      });
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>Add New Task AcitionResult for Partial View:</p>
  
  <pre><code>public ActionResult AddTask()
      {
          Task model = new Task();
          return PartialView("_AddTask", model);
      }
  </code></pre>
  
  <p>Partial View (_AddTask):</p>
  
  <pre><code>    @model Example.Models.Task
  
      &lt;tr&gt;
          &lt;td&gt;
              @Html.DisplayFor(m =&gt; Model.ID)
              @Html.HiddenFor(m =&gt; Model.ID)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(m =&gt; Model.MyTask)
              @Html.HiddenFor(m =&gt; Model.MyTask)
          &lt;/td&gt;
      &lt;/tr&gt;
  </code></pre>