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”:
Depois disso, escolhemos a opção “Blazor”:
Depois disso, o projeto está criado! Quando a gente rodar pela primeira vez, vamos ver essa telinha bonitinha aqui:
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> |
Isso significa que quando acessarmos o nossosite/lista-de-tarefas essa página será exibida, e o resultado será esse:
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; } | |
| } | |
| } |
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; | |
| } | |
| } | |
| } |
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:
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; | |
| } | |
| } | |
| } |
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:
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 😀
