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

Les composants dans les applications web permettent aux développeurs de réutiliser des parties d’une interface utilisateur d’application tout au long de l’application. En utilisant des bibliothèques de classes Razor, les développeurs peuvent partager et réutiliser ces composants dans de nombreuses applications.

Dans cette unité, vous allez apprendre à créer une bibliothèque de classes Razor. Vous l’utilisez ensuite pour partager du contenu rendu et statique pour les applications Blazor afin de personnaliser et d’afficher.

Bibliothèques de classes Razor

Une bibliothèque de classes Razor est un type de projet .NET. Il contient des composants Razor, des pages, html, des fichiers CSS (Cascading Style Sheet), JavaScript, des images et d’autres contenus web statiques qu’une application Blazor peut référencer. 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 package NuGet tels que NuGet.org.

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

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

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

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, qui contient plusieurs fonctionnalités importantes que vos composants peuvent utiliser :

• Feuille de style en cascade isolée nommée Component1.razor.css, qui est 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 fait référence à Component1.
• Contenu statique, tel que des images et des fichiers JavaScript, qui est 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 de la même façon qu’un dossier wwwroot dans une application ASP.NET Core ou Blazor.
• Code .NET, qui exécute des fonctions qui résident dans le fichier JavaScript inclus.

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

Une bibliothèque de classes est une structure de remise de package courante dans les applications .NET, et une bibliothèque de classes Razor est similaire dans la structure 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 browser plateforme, à savoir WebAssembly.
• Le PackageReference à la bibliothèque Microsoft.AspNetCore.Components.Web donne accès aux composants Blazor de base livrés avec l’infrastructure. Cet accès vous permet d’utiliser ces composants simples pour vous aider à créer des composants plus complexes.

Contenu du composant Razor

Ce composant Razor initial est simple. Il contient uniquement un élément HTML div avec un bloc de texte court :

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

Ce composant interagit avec d’autres composants et pages Blazor qui le référencent de la même façon qu’un composant fourni dans le même projet doit se comporter. Autrement dit, le script isolé CSS dans le fichier Component1.razor.css est rendu inline avec le reste du fichier CSS de l’application dans le fichier application.css .

Distribution des ressources statiques

Vous pouvez référencer le contenu du dossier wwwroot relativement parmi les autres contenus de ce dossier. Vous pouvez également référencer relativement les fichiers CSS individuels des composants, tels que Component1.razor.css, en tant que fichiers dans le même dossier de base. Par exemple, le CSS par défaut ajoute une bordure rouge en pointillés de deux pixels et un style d’image d’arrière-plan qui utilise l’image background.png dans le dossier wwwroot . Aucun chemin d’accès 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 est disponible pour référencer les applications Blazor hébergées avec une référence de dossier absolue au format :

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

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

Dans une solution .NET, où réside la bibliothèque de classes Razor sur le disque en regard d’une application Blazor qui fait 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 Ajouter une référence Visual Studio standard et à l’aide de la commande CLI add reference .NET, comme illustré 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 du package NuGet Visual Studio ou à l’aide de la commande CLI add package .NET, comme illustré ici :

dotnet add package MyClassLibrary