Criação e conceitos da biblioteca de classes Razor
- 5 minutos
Os componentes em aplicativos 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 muitos aplicativos.
Nesta unidade, você aprende a criar uma biblioteca de classes Razor. Em seguida, você o usa para compartilhar conteúdo renderizado e estático para aplicativos Blazor personalizarem e exibirem.
Bibliotecas de classes Razor
Uma biblioteca de classes Razor é um tipo de projeto .NET. Ele contém componentes do Razor, páginas, HTML, arquivos CSS (Cascading Style Sheet), JavaScript, imagens e outros conteúdos estáticos da Web que um aplicativo Blazor pode referenciar. Como outros projetos de biblioteca de classes .NET, as bibliotecas de classes do Razor podem ser agrupadas como um pacote NuGet e compartilhadas em repositórios de pacotes NuGet, como NuGet.org.
Vamos examinar o modelo padrão para criar uma biblioteca de classes do Razor.
Criar um projeto usando o modelo padrão
Opcionalmente, você pode começar a criar uma biblioteca de classes do 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 a Component1.
- Conteúdo estático, como imagens e arquivos JavaScript, que está disponível para um aplicativo Blazor em tempo de execução e referenciado em Component1. Esse conteúdo é entregue em uma pasta wwwroot que se comporta da mesma forma 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 do Razor
Uma biblioteca de classes é uma estrutura comum de entrega de pacotes em aplicativos .NET, e uma biblioteca de classes 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 contém e cria conteúdo Razor como uma biblioteca de classes Razor.
- A entrada
SupportedPlatformdeclara que esta biblioteca pode ser usada numa plataformabrowser, nomeadamente WebAssembly. - A biblioteca de
PackageReferenceaMicrosoft.AspNetCore.Components.Webdá acesso aos componentes base do Blazor que vêm com o framework. Esse acesso permite que você use esses componentes simples para ajudá-lo a criar componentes mais complexos.
Conteúdo dos componentes da navalha
Este componente inicial do Razor é simples. Ele contém apenas um elemento HTML div 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 o referenciam da mesma forma que você esperaria que um componente entregue no mesmo projeto se comportasse. Ou seja, o script isolado CSS no ficheiro Component1.razor.css é processado em linha com o restante do CSS da aplicação no ficheiro application.css.
Entrega de ativos estáticos
Você pode fazer referência ao conteúdo da pasta wwwroot relativamente entre os outros conteúdos dessa pasta. Você também pode fazer referência relativa aos arquivos CSS individuais dos componentes, como Component1.razor.css, como arquivos na mesma pasta base. Como exemplo, o CSS padrão adiciona uma borda vermelha tracejada de dois pixels e um estilo de fundo que utiliza a imagem background.png na pasta wwwroot. Não é necessário nenhum caminho para referenciar o CSS ao conteúdo que está 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}
Fazer referência a uma biblioteca de classes do Razor
Em uma solução .NET, onde 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 padrão do Visual Studio Add Reference e usando o comando .NET CLI add reference, conforme mostrado aqui:
dotnet add reference ../MyClassLibrary
Para bibliotecas que são entregues no formulário de pacote NuGet, você pode adicionar uma referência usando o instalador do pacote NuGet do Visual Studio ou usando o comando .NET CLI add package, conforme mostrado aqui:
dotnet add package MyClassLibrary