TaskList com ASP.NET MVC e Knockoutjs

Falaaaa pessoal!!!

Hoje vou mostrar como criar um pequeno tasklist com asp.net mvc e knockoutjs. A idéia é que o usuário insira um nome para a lista de atividades e cadastre as atividades que quiser.

O intuito aqui é mostrar a integração entre o ASP.NET MVC e o Knockoutjs, não vou gravar nada em banco mas da forma que ficou fica bem tranquilo de enviar para o repositório.

Vamos lá…primeiro crie o projeto web no Visual Studio, vamos precisar colocar as referencias ao KnockoutJS
para isso acesse o Nuget e insira as seguintes referencias:

<?xml version="1.0" encoding="utf-8"?>
<packages>
  ...
  <package id="Knockout.Mapping" version="2.4.0"
          targetFramework="net451" />
  <package id="knockoutjs" version="3.4.0"
          targetFramework="net451" />
  ...
</packages>

Crie uma classe na pasta Models chamada TaskList e outra chamada TaskItem com a seguine estrutura:

public class TaskList
{
    public string Title { get; set; }
    public List<TaskItem> Tasks { get; set; }
}
public class TaskItem
{
    public string Title { get; set; }
}

Crie um controller chamado TaskController com o seguinte código:

public class TaskController : Controller
{
        public ActionResult Index()
        {
       var list = new TaskList
       {
        Title = "My Task List",
        Tasks = new List<TaskItem> {
                     new TaskItem {Title = "My First Task"},
                     new TaskItem {Title = "My Second Task"}
                }
            };
        return View(list);
        }
    [HttpPost]
    public ActionResult Index(TaskList list)
    {
           return View(list);
        }
}

Agora vamos criar a página chtml:

	@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>
	}

view raw .cshtml hosted with

by GitHub

Pronto, agora coloque seu código para rodar, se tudo der certo vc deverá estar vendo uma tela parecida com essa abaixo:

A idéia é definir um nome para sua tasklist e adicionar quantas atividades quiser, poder remover caso ache necessário e quando clicar me submit enviar a tasklist completa para o server.

E isso ae! se ajudou comenta!

Leave a Reply Cancelar resposta