post_mvc_knocnout

.cshtml

@using AjaxHelpers.Extensions
@model AjaxHelpers.Models.TaskList
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>TaskList</h2>
@using (Html.BeginForm())
{
	<div class="row">
		<div class="col-md-12">
			<div class="form-group">
				<label for="email">Titulo:</label>
				@Html.TextBoxFor(o => o.Title, new { @class = "form-control" })
			</div>
		</div>
	</div>

	<h2>Tasks</h2>
	<table class="table table-condensed table-bordered">
		<tbody data-bind="foreach: Tasks">
			<tr>
				<td><input type="text" data-bind="value: Title, attr: {name: 'Tasks[' + $index() + '].Title'}" class="form-control" /></td>
				<td><button id="removeTask" data-bind="click: $root.removeTask" class="btn btn-primary">Remove</button></td>
			</tr>
		</tbody>
	</table>
	<button id="addTask" data-bind="click: addTask" class="btn btn-primary">Add</button>
	<button class="btn btn-primary">Submit</button>
}

@section scripts
{
	<script src="~/Scripts/knockout-3.4.0.js" type="text/javascript"></script>
	<script src="~/Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function () {
			var taskItem = function (title) {
				var self = this;

				self.Title = ko.observable(title);
			};

			var model = ko.mapping.fromJS(@Html.Raw(Model.ToJson()));

			model.addTask = function () {
				model.Tasks.push(new taskItem());
			};

			model.removeTask = function (task) {
				model.Tasks.remove(task);
			};

			ko.applyBindings(model);
		})
	</script>
}