Criando uma lista de tarefas com Blazor

E aí galera, tudo certo?

Bora falar mais sobre Blazor? Depois que nós já aprendemos os conceitos básicos com esse post aqui: https://viniciusmussak.net/2018/03/27/iniciando-com-o-blazor/ e esse aqui: https://viniciusmussak.net/2018/04/11/injecao-de-dependencia-com-blazor/ agora chegou a hora de colocar tudo em prática, e vamos fazer um simples “TODO list” para mostrar a simplicidade e facilidade do Blazor.

O que vamos fazer?

Basicamente, faremos uma lista de tarefas, onde podemos adicionar tarefas e dizer se já as concluímos ou não. Uma coisa bastante simples, mas que podemos utilizar e mostrar como o Blazor funciona na prática.

Bora pro código!

A primeira coisa que devemos fazer, é criar um novo projeto Blazor, seguindo os seguintes passos:

Arquivo -> Novo -> Projeto, na aba “.NET Core” escolher a opção “Aplicativo Web ASP .NET Core”:

001

Depois disso, escolhemos a opção “Blazor”:

002

Depois disso, o projeto está criado! Quando a gente rodar pela primeira vez, vamos ver essa telinha bonitinha aqui:

003

Certo! Depois disso, dentro da pasta “Pages” vamos criar um arquivo chamado “Tarefa.cshtml”, que vai ser a página onde vamos fazer a nossa lista efetivamente, inicialmente nossa página precisa ficar assim:


@page "/lista-de-tarefas"
<h1>Lista de tarefas</h1>

view raw

Tarefa.cshtml

hosted with ❤ by GitHub

Isso significa que quando acessarmos o nossosite/lista-de-tarefas essa página será exibida, e o resultado será esse:

Lista de tarefas v0

Agora, chegou a hora de construirmos uma classe responsável pelas tarefas. Vamos criar uma pasta chamada “Models” e dentro dela, criamos uma classe chamada “TarefaModel“. Nessa classe teremos informações sobre o nome da tarefa, e se ela já foi concluída:


namespace BlazorTodoList.Models
{
public class TarefaModel
{
public string Titulo { get; set; }
public bool Completa { get; set; }
}
}

view raw

TarefaModel.cs

hosted with ❤ by GitHub

Depois da classe criada, podemos iniciar a lógica de inserção de tarefas na lista. Vamos alterar o nosso arquivo “Tarefa.cshtml” para iniciar a adição de tarefas:


@page "/lista-de-tarefas"
<h1>Lista de tarefas</h1>
<ul>
@foreach(var tarefa in tarefas)
{
<li>@tarefa.Titulo</li>
}
</ul>
<input placeholder="Alguma coisa para fazer…" @bind(novaTarefa) />
<button @onclick(AdicionarTarefa)>Adicionar tarefa</button>
@functions {
IList<TarefaModel> tarefas = new List<TarefaModel>();
string novaTarefa;
void AdicionarTarefa()
{
if(!string.IsNullOrWhiteSpace(novaTarefa))
{
tarefas.Add(new TarefaModel { Titulo = novaTarefa });
novaTarefa = string.Empty;
}
}
}

view raw

Tarefa.cshtml

hosted with ❤ by GitHub

Acompanhem comigo:

  • Nas linhas 5 à 10, estamos “varrendo” a lista de tarefas e exibindo na tela;
  • Na linha 12, temos um input, para inserirmos novas tarefas;
  • Na linha 13, temos um botão para inserir novas tarefas, chamando uma função chamada “AdicionarTarefa”;
  • Na linha 15, estamos dizendo que vamos escrever funções em C#;
  • Na linha 16, instanciamos uma nova lista de tarefas;
  • E da linha 19 à 26 estamos escrevendo a função de inserir uma tarefa na lista, que:
    • Verifica se a tarefa está preenchida e
    • Depois de inserir uma nova tarefa, “limpa” a variável com a nova tarefa e o input por consequência.

O resultado é esse aqui:

lista 01

Com isso, já conseguimos colocar tarefas na lista de tarefas. O próximo passo é conseguirmos marcar a tarefa como “Concluída” e também alterar o título; com algumas alterações no arquivo “Tarefa.cshtml” conseguimos fazer isso, vejam:


@page "/lista-de-tarefas"
<h1>Lista de tarefas (@tarefas.Where(tarefa => !tarefa.Completa).Count())</h1>
<ul>
@foreach(var tarefa in tarefas)
{
<li>
<input type="checkbox" @bind(tarefa.Completa) />
<input type="text" @bind(tarefa.Titulo) />
</li>
}
</ul>
<input placeholder="Alguma coisa para fazer…" @bind(novaTarefa) />
<button @onclick(AdicionarTarefa)>Adicionar tarefa</button>
@functions {
IList<TarefaModel> tarefas = new List<TarefaModel>();
string novaTarefa;
void AdicionarTarefa()
{
if(!string.IsNullOrWhiteSpace(novaTarefa))
{
tarefas.Add(new TarefaModel { Titulo = novaTarefa });
novaTarefa = string.Empty;
}
}
}

view raw

Tarefa.cshtml

hosted with ❤ by GitHub

O que mudamos?

  • Agora na linha 3, podemos ver quantas tarefas faltam ser concluídas; fizemos isso utilizando uma expressão lambda, filtrando quais tarefas ainda não foram concluídas (tarefa.Concluida == false) e depois contamos utilizando o “Count()“;
  • Nas linhas 10 e 11 colocamos inputs para “concluir / desconcluir” as tarefas e também para alterarmos o título. Isso é possível graças ao “@bind” que nos permite vincular um elemento da tela à um atributo de uma classe;

O resultado final é esse:

lista 02

Tranquilo de mais né pessoal?!

Logo mais vai rolar um post sobre como publicar uma aplicação Blazor no Azure, fiquem ligados!

Os exemplos de código estão disponíveis no GitHub: https://github.com/vmussak/blazor-todo-list

Referências

O post foi inspirado por esse conteúdo aqui:

Por hoje é só, qualquer dúvida ou sugestão, estou à disposição! Até mais 😀

Advertisement

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s