Criação da biblioteca de classes Razor e seus conceitos
- 5 minutos
Componentes em aplicativos Web oferecem aos desenvolvedores a capacidade de reutilizar partes de uma interface do usuário do aplicativo em todo o aplicativo. Usando bibliotecas de classes razor, os desenvolvedores podem compartilhar e reutilizar esses componentes em muitos aplicativos.
Nesta unidade, você aprenderá a criar uma biblioteca de classes Razor. Em seguida, use-o para compartilhar conteúdo renderizado e estático para aplicativos Blazor para personalizar e exibir.
Biblioteca de classes Razor
Uma biblioteca de classes Razor é um tipo de projeto .NET. Ele contém componentes Razor, páginas, HTML, arquivos CSS (Folha de Estilos em Cascata), JavaScript, imagens e outros conteúdos estáticos da Web que um aplicativo Blazor pode referenciar. Assim como outros projetos de biblioteca de classes do .NET, as bibliotecas de classes razor podem ser agrupadas como um pacote NuGet e compartilhadas em repositórios de pacotes NuGet, como NuGet.org.
Vamos examinar o template 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.
Você também pode criar projetos em uma interface de linha de comando executando o seguinte comando:
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 estilos 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 ao Component1.
- Conteúdo estático, como imagens e arquivos JavaScript, que está disponível para um aplicativo Blazor em runtime e referenciado no 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.
Diferenças entre uma biblioteca de classes e uma biblioteca de classes Razor
Uma biblioteca de classes é uma estrutura de entrega de pacotes comum em aplicativos .NET e uma biblioteca de classes Razor é semelhante na 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 ao SDK Microsoft.NET.Sdk.Razor para declarar que ele contém e cria conteúdo Razor como uma biblioteca de classes Razor.
- A
SupportedPlatformentrada declara que essa biblioteca pode ser usada em umabrowserplataforma, ou seja, WebAssembly. - O
PackageReferencepara a bibliotecaMicrosoft.AspNetCore.Components.Webfornece acesso aos componentes básicos do Blazor que são fornecidos com a estrutura. Esse acesso permite que você use esses componentes simples para ajudá-lo a criar componentes mais complexos.
Conteúdo do componente do Razor
Esse componente Razor inicial é simples. Ele contém apenas um elemento HTML div com um bloco curto 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 forma que você esperaria que um componente entregue no mesmo projeto se comportasse. Ou seja, o script isolado do CSS no arquivo Component1.razor.css é renderizado embutido com o restante do CSS do aplicativo no arquivo application.css .
Entrega de ativos estáticos
Você pode referenciar o conteúdo da pasta wwwroot relativamente entre os outros conteúdos dessa pasta. Você também pode fazer referência relativamente aos 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 plano de fundo que usa a imagem background.png na pasta wwwroot. Nenhum caminho é necessário para fazer essa referência do CSS para o 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 referência 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 Blazor 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 .NET CLI add reference , conforme mostrado aqui:
dotnet add reference ../MyClassLibrary
Para bibliotecas entregues no formulário do pacote NuGet, você pode adicionar uma referência usando o instalador de pacote NuGet do Visual Studio ou usando o comando .NET CLI add package , conforme mostrado aqui:
dotnet add package MyClassLibrary