Templates Razor no Blazor

Nesse artigo veremos como é possível criar pequenos templates HTML com o uso dos Templates Razor. Antes de ler esse artigo sugiro que antes você conheça os seguintes conceitos:

• ChildContent
• Templated Components

Template Razor

Os Templates Razor sãofuncionalidades comuns em projetos ASP.NET MVC, que utilizam o Razor como View Engine. E nós também podemos utilizar esse recurso em Componentes Blazor.

Basicamente, nós podemos utilizar um Template Razor para renderizar um fragmento HTML, aqui representado pela classe RenderFragment. Veja um exemplo de como declarar um Template Razor na Figura 1.

Figura 1: Definindo um Template Razor com o RenderFragment

Veja que os templates Razor são escritos dentro da tag @{ … }. Dentro dessa tag podemos declarar quantos templates quisermos. O template em si é declarado como um atributo da classe RenderFragment. E veja que o template é uma mistura de HTML com C#.

Para usar o template, basta adicioná-lo no corpo HTML do seu Componente Blazor. Nesse exemplo estou criando e usando o template no componente Index.razor, de um projeto de exemplo.

Veja como usar o Template Razor na Figura 2.

Figura 2: Usando o template Razor

Como você pode ver, nós devemos declarar os templates no topo do componente, para poder utilizá-los abaixo, no seu corpo HTML. Execute o seu projeto e veja o resultado como mostra a Figura 3.

Figura 3: Testando o Template Razor

Template Razor Genérico

Graças a versão genérica da classe RenderFragment<T>, podemos criar templates genéricos onde podemos passar por parâmetro um determinado objeto. Veja na Figura 4 o exemplo de um template genérico, que receberá um objeto da classe Contato.

Figura 4: Declaração de um Template Razor Genérico

Nesse template estamos recebemos um objeto da classe Contato, através do parâmetro contato. Com esse objeto, criamos um template que vai renderizar um link, usando o Nome e Email do contato. Veja como podemos utilizá-lo na Figura 5.

Figura 5: Usando Template Razor Genérico

Note que estamos passando por parâmetro uma instância da classe Contato, com as propriedades Nome e Email preenchidas. Execute o seu projeto e veja o resultado na Figura 6.

Figura 6: Testando o Template Razor Genérico

Concluindo

Os templates Razor podem ser úteis para criar templates para pequenos fragmentos HTML. E uma das grandes vantagens dos Templates Razor é que podemos passá-los por parâmetro para Componentes com ChildContent, e também para os Templated Components.

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

Publicidade