DataBinding no Blazor

Nesse artigo vamos explorar os recursos de DataBinding que existem no Blazor. Para isso vamos utilizar uma aplicação de exemplo que pode ser criada pelo Visual Studio 2019 como mostra esse artigo, ou pelo VSCode como mostra esse outro artigo aqui.

DataBinding

DataBinding é um recurso que temos em várias linguagens e frameworks. A ideia é criar uma ligação entre um componente da Página (ou View), com um elemento do modelo, como uma propriedade de uma classe.

A vantagem é que, quando bem feito, o data Binding diminui drasticamente a quantidade de código necessário para capturar dados de um formulário. E também para preencher um formulário com dados do Modelo.

O DataBinding é muito popular no padrão conhecido como MVVM (Model, View, ViewModel). No MVVM, a comunicação entre os elementos de uma View com as propriedades da sua respectiva ViewModel, se dá exclusivamente através de DataBinding.

bind

No Blazor o DataBinding é possível através do atributo bind que podemos utilizar nos inputs HTML. Veja, como mostra a Figura 1, um DataBinding declarado no componente chamado TarefasPage.razor.

Figura 1: Declarando DataBinding em um input com o atributo bind

Essa declaração cria uma ligação direta entre o input HTML com a propriedade NovaTarefa do tipo string, declarada no componente.

Nesse exemplo o botão Incluir Tarefa está apontando para  o método IncluirTarefa, que por sua vez vai adicionar o conteúdo da propriedade NovaTarefa na lista de strings Tarefas.

Voltando ao HTML, você pode ver que através de um foreach, estamos listando em uma <ul>, todas as tarefas que forem inclusas na lista Tarefas. Execute a aplicação e navegue até o componente /tarefas. Inclua algumas tarefas para ver o DataBinding em ação. (Figura 2)

Figura 2: DataBinding em ação

Bind em CheckBox

Vamos evoluir o nosso exemplo adicionando um CheckBox para identificar se a tarefa foi concluída. Para isso precisamos criar um modelo para a entidade Tarefa, que será inclusa na pasta Models do nosso projeto. Veja a estrutura do nosso Modelo na Figura 3.

Figura 3: Classe Tarefa

Agora vamos alterar o componente TarefasPage.razor, para trabalhar com o Modelo recém criado. Começamos alterando o código C# do bloco @functions, para em vez de trabalhar com uma lista de strings, trabalhar com uma lista de Tarefas. Veja a Figura 4.

Figura 4: Adaptando código C# para trabalhar com o Modelo Tarefa

Veja que as duas propriedades (NovaTarefa e Tarefas) foram modificadas de string e IList<string>, para Tarefa e IList<Tarefa>. Veja as mudanças necessárias no HTML do componente, na Figura 5.

Figura 5: Adaptando código HTML para trabalhar com o Modelo Tarefa

Primeiro, note que estamos usando a diretiva using para indicar ao componente que precisamos usar o namespace onde está a classe Tarefa.cs.

Em seguida, veja que os binds estão apontando para as propriedades da classe Tarefa. Tanto o bind do input de texto, quanto o bind do novo input checkbox. O interessante é que o checkbox está dentro do foreach, o que criará um bind com a propriedade Concluida de cada tarefa da lista.

Para fechar, note que no título do componente estamos exibindo o Total de Tarefas que ainda não foram concluídas.

Podemos fazer isso facilmente através de uma condição lambda, usada dentro do método Count da lista de tarefas. Essa condição irá filtrar para o Count, apenas as tarefas que tenham a propriedade Concluida igual a false. Execute a aplicação e veja o resultado dessas mudanças, como nos mostra a Figura 6.

Figura 6: Testando lista de Tarefas com flag de concluído

Conforme você for incluindo novas tarefas, ou marcando-as como concluídas, o Total de Tarefas em Aberto vai sendo automaticamente atualizado no título do componente.

Essa “atualização automática”, tanto da lista de Tarefas quanto do Total exibido no título, é possível graças ao mecanismo de DataBinding do Blazor.

Essa foi apenas uma introdução do que podemos fazer com o DataBinding. Existem formas mais avançadas de trabalhar com o DataBinding, que veremos em futuros artigos aqui nesse Blog.

Grande Abraço e até o próximo!

7 comentários em “DataBinding no Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s