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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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 😀
Vinícius Mussak 