Passing partial view data to controller

Question

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.

I want to be able to save any changes the user made to the existing tasks and as well as newly added tasks.

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.

Model:

public class DailyTasks
{  
   public int ID { get; set; }
   public List<Task> TaskList{ get; set; }
}

public class Task
{
   public int Id { get; set; }
   public string MyTask { get; set; }
}

Main View:

@model Example.Models.DailyTasks

@using (Ajax.BeginForm("Save", "DailyTasks", new AjaxOptions { HttpMethod = "Post" }))
{
<input type="button" value="Add New Task" id="addBtn" />
<input type="submit" value="Save" id="saveBtn"/>

<table class="table">
    <tr>
        <th>Column Header Name Goes Here</th>
        <th>Column Header Name Goes Here</th>
    </tr>

    @for (var i = 0; i < Model.TaskList.Count(); i++)
    {
    <tr>
        <td>
            @Html.DisplayFor(m => Model.TaskList[i].ID)
            @Html.HiddenFor(m => Model.TaskList[i].ID)
        </td>
        <td>
            @Html.DisplayFor(m => Model.TaskList[i].MyTask)
            @Html.HiddenFor(m => Model.TaskList[i].MyTask)
        </td>
    </tr>
    }
</table>
}

<script type="text/javascript">
$(document).ready(function () {
    $("#addBtn").on("click", function () {
        $.get('@Url.Action("AddTask")', function (data) {
            $("table tbody").append(data);
        });
    });
 });
</script>

Add New Task AcitionResult for Partial View:

public ActionResult AddTask()
    {
        Task model = new Task();
        return PartialView("_AddTask", model);
    }

Partial View (_AddTask):

    @model Example.Models.Task

    <tr>
        <td>
            @Html.DisplayFor(m => Model.ID)
            @Html.HiddenFor(m => Model.ID)
        </td>
        <td>
            @Html.DisplayFor(m => Model.MyTask)
            @Html.HiddenFor(m => Model.MyTask)
        </td>
    </tr>

Answer 1

I found exactly what I needed here: http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ Now I can use modelbinding method instead of the traditional ways (FormCollection and Request).

I hope it helps someone in the future. Also, thanks to Tobias for the link. It is definitely discusses core problem that i presented but unfortunately the solution found there didn't work in my case.

Cheers!