.NET 6 - Blazor : Library de Componentes

.NET 6 - Blazor : Criando uma Razor Class Library

Hoje veremos como criar uma Razor Class Library e compartilhar componentes e conteúdo estático.

Os componentes são o coração do Blazor e uma aplicação Blazor consiste em um ou mais Componentes Razor. Normalmente, um componente hospeda sua UI na forma de marcação HTML e a lógica associada.

Com Blazor podemos criar diferentes tipos de componentes e os reutilizamos ao longo do projeto. Ninguém quer reinventar a roda, por isso é sempre uma boa ideia criar uma biblioteca de componentes Blazor reutilizáveis que podem não apenas ser compartilhados entre vários projetos, mas também podem ser compartilhados com outros como um pacote NuGet.

O Blazor nos permite criar tais bibliotecas de componentes com a ajuda de um novo modelo de projeto chamado Razor Class Library e é isso que iremos mostrar neste artigo.

recursos usados:

Visual Studio 2022
.NET 6.0 RC 2
Blazor

Criando uma biblioteca de componentes (Razor Components Library)

Vamos criar um projeto Blazor Server app chamado BlazorClassLibrary1:

A seguir defina as configurações conforme abaixo:

E clique no botão Create.

A seguir vamos incluir um novo projeto via menu File-> Add New Project;

A seguir selecione o template Razor Class Library:

Informe o nome MeuComponenteLibrary ao projeto e solução e defina as configurações conforme abaixo:

Nota: Estamos usando o .NET 6.0 RC 2.

Clique no botão Create para criar.

Ao final será criado o projeto com um componente - Component1.razor e o arquivo ExampleInterop.cs que vamos excluir. Vamos excluir também todo o conteúdo da pasta wwwroot,

Agora vamos iniciar a criação dos nosso primeiros componentes compartilhados no projeto MeuComponenteLIbrary.

Clique com o botão do mouse no projeto e selecionar Add-> New Item.. e a seguir selecione o template Razor Component informando o nome TabelaWidget.razor.

Estamos criando este componente com o seguinte objetivo :

Ele será usado como um modelo para gerar tabelas HTML a partir de uma lista de objetos.

Aqui se você quiser incluir um arquivo code-behind chamado TabelaWidget.razor.cs de forma a manter o seu código C# separado da visualização do componente. Para fazer isso basta incluir uma classe com este nome no projeto.

Agora vamos incluir o código da visualização no arquivo TabelaWidget.razor conforme abaixo:

@typeparam TItem

<table class="table table-striped table-bordered">
    <thead class="thead-green">
        <tr>
            @HeaderTemplate
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Items)
    {
        <tr>
            @RowTemplate(item)
        </tr>
    }
    </tbody>
    <tfoot>
        <tr>
            @FooterTemplate
        </tr>
    </tfoot>
</table>

A diretiva @typeparam nos permite definir um ou mais parâmetros genéricos separados por vírgula em nossa classe. Isso pode ser especialmente útil quando combinado com a classe RenderFragment <T> genérica.

Abaixo temos o código do arquivo code-behind TabelaWidget.razor.cs :

using Microsoft.AspNetCore.Components;

namespace MeuComponenteLibrary;

public partial class TabelaWidget<TItem>
{
    [Parameter]
    public RenderFragment HeaderTemplate { get; set; }

    [Parameter]
    public RenderFragment<TItem> RowTemplate { get; set; }

    [Parameter]
    public RenderFragment FooterTemplate { get; set; }

    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
}

Nota: Aqui estou usando novo recurso dos namespaces com escopo de arquivo.

No código do arquivo code-behind o componente possui modelos de Header, Row e Footer do tipo RenderFragment para gerar o cabeçalho, o corpo e o rodapé da tabela HTML na visualização.

Nota: O RenderFragment é usado para renderizar componentes ou conteúdo em tempo de execução no Blazor. A classe RenderFragment permite que você crie o conteúdo ou componente necessário de maneira dinâmica em tempo de execução.

Cada componente reutilizável que criamos na biblioteca de classes Razor também pode ter sua folha de estilo para definir a aparência do componente. Por exemplo, se quisermos que nosso componente TabelaWidget gere tabelas com o cabeçalho azul escuro, podemos definir os estilos de nosso componente no arquivo TabelaWidget.razor.css :

.thead-green {
      background-color: darkblue;
      color: white;
}

Agora nosso projeto possui a seguinte estrutura:

Consumindo a biblioteca MeuComponenteLibrary

Agora que definimos nosso componente TabelaWidget no projeto de biblioteca de classes, agora é hora de usar este componente em nosso projeto Blazor Server.

Para isso clique com o botão direito do mouse no nó Dependencies na janela Solution Explorer e escolha a opção Add->Project Reference... no menu de contexto.

A seguir selecione o projeto MeuComponenteLibrary e clique em OK.

Se você deseja usar o componente TabelaWidget em várias páginas, é recomendável adicionar a referência da biblioteca no arquivo _Imports.razor.

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using BlazorClassLibrary1
@using BlazorClassLibrary1.Shared
@using MeuComponenteLibrary

Vamos aproveitar o componente FetchData.razor gerado no projeto Blazor Server.

Este componente exibe objetos de previsão do tempo de um serviço de back-end. Podemos testar nosso componente TabelaWidget nesta página. Abra o arquivo FetchData.razor na pasta Pages e substitua a tabela HTML existente pelo componente TabelaWidget, conforme mostrado no trecho de código abaixo.

...
@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
<TabelaWidget Items="forecasts" Context="forecast">
        <HeaderTemplate>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
        </HeaderTemplate>
        <RowTemplate>
            <td>@forecast.Date.ToShortDateString()</td>
            <td>@forecast.TemperatureC</td>
            <td>@forecast.TemperatureF</td>
            <td>@forecast.Summary</td>
        </RowTemplate>
    </TabelaWidget>
}

...

Executando o projeto veremos a grade de previsão do tempo gerada usando nosso componente TabelaWidget e, agora poderemos reutilizar o componente TabelaWidget em várias páginas ou projetos e sempre veremos a mesma grade gerada.

Na próxima parte do artigo veremos como usar imagens a partir das Razor Class Library.

Pegue o projeto aqui: BlazorClassLibrary1.zip

"Paulo, apóstolo enviado, não da parte de homens nem por meio de pessoa alguma, mas por Jesus Cristo e por Deus Pai, que o ressuscitou dos mortos,"
Gálatas 1:1

Referências:

José Carlos Macoratti