Creación y conceptos de la biblioteca de clases de Razor

5 minutos

Los componentes de las aplicaciones web permiten a los desarrolladores reutilizar partes de una interfaz de usuario de aplicación en toda la aplicación. Mediante el uso de bibliotecas de clases de Razor, los desarrolladores pueden compartir y reutilizar estos componentes en muchas aplicaciones.

En esta unidad aprenderá a crear una biblioteca de clases de Razor y a usarla para compartir contenido representado y estático para que las aplicaciones Blazor lo personalicen y presenten.

Acerca de las bibliotecas de clases de Razor

Una biblioteca de clases de Razor es un tipo de proyecto de .NET que contiene componentes de Razor, páginas, HTML, CSS, JavaScript, imágenes y otro contenido web estático al que puede hacer referencia una aplicación Blazor. Al igual que otros proyectos de biblioteca de clases de .NET, las bibliotecas de clases de Razor se pueden agrupar como un paquete de NuGet y compartirse en repositorios de paquetes de NuGet, como NuGet.org.

Echemos un vistazo a la plantilla predeterminada para crear una biblioteca de clases de Razor.

Creación de un proyecto con la plantilla predeterminada

Opcionalmente, puede empezar a crear una biblioteca de clases de Razor en Visual Studio seleccionando Archivo>Nuevo proyecto.

Screenshot of the

También puede crear proyectos en una interfaz de línea de comandos ejecutando el siguiente comando:

dotnet new razorclasslib -o MyProjectName

Esta plantilla ofrece un componente inicial denominado Component1 que muestra varias características importantes que los componentes pueden usar:

Hoja de estilos en cascada aislada denominada Component1.razor.css, que se almacena en la misma carpeta que Component1.razor. El archivo Component1.razor.css se incluye condicionalmente en una aplicación Blazor que hace referencia a Component1.
Contenido estático, como imágenes y archivos JavaScript, que está disponible para una aplicación Blazor en tiempo de ejecución y al que se hace referencia en Component1. Este contenido se entrega en una carpeta wwwroot que se comporta igual que una carpeta wwwroot en una aplicación ASP.NET Core o Blazor.
Código .NET, que ejecuta funciones que residen en el archivo JavaScript incluido.

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

Diferencias entre una biblioteca de clases y una biblioteca de clases de Razor

Una biblioteca de clases es una estructura de entrega de paquetes común de las aplicaciones de .NET, y la biblioteca de clases de Razor tiene una estructura similar con algunas otras características configuradas en el archivo de proyecto.

<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>

El archivo de proyecto contiene una referencia del SDK a Microsoft.NET.Sdk.Razor para declarar que contiene y crea contenido de Razor como una biblioteca de clases de Razor.
La entrada SupportedPlatform declara que esta biblioteca se puede usar en una plataforma browser, es decir, WebAssembly.
La referencia PackageReference a la biblioteca Microsoft.AspNetCore.Components.Web proporciona acceso a los componentes base de Blazor que se envían con el marco de trabajo. Esto le permite usar esos componentes sencillos para poder crear componentes más complejos.

Contenido del componente de Razor

El componente inicial de Razor que se entrega es sencillo. Solo contiene un elemento HTML div con un bloque corto de texto:

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

Este componente interactuará con otros componentes y páginas de Blazor que hacen referencia a él de la misma manera que esperaría que se comporte un componente entregado en el mismo proyecto, con el script aislado de CSS en Component1.razor.css representado en línea con el resto de los archivos CSS de la aplicación en el archivo application.css.

Entrega de recursos estáticos

Puede hacer referencia al contenido de la carpeta wwwroot relativamente entre el otro contenido de esa carpeta y los archivos CSS individuales de los componentes, como Component1.razor.css, como archivos de la misma carpeta base. Por ejemplo, el archivo CSS predeterminado agrega un borde rojo discontinuo de dos píxeles y un estilo de imagen de fondo mediante la imagen background.png de la carpeta wwwroot. No se requiere ninguna ruta de acceso para hacer esta referencia desde el archivo CSS al contenido que reside en la carpeta wwwroot.

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

Las aplicaciones Blazor hospedadas pueden hacer referencia al contenido de la carpeta wwwroot con una referencia de carpeta absoluta en el formato:

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

Referencia a una biblioteca de clases de Razor

En una solución .NET, donde nuestra biblioteca de clases de Razor reside en el disco junto a una aplicación Blazor que hará referencia a la biblioteca, podemos actualizar la aplicación Blazor para que haga referencia a la biblioteca de clases de Razor mediante el cuadro de diálogo Agregar referencia estándar de Visual Studio y mediante el comando add reference de la CLI de .NET:

dotnet add reference ../MyClassLibrary

En el caso de las bibliotecas proporcionadas en formato de paquete de NuGet, puede agregar una referencia mediante el instalador de paquetes de NuGet de Visual Studio o usar el comando add package de la CLI de .NET:

dotnet add package MyClassLibrary

Comprobación de conocimientos

Continuar