Bind OnInput no Blazor

No artigo anterior desse Blog foram apresentadas as definições de OneWay e TwoWay DataBinding. Nesse artigo veremos uma variação muito útil do TwoWay DataBinding, que podemos chamar de OnInput

bind

O TwoWay DataBinding em um componente é declarado em um elemento input, usando o atributo HTML bind. Veja na Figura 1.

Figura 1: TwoWay DataBinding

Nesse tipo de DataBinding a propriedade Message é atualizada pelo o que o usuário digitar no input, e o input seráatualizado se a propriedade for modificada via código C#.

Quando o usuário digita algum valor no input, a propriedade Message é modificada no momento em que o usuário “sair” do input, seja por pressionar TAB/ENTER, ou simplesmente clicar em alguma outra área da página. Confira esse comportamento na Figura 2.

Figura 2: Propriedade é alterada via TwoWay DataBinding ao sair do input

bind-value-oninput

No Blazor temos uma variação do atributo bind chamada bind-value-oninput. Essa variação fará com que o TwoWay DataBinding seja disparado a cada tecla pressionada pelo usuário no input.

Veja como implementar o bind-value-oninput na Figura 3.

Figura 3: Usando o bind-value-oninput

Execute o seu projeto e veja o resultado, como mostrado aqui na Figura 4.

Figura 4: Testando o bind-value-oninput

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

Publicidade