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.
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)
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.
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.
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.
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.
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!
Blaze of Code 
Melhor tutorial de blazor que já li. Parabens.
CurtirCurtido por 1 pessoa