Atributos Condicionais no Blazor

Nós já falamos sobre como trabalhar com DataBinding no Blazor, nesse outro artigo aqui.

Agora vamos falar como o DataBinding funciona em atributos que não propriamente recebem valor, e sim modificam o comportamento de um elemento HTML apenas pela sua presença na Tag.

disabled

Um dos atributos condicionais mais utilizado em HTML é o disabled. Esse atributo serve basicamente para desabilitar um determinado input em nossa página. Exemplo:

<input type=”text” disabled />

Nesse exemplo, o input será apresentado de forma desabilitada na página, impedindo que você digite qualquer valor nele. Veja Figura 1.

Figura 1: Usando o atributo disabled em um input

Bind no disabled

O Blazor permite que façamos Bind em atributos condicionais, como é o caso do disabled. Basta fazer como mostra o código do componente da Figura 2.

Figura 2: Usando Bind em um atributo condicional

Veja que estamos igualando o atributo disabled à uma propriedade Flag, declarada no código do Componente.

O Flag é do tipo bool e será alterado sempre que o usuário clicar no botão Mudar Flag. Com isso, quando a propriedade Flag for igual a true, o atributo disabled será adicionado ao HTML do input.

Testando

Execute o seu projeto de exemplo e faça um teste. Como você pode ver na Figura 3, ao clicar no Botão, o atributo disabled será adicionado ao input.

Figura 3: Testando o Bind em um atributo condicional

Concluindo

Você pode fazer esse tipo de Bind com qualquer atributo HTML condicional, como por exemplo o atributo checked de um input do tipo checkbox.

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

Publicidade