Criação e conceitos da biblioteca de classes do Razor

5 minutos

Componentes em aplicativos da Web dão aos desenvolvedores a capacidade de reutilizar partes de uma interface de usuário de aplicativo em todo o aplicativo. Usando bibliotecas de classes Razor, os desenvolvedores podem compartilhar e reutilizar esses componentes em vários aplicativos.

Nesta unidade, você aprenderá a criar uma biblioteca de classes Razor e a usá-la para compartilhar conteúdo renderizado e estático a fim de personalizar e exibir aplicativos Blazor.

Sobre as bibliotecas de classes Razor

Uma biblioteca de classes Razor é um tipo de projeto .NET que contém páginas, HTML, arquivos CSS (Folha de Estilos em Cascata), componentes do Razor, JavaScript, imagens e outros conteúdos estáticos da Web que podem ser referenciados por um aplicativo Blazor. Assim como outros projetos de biblioteca de classes .NET, as bibliotecas de classes Razor podem ser agrupadas como um pacote NuGet e compartilhadas em repositórios como NuGet.org.

Vamos examinar o modelo padrão para criar uma biblioteca de classes Razor.

Criar um projeto usando o modelo padrão

Opcionalmente, você pode começar a criar uma biblioteca de classes Razor no Visual Studio selecionando Arquivo>Novo Projeto.

Screenshot of the

Você também pode criar projetos em uma interface de linha de comando executando o seguinte:

dotnet new razorclasslib -o MyProjectName

Este modelo fornece um componente inicial chamado Component1, que contém vários recursos importantes que seus componentes podem usar:

Uma folha de estilo em cascata isolada chamada Component1.razor.css, que é armazenada na mesma pasta que Component1.razor. O arquivo Component1.razor.css é incluído condicionalmente em um aplicativo Blazor que faz referência a Component1.
Conteúdo estático, como imagens e arquivos JavaScript, disponível para um aplicativo Blazor em runtime e referenciado em Component1. Esse conteúdo é entregue em uma pasta wwwroot que se comporta da mesma maneira que uma pasta wwwroot em um aplicativo ASP.NET Core ou Blazor.
Código .NET que executa funções que residem no arquivo JavaScript incluído.

Screenshot of Visual Studio Solution Explorer, showing the default project contents.

Diferenças entre uma biblioteca de classes e uma biblioteca de classes Razor

Uma biblioteca de classes é uma estrutura de entrega de pacote comum em aplicativos .NET, e a biblioteca de classes do Razor é semelhante em estrutura, com alguns outros recursos configurados no arquivo de projeto.

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  
  <ItemGroup>
    <SupportedPlatform Include="browser" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
  </ItemGroup>

</Project>

O arquivo de projeto contém uma referência SDK para Microsoft.NET.Sdk.Razor para declarar que ele contém e cria conteúdo Razor como uma biblioteca de classes Razor.
A entrada SupportedPlatform declara que essa biblioteca pode ser usada em uma plataforma browser, chamada WebAssembly.
O PackageReference para a biblioteca Microsoft.AspNetCore.Components.Web fornece acesso aos componentes básicos do Blazor que são fornecidos com a estrutura. Isso permite que você use esses componentes simples como auxílio na criação de componentes mais complexos.

Conteúdo do componente do Razor

O componente Razor inicial que é fornecido é simples. Ele contém apenas um elemento div HTML com um pequeno bloco de texto:

<div class="my-component">
    This component is defined in the <strong>FirstRazorLibrary</strong> library.
</div>

Esse componente interage com outros componentes e páginas do Blazor que fazem referência a ele da mesma maneira que você esperaria que um componente entregue no mesmo projeto se comportasse. Ou seja, o script isolado de CSS no arquivo Component1.razor.css é renderizado em linha com o restante do CSS do aplicativo no arquivo application.css.

Entrega de ativo estático

Você pode fazer referência ao conteúdo da pasta wwwroot relativamente entre os outros conteúdos dessa pasta e os arquivos CSS individuais dos componentes, como Component1.razor.css, como arquivos na mesma pasta base. Por exemplo, o CSS padrão adiciona uma borda vermelha tracejada de dois pixels e um estilo de imagem de fundo que usa a imagem background.png na pasta wwwroot. Nenhum caminho é necessário para fazer essa referência do CSS ao conteúdo que reside na pasta wwwroot.

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

O conteúdo da pasta wwwroot está disponível para ser referenciado por aplicativos Blazor hospedados com uma referência de pasta absoluta no formato:

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

Como fazer referência a uma biblioteca de classes Razor

Em uma solução .NET, em que a biblioteca de classes Razor reside no disco ao lado de um aplicativo Blazor que faz referência à biblioteca, você pode atualizar o aplicativo para fazer referência à biblioteca de classes Razor usando a caixa de diálogo Adicionar Referência do Visual Studio padrão e usando o Comando add reference da CLI do .NET, conforme mostrado aqui:

dotnet add reference ../MyClassLibrary

Para bibliotecas que são entregues no formato de pacote NuGet, você pode adicionar uma referência usando o instalador do pacote NuGet do Visual Studio ou usando o comando add package da CLI do .NET, conforme mostrado aqui:

dotnet add package MyClassLibrary