Cascading values and parameters

Nesse artigo vamos explorar um recurso do Blazor que nos permite passar valores em cascata, de um componente pai para um componente filho.

Antes de ler esse artigo eu sugiro que você conheça bem os recursos de Parâmetros de Componentes e Layouts.

Objetivo

Em algumas aplicações você identificará a necessidade de passar dados em cascata de um componente pai, para todos os seus componentes descendentes.

No exemplo que faremos nesse artigo, vamos simular um cenário onde temos um objeto Tema, que será definido no componente MainLayout da aplicação, e será passado em cascata para todos os componentes renderizados no Layout.

Para isso crie uma classe chamada Tema.cs no seu projeto de exemplo, como mostra a Figura 1.

Como você pode ver, a classe Tema tem apenas uma propriedade do tipo string chamada ButtonClass, como prova de conceito.

Para que possamos utilizar essa classe em todos os componentes do projeto, importe o seu namespace no arquivo _Imports.razor, assim:

@using MyBlazorApp.Model

Agora, lá no componente MainLayout.razor, vamos adicionar um atributo do tipo Tema, e definir um valor para o ButtonClass. Veja como fica esse atributo na Figura 2.

CascadingValue

Para podermos passar valores em cascata, precisamos utilizar um Componente chamado CascadingValue. Todo o Componente que for renderizado dentro de um CascadingValue, irá receber o seu valor por cascata.

Nesse exemplo vamos incluir um CascadingValue no HTML do componente MainLayout, de forma que o @Body desse layout fique dentro da tag <CascadingValue>…</CascadingValue>.

Com isso, qualquer componente renderizado no @Body do layout irá receber o valor por cascata. Como você poder ver na Figura 3, configuramos o atributo tema no CascadingValue, através do parâmetro Value.

CascadingParameter

Para recepcionar um valor passado por cascata em um componente filho, precisamos criar um parâmetro do tipo CascadingParameter.

E para testarmos isso, vamos criar esse parâmetro no componente Counter.razor, da aplicação de exemplo. Veja como fica essa declaração na Figura 4.

Com isso, a propriedade Tema será automaticamente alimentada pelo CascadingValue declarado no MainLayout.razor.

Agora podemos utilizar o Tema da forma que quisermos. Nesse caso vamos aproveitá-lo para definir uma classe para o botão que temos nesse componente. Veja na Figura 5.

Concluindo

Para finalizar, execute o seu projeto, navegue no componente Counter e veja o resultado, como mostra a Figura 6.

Veja que a classe btn-success definida no MainLayout, foi aplicada ao botão do componente Counter, através do valor que foi passado por cascata.

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