Nesse artigo vamos trabalhar com Componentes Genéricos no Blazor. Para entender os Componentes genéricos, sugiro que antes você leia o artigo sobre Templated Components.
Programação Genérica
O recurso de programação genérica, também conhecido por Generics, é nativo da plataforma dotnet desde a sua terceira versão.
Com o Generics podemos passar um Tipo como parâmetro, para uma determinada classe. A notação para criar uma classe genérica é a seguinte:
public class ClasseGenerica<T>
Ao instanciar um objeto da classe acima, no lugar do T devemos passar um tipo. Esse tipo será utilizado nas regras de negócio da classe genérica.
No Blazor o recurso de Generics foi adicionado aos componentes, e com ele podemos enriquecer ainda mais os nossos componentes baseados em templates, os Templated Components.
Para validarmos esse conceito, nesse artigo vamos criar um exemplo de Componente Genérico chamado Tabela.razor.
@typeparam
Para receber um tipo genérico por parâmetro em um componente, devemos utilizar a diretiva @typeparam. Veja na Figura 1.
Por convenção usamos a letra T em maiúsculo como nome do parâmetro genérico. Se você precisa receber mais de um tipo genérico no mesmo Componente, deve nomear seus parâmetros sempre começando com a letra T, exemplo: TFoo, TBar, TItem, etc.
RenderFragment<T>
Para utilizar um tipo genérico em um fragmento HTML, utilizamos a versão genérica da classe RenderFragment. Isso nos permite definir que o fragmento HTML em questão é do mesmo tipo genérico definido no parâmetro do Componente.
Veja na Figura 2, que estamos criando uma propriedade RenderFragment<T> para usar na renderização das linhas da nossa tabela.
Note que no código do Componente Tabela.razor, além do RenderFragment<T> para a Linha, temos um outro fragmento, não genérico, para a renderização do Cabeçalho da Tabela.
Além disso temos um outro parâmetro que também é genérico, do tipo IReadOnlyList<T> chamado Items. Essa propriedade Items vai receber os dados que serão renderizados pelo fragmento Linha.
Na prática, a propriedade Linha receberá uma estrutura do HTML, que define uma linha da tabela. Já a propriedade Itens, receberá os dados para preencher cada uma das linhas da tabela.
A quantidade de linhas renderizadas dependerá da quantidade de objetos que vierem na coleção Items.
Seguindo essa lógica, nosso componente poderá ser usado para renderizar uma tabela para qualquer tipo de objeto do nosso Modelo. E para finalizar o Componente Tabela.razor, implemente o HTML como nos mostra a Figura 3.
Nesse código HTML você pode ver que temos um foreach dentro do body da tabela. Esse foreach vai percorrer todos os itens da propriedade Items.
Dentro do foreach usamos o RenderFragment<T> Linha, como template para cada uma das linhas da tabela.
Usando o Componente Genérico
Para utilizar o Tabela.razor, vamos modificar o componente FetchData.razor, que vem de exemplo quando criamos um projeto usando o template do Blazor.
Se você abrir o componente FetchData.razor, verá que nele temos uma table que é usada para renderizar uma série de previsões do tempo. Substitua essa table pelo código que você pode ver aqui na Figura 4.
Veja que o componente Tabela, primeiramente recebe como parâmetro a propriedade Items, que nesse caso está recebendo a lista de previsões do tempo.
Nesse momento, por inferência, nosso tipo genérico já é determinado. Nesse caso, a lista de forecasts é uma array de objetos da classe WeatherForecast, que é portanto o tipo passado para o parâmetro genérico.
Com o tipo genérico definido, ele será utilizado no template Linha. Veja na própria Figura 4 que a Linha, por ser um RenderFragment<T>, tem uma propriedade chamada context.
Essa propriedade é do tipo genérico definido, e assim podemos usar as propriedades dessa classe para definir o HTML que será renderizado em cada linha.
Execute o projeto e veja o resultado como demonstrado aqui na Figura 5.
Você pode, opcionalmente, definir explicitamente qual é o tipo genérico que será passado para o parâmetro T, e até definir um nome alternativo para o atributo context. Veja um exemplo na Figura 6.
Grande Abraço e até o próximo!
Blaze of Code 
Um comentário em “Componentes Genéricos do Blazor”