Includere asset statici in una Razor class library

pubblicato da il 19/02/2021 alle 15:00

.NET Core  ASP.NET Core 

Introdotte nella versione 2.1 di ASP.NET Core, le Razor class library sono una funzionalità che permette di impacchettare una intera parte di una web application all'interno di un progetto esterno.

Ad esempio, può essere comodo costruire una intera funzionalità sotto forma di una library e riutilizzarla in progetti differenti: in un caso come questo, però, è utile rendere totalmente autocontenuta la libreria includendovi anche tutti gli asset statici (es: file js, css) ad essa necessari.

Per ottenere ciò, dobbiamo innanzitutto creare all'interno della Razor class library un folder chiamato wwwroot e copiare al suo interno (o all'interno di ulteriori folder al suo interno) tutti gli asset statici.

Creiamo, quindi, una razor class library di nome RazorLibrary con il comando:

dotnet new razorclasslib -n RazorLibrary

Al suo interno, creiamo il folder wwwroot dentro il quale inserire:

  • un file chiamato site1.css all'interno di un folder css
  • un file chiamato site.js all'interno di un folder js
  • una immagine ugi_logo.png all'interno di un folder img

Per utilizzare i suddetti asset statici, dovremo innanzitutto aggiungere una reference al progetto della class library nella nostra applicazione e aggiungere una chiamata al metodo UseStaticWebAssets del WebHostBuilder.

Ipotizzando di aver creato l'applicazione usando il template standard, la classe Program sarà quindi simile a quella mostrata di seguito:

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }
    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStaticWebAssets();
                    webBuilder.UseStartup<Startup>();
                });
}

A questo punto, potremo usare gli asset statici inclusi nella class library in tutte le view/pagine sia della applicazione sia della library utilizzando una convenzione per costruire il loro path nel seguente modo:

  • prefisso ~/_content/
  • nome della class library (nel nostro caso: RazorLibrary)
  • percorso relativo della risorsa, utilizzando come root il folder wwwroot

Considerando gli asset ipotizzati all'inizio di questo tip, potremo quindi referenziarli nel modo seguente:

  • <link rel="stylesheet" href="~/_content/RazorLibrary/css/site1.css" />
  • <script src="~/_content/RazorLibrary/js/site.js"></script>
  • <img src="~/_content/RazorLibrary/img/Ugi_logo.png" />