Creazione e concetti delle librerie di classi Razor

5 minuti

I componenti nelle applicazioni Web consentono agli sviluppatori di riutilizzare parti dell'interfaccia utente di un'applicazione nell'intera applicazione. Usando le librerie di classi Razor, gli sviluppatori possono condividere e riutilizzare questi componenti in molte applicazioni.

In questa unità si apprenderà come creare una libreria di classi Razor e quindi usarla per condividere contenuto con rendering e statico per applicazioni Blazor da personalizzare e visualizzare.

Informazioni sulle librerie di classi Razor

Una libreria di classi Razor è un tipo di progetto .NET che contiene componenti Razor, pagine, HTML, file CSS (Cascading Style Sheet), JavaScript, immagini e altro contenuto Web statico a cui un'applicazione Blazor può fare riferimento. Analogamente ad altri progetti di librerie di classi .NET, le librerie di classi Razor possono essere raggruppate come pacchetto NuGet e condivise in repository di pacchetti NuGet, tra cui NuGet.org.

Verrà ora esaminato il modello predefinito per la creazione di una libreria di classi Razor.

Creare un progetto usando il modello predefinito

È possibile iniziare facoltativamente a creare una libreria di classi Razor in Visual Studio selezionando File>Nuovo progetto.

Screenshot of the

È anche possibile creare progetti nell'interfaccia della riga di comando eseguendo questo comando:

dotnet new razorclasslib -o MyProjectName

Questo modello fornisce un componente iniziale, denominato Component1, che contiene alcune funzionalità importanti che possono essere usate dai componenti:

Un foglio di stile CSS isolato denominato Component1.razor.css, che viene archiviato nella stessa cartella di Component1.razor. Il file Component1.razor.css è incluso in modo condizionale in un'applicazione Blazor che fa riferimento a Component1.
Contenuto statico, ad esempio immagini e file JavaScript, disponibile per un'applicazione Blazor in fase di esecuzione e a cui viene fatto riferimento in Component1. Questo contenuto viene distribuito in una cartella wwwroot che ha un comportamento uguale a quello di una cartella wwwroot in un'applicazione ASP.NET Core o Blazor.
Codice .NET, che esegue funzioni che si trovano nel file JavaScript incluso.

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

Differenze tra una libreria di classi e una libreria di classi Razor

Una libreria di classi è una struttura di distribuzione di pacchetti comune nelle applicazioni .NET e una libreria di classi Razor ha una struttura simile, con alcune funzionalità aggiuntive configurate nel file di progetto.

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

Il file di progetto contiene un riferimento SDK a Microsoft.NET.Sdk.Razor per dichiarare che contiene e crea contenuto Razor come una libreria di classi Razor.
La voce SupportedPlatform dichiara che questa libreria può essere usata in una piattaforma browser, ovvero WebAssembly.
PackageReference per la libreria Microsoft.AspNetCore.Components.Web fornisce l'accesso ai componenti Blazor di base che vengono distribuiti insieme al framework. È quindi possibile usare questi semplici componenti per agevolare la creazione di componenti più complessi.

Contenuti dei componenti Razor

Il componente Razor iniziale fornito è semplice. Contiene solo un elemento HTML div con un breve blocco di testo:

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

Questo componente interagisce con altri componenti e altre pagine di Blazor che vi fanno riferimento in modo analogo a quanto previsto per un componente distribuito nello stesso progetto, ovvero il rendering dello script isolato del file CSS nel file Component1.razor.css viene eseguito inline con il resto del file CSS dell'applicazione nel file application.css.

Distribuzione di asset statici

È possibile fare riferimento ai contenuti della cartella wwwroot in modo relativo tra gli altri contenuti di tale cartella e i singoli file CSS dei componenti, ad esempio Component1.razor.css, come file nella stessa cartella di base. Il file CSS predefinito, ad esempio, aggiunge un bordo rosso tratteggiato da 2 pixel e uno stile di immagine di sfondo che usa l'immagine background.png nella cartella wwwroot. Non è necessario alcun percorso per creare questo riferimento dal file CSS al contenuto che si trova nella cartella wwwroot.

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

I contenuti della cartella wwwroot sono disponibili per il riferimento da parte di applicazioni Blazor ospitate con un riferimento assoluto alla cartella con il formato seguente:

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

Fare riferimento a una libreria di classi Razor

In una soluzione .NET in cui la libreria di classi Razor si trova sul disco accanto a un'applicazione Blazor che fa riferimento alla libreria, è possibile aggiornare l'applicazione Blazor in modo che faccia riferimento alla libreria di classi Razor usando la finestra di dialogo standard Aggiungi riferimento di Visual Studio e usando il comando add reference dell'interfaccia della riga di comando di .NET, come mostrato qui:

dotnet add reference ../MyClassLibrary

Per le librerie distribuite sotto forma di pacchetto NuGet, è possibile aggiungere un riferimento usando il programma di installazione di pacchetti NuGet per Visual Studio o usando il comando add package dell'interfaccia della riga di comando di .NET, come mostrato qui:

dotnet add package MyClassLibrary

Verificare le conoscenze

Continua