One-way Databinding

A primeira técnica é fazer uma vinculação unidirecional ou one-way databinding que anexará o valor de uma variável a um elemento DOM do seu site.

Lembre-se de que o caractere @ é usado para indicar o início do código C# em uma página ou componente de edição. Para exibir uma propriedade ou campo de back-end dentro de um elemento do navegador no Blazor, basta usar o caractere @ seguido pelo nome da variável.

O valor exibido no cabeçalho h1 permanecerá sincronizado com o valor da variável nome no código C #. Quaisquer alterações feitas no valor nome serão refletidas no front-end do site para o usuário ver.

Considere a seguinte código:

Aqui o manipulador de eventos TrocarNome() é acionado quando o evento onclick do botão for disparado.

Quando o botão for clicado, o valor da variável C# nome será alterado. O novo valor aparecerá automaticamente no cabeçalho do código HTML. Essa técnica pode ser usada para personalizar a experiência de um usuário, e,  também poderia ser usada para adicionar classes personalizadas aos elementos DOM com base em outros dados.

Abaixo temos o resultado:

Two-way Databinding

A técnica anterior funciona quando as variáveis são manipuladas no código C# do back-end e você deseja exibi-las no front-end como HTML.

Suponha, no entanto, que você queira trabalhar na outra direção, ou seja, alterar o valor de uma variável C# com base na entrada recebida por um usuário em seu site. Para isso você vai precisar usar a ligação de dados bidirecional ou two-way databinding.

Para emitir uma ligação de dados bidirecional no Blazor, use o atributo @bind em um elemento de entrada(input) ou outro elemento de formulário.

Lembre-se de que o caractere @ é usado para indicar o início do código C# em uma página ou componente de edição. Para exibir uma propriedade ou campo do back-end dentro de um elemento do navegador no Blazor, basta usar o caractere @ seguido pelo nome da variável.

O atributo @bind sincronizará o valor do campo de entrada - input -  com o valor da variável C# à qual o input está vinculado, neste caso, nome.

A variável nome é atualizada quando o evento onchange do input for gerado. O evento onchange é gerado quando o elemento de entrada perde o foco e o novo valor é diferente do valor anterior.

Quando o usuário acessando a página digita uma nova string no elemento de entrada(input) e muda o foco, tabulando para um novo elemento ou clicando fora do elemento, o cabeçalho h1 será atualizado.

Vinculação com outros eventos

No exemplo acima, não seria melhor se o cabeçalho fosse atualizado instantaneamente conforme o usuário digita ?

É possível disparar a vinculação após a digitação de cada letra usando o evento oninput em vez do evento onchange. Para fazer isso no Blazor, precisamos usar atributos um pouco diferentes.

Vejamos o código a seguir:

Como o atributo @bind do Blazor funciona automaticamente em conjunto com o evento onchange do elemento, você precisará especificar manualmente que deseja usar o evento oninput para acionar a ligação.

Além disso, você usará o atributo @bind-value para identificar a propriedade ou o campo C# ao qual deseja se vincular.

Nesse caso, @bind-value = "nome" e  @bind-value: event = "oninput" produzirão os resultados desejados conforme mostramos abaixo:

Vimos assim como como usar o Blazor para exibir o valor das variáveis C# no código HTML do seu site,e , vimos também como emitir uma ligação de dados bidirecional usando o atributo @bind do Blazor, que permite usar valores recebidos pelo usuário em seu aplicativo C#.

Por fim, aprendemos como personalizar a ligação de dados para diferentes eventos.

Em outro artigo veremos como passar dados para componentes Blazor.

"Porque o Senhor é justo, e ama a justiça; o seu rosto olha para os retos."
Salmos 11:7