Creazione di librerie di classi Razor e relativi concetti
- 5 minuti
I componenti nelle applicazioni Web offrono agli sviluppatori la possibilità di riutilizzare parti di un'interfaccia utente dell'applicazione in tutta l'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. Viene quindi utilizzato per condividere contenuti statici e resi per le applicazioni Blazor, al fine di personalizzarli e visualizzarli.
Librerie di classi Razor
Una libreria di classi Razor è un tipo di progetto .NET. Contiene componenti Razor, pagine, HTML, file CSS (Cascading Style Sheet), JavaScript, immagini e altro contenuto Web statico a cui può fare riferimento un'applicazione Blazor. Analogamente ad altri progetti di libreria di classi .NET, le librerie di classi Razor possono essere raggruppate come pacchetto NuGet e condivise in repository di pacchetti NuGet, ad esempio NuGet.org.
Si esaminerà ora il modello predefinito per la creazione di una libreria di classi Razor.
Creare un progetto usando il modello predefinito
Facoltativamente, è possibile iniziare a creare una libreria di classi Razor in Visual Studio selezionando File>Nuovo progetto.
È anche possibile creare progetti in un'interfaccia della riga di comando eseguendo il comando seguente:
dotnet new razorclasslib -o MyProjectName
Questo modello offre un componente iniziale denominato Component1, che contiene diverse funzionalità importanti che i componenti possono usare:
- Foglio di stile a catena isolato denominato Component1.razor.css, archiviato nella stessa cartella di Component1.razor. Il file Component1.razor.css viene 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 all'interno di Component1. Questo contenuto viene distribuito in una cartella wwwroot che si comporta allo stesso modo di una cartella wwwroot in un'applicazione ASP.NET Core o Blazor.
- Codice .NET, che esegue funzioni che risiedono nel file JavaScript incluso.
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 è simile nella struttura con alcune altre funzionalità 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 libreria di classi Razor.
- La voce di
SupportedPlatformdichiara che questa libreria può essere usata su una piattaformabrowser, ovvero WebAssembly. -
PackageReferenceper la libreriaMicrosoft.AspNetCore.Components.Webfornisce l'accesso ai componenti Blazor di base che vengono distribuiti insieme al framework. Questo accesso consente di usare questi semplici componenti per creare componenti più complessi.
Contenuti dei componenti Razor
Questo componente Razor iniziale è 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 pagine Blazor che lo fanno riferimento nello stesso modo in cui si prevede che un componente distribuito nello stesso progetto si comporti. Ovvero, lo script isolato CSS nel file Component1.razor.css è integrato con il resto del CSS dell'applicazione all'interno di application.css.
Distribuzione statica degli asset
È possibile fare riferimento al contenuto della cartella wwwroot relativamente tra gli altri contenuti di tale cartella. È anche possibile fare riferimento relativamente ai singoli file CSS dei componenti, ad esempio Component1.razor.css, come i file nella stessa cartella di base. Ad esempio, il css predefinito aggiunge un bordo rosso tratteggiato a due pixel e uno stile di immagine di sfondo che usa l'immagine background.png nella cartella wwwroot . Non è necessario alcun percorso per fare questo riferimento dal CSS al contenuto che risiede nella cartella wwwroot .
.my-component {
border: 2px dashed red;
padding: 1em;
margin: 1em 0;
background-image: url('background.png');
}
Il contenuto della cartella wwwroot è disponibile per fare riferimento alle applicazioni Blazor ospitate con un riferimento assoluto alla cartella nel formato:
/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}
Fare riferimento a una libreria di classi Razor
In una soluzione .NET, in cui risiede la libreria di classi Razor sul disco accanto a un'applicazione Blazor che fa riferimento alla libreria, è possibile aggiornare l'applicazione Blazor per fare riferimento alla libreria di classi Razor usando la finestra di dialogo Standard Di aggiunta riferimento di Visual Studio e usando il comando dell'interfaccia della riga di comando di .NET add reference , come illustrato di seguito:
dotnet add reference ../MyClassLibrary
Per le librerie erogate nel formato pacchetto NuGet, è possibile aggiungere un riferimento usando il programma di installazione del pacchetto NuGet di Visual Studio o usando il comando .NET CLI add package, come mostrato qui:
dotnet add package MyClassLibrary