Création et concepts de la bibliothèque de classes Razor

5 minutes

Les composants des applications Web offrent aux développeurs la possibilité de réutiliser des parties d’une interface utilisateur dans l’ensemble de l’application. Grâce aux bibliothèques de classes Razor, les développeurs peuvent partager et réutiliser ces composants dans de nombreuses applications.

Dans cette unité, vous apprendrez comment créer une bibliothèque de classes Razor et comment l’utiliser pour partager du contenu rendu et statique pour des applications Blazor à personnaliser et à afficher.

À propos des bibliothèques de classes Razor

Une bibliothèque de classes Razor est un type de projet .NET qui contient des composants Razor, des pages, des fichiers HTML, Cascading Style Sheet (CSS), JavaScript, des images et d’autres contenus Web statiques qui peuvent être référencés par une application Blazor. Comme d’autres projets de bibliothèque de classes .NET, les bibliothèques de classes Razor peuvent être regroupées en tant que package NuGet et partagées sur des référentiels de packages NuGet comme NuGet.org.

Examinons le modèle par défaut pour la création d’une bibliothèque de classes Razor.

Créer un projet à l’aide du modèle par défaut

Vous pouvez commencer à créer une bibliothèque de classes Razor dans Visual Studio en sélectionnant Fichier>Nouveau projet.

Screenshot of the

Vous pouvez également créer des projets sur une interface de ligne de commande en exécutant la commande suivante :

dotnet new razorclasslib -o MyProjectName

Ce modèle fournit un composant initial nommé Component1 contenant plusieurs fonctionnalités importantes que vos composants peuvent utiliser :

Une feuille de style en cascade isolée nommée Component1.razor.css, stockée dans le même dossier que Component1.razor. Le fichier Component1.razor.css est inclus de manière conditionnelle dans une application Blazor qui référence Component1.
Contenu statique, tel que des images et des fichiers JavaScript, disponible pour une application Blazor au moment de l'exécution et référencé dans Component1. Ce contenu est fourni dans un dossier wwwroot qui se comporte comme un dossier wwwroot dans une application ASP.NET Core ou Blazor.
Code NET, qui exécute des fonctions se trouvant dans le fichier JavaScript inclus.

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

Différences entre une bibliothèque de classes et une bibliothèque de classes Razor

Une bibliothèque de classes est une structure de distribution de packages commune dans les applications .NET, et une bibliothèque de classes Razor est de structure similaire avec quelques autres fonctionnalités configurées dans le fichier projet.

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

Le fichier projet contient une référence SDK à Microsoft.NET.Sdk.Razor pour déclarer qu’il contient et crée du contenu Razor en tant que bibliothèque de classes Razor.
L’entrée SupportedPlatform déclare que cette bibliothèque peut être utilisée dans une plateforme browser, nommée WebAssembly.
Le PackageReference à la bibliothèque Microsoft.AspNetCore.Components.Web donne accès aux composants Blazor de base livrés avec l’infrastructure. Vous pouvez ainsi utiliser ces composants simples pour vous aider à construire des composants plus complexes.

Contenu du composant Razor

Le composant Razor initial fourni est simple. Il ne contient qu'un élément HTML div avec un court bloc de texte :

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

Ce composant interagit avec les autres composants Blazor et les pages qui le référencent de la même manière que vous attendez d'un composant fourni dans le même projet. Autrement dit, le script CSS isolé du fichier Component1.razor.css apparaît inline avec le reste du CSS de l'application dans le fichier application.css.

Remise d’une ressource statique

Vous pouvez référencer le contenu du dossier wwwroot parmi les autres contenus de ce dossier et les fichiers CSS individuels des composants, par exemple Component1.razor.css, en tant que fichiers du même dossier de base. Par exemple, la feuille CSS par défaut ajoute une bordure rouge de traits discontinus de 2 pixels et un style d’image d’arrière-plan qui utilise l’image background.png du dossier wwwroot. Aucun chemin n'est nécessaire pour faire cette référence du CSS au contenu qui réside dans le dossier wwwroot.

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

Le contenu du dossier wwwroot peut être référencé par des applications Blazor hébergées avec une référence de dossier absolue au format suivant :

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

Référencer une bibliothèque de classes Razor

Dans une solution .NET, où la bibliothèque de classes Razor réside sur le disque en regard d’une application Blazor qui référence la bibliothèque, vous pouvez mettre à jour l’application Blazor pour référencer la bibliothèque de classes Razor à l’aide de la boîte de dialogue Visual Studio standard Ajouter une référence et à l’aide de la commande add reference .NET CLI, comme indiqué ici :

dotnet add reference ../MyClassLibrary

Pour les bibliothèques fournies dans un formulaire de package NuGet, vous pouvez ajouter une référence à l’aide du programme d’installation de package NuGet Visual Studio ou à l’aide de la commande add package CLI .NET, comme indiqué ici :

dotnet add package MyClassLibrary