Creare un'interfaccia utente riutilizzabile usando il progetto di Razor libreria di classi in ASP.NET Core

Di Rick Anderson

Razor visualizzazioni, pagine, controller, modelli di pagina, Razor componenti, componenti di visualizzazione e modelli di dati possono essere integrati in una Razor libreria di classi (RCL). La libreria di classi Razor può essere inclusa nel pacchetto e usata nuovamente. Le applicazioni possono includere la libreria di classi Razor ed eseguire l'override delle visualizzazioni e pagine in essa contenute. Quando si trova una visualizzazione, una visualizzazione parziale o Razor una pagina sia nell'app Web che nell'RCL, il Razor markup (.cshtml file) nell'app Web ha la precedenza.

Per informazioni su come integrare npm e webpack nel processo di compilazione per una libreria di Razor classi, vedere Creare asset Web client per la Razor libreria di classi.

Creare una libreria di classi contenente Razor l'interfaccia utente

Visual Studio

• In Visual Studio selezionare Crea nuovo progetto.
• Selezionare Razor Libreria di>classi Avanti.
• Denominare la libreria (ad esempio, "RazorClassLib"), >Create. Per evitare un conflitto di nomi di file con la libreria di visualizzazione generata, verificare che il nome della libreria non finisca per .Views.
• Selezionare Support pages and views (Pagine e visualizzazioni di supporto) se è necessario che la raccolta contenga pagine e/o visualizzazioni. Per impostazione predefinita, sono supportati solo Razor i componenti. Seleziona Crea.

Per impostazione predefinita, il Razor modello della libreria di classi (RCL) è Razor lo sviluppo di componenti. L'opzione Support pages and views supporta pagine e visualizzazioni. Per altre informazioni sul supporto di RCL in Blazor, vedere Utilizzare componenti di Razor base ASP.NET da una Razor libreria di classi (RCL).

Interfaccia della riga di comando di .NET Core

Eseguire dotnet new razorclasslib dalla riga di comando. Ad esempio:

dotnet new razorclasslib -o RazorUIClassLib

Per impostazione predefinita, il Razor modello della libreria di classi (RCL) è Razor lo sviluppo di componenti. Passare l'opzione --support-pages-and-views (dotnet new razorclasslib --support-pages-and-views) per fornire supporto per pagine e visualizzazioni.

Per altre informazioni, vedere dotnet new. Per evitare un conflitto di nomi di file con la libreria di visualizzazione generata, verificare che il nome della libreria non finisca per .Views.

Aggiungere Razor file alla libreria RCL.

I modelli di base ASP.NET presuppongono che il contenuto RCL si trova nella Areas cartella . Vedere layout di pagine RCL di seguito per creare un RCL che espone il contenuto in ~/Pages anziché ~/Areas/Pages.

Contenuto RCL di riferimento

Il riferimento alla libreria di classi Razor può essere eseguito da:

• Pacchetto NuGet. Vedere Creazione di pacchetti NuGet, dotnet add package e Creare e pubblicare un pacchetto NuGet.
• {ProjectName}.csproj. Vedere dotnet-add reference.

Eseguire l'override di visualizzazioni, visualizzazioni parziali e pagine

Quando si trova una visualizzazione, una visualizzazione parziale o Razor una pagina sia nell'app Web che nell'RCL, il Razor markup (.cshtml file) nell'app Web ha la precedenza. Ad esempio, aggiungere WebApp1/Areas/MyFeature/Pages/Page1.cshtml a WebApp1 e Page1 in WebApp1 avrà la precedenza su Page1 nell'RCL.

Nel download di esempio rinominare WebApp1/Areas/MyFeature2 in per WebApp1/Areas/MyFeature testare la precedenza.

Copiare la RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml visualizzazione parziale in WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml. Aggiornare il markup per indicare la nuova posizione. Compilare ed eseguire l'app per verificare quale versione del parziale sia in uso.

Se l'RCL usa Pages, abilitare Razor i Razor servizi e gli endpoint Pages nell'app di hosting:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

Layout pagine RCL

Per fare riferimento al contenuto RCL come se fa parte della cartella dell'app Pages Web, creare il progetto RCL con la struttura di file seguente:

• RazorUIClassLib/Pages
• RazorUIClassLib/Pages/Shared

Si supponga di RazorUIClassLib/Pages/Shared contenere due file parziali: _Header.cshtml e _Footer.cshtml. I <partial> tag possono essere aggiunti al _Layout.cshtml file:

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

Aggiungere il _ViewStart.cshtml file alla cartella del Pages progetto RCL per usare il _Layout.cshtml file dall'app Web host:

@{
    Layout = "_Layout";
}

Creare un RCL con asset statici

Un RCL può richiedere asset statici complementari a cui è possibile fare riferimento tramite RCL o l'app che usa l'RCL. ASP.NET Core consente la creazione di elenchi RCL che includono asset statici disponibili per un'app che usa.

Per includere gli asset complementari come parte di un RCL, creare una wwwroot cartella nella libreria di classi e includere tutti i file necessari in tale cartella.

Durante la compressione di un RCL, tutti gli asset complementari nella wwwroot cartella vengono inclusi automaticamente nel pacchetto.

Usare il dotnet pack comando anziché la versione nuget packdi NuGet.exe .

Aggiungere asset Web client al processo di compilazione

L'integrazione di asset Web client nella pipeline di compilazione non ètrial. Per altre informazioni, vedere Creare asset Web client per la Razor libreria di classi.

Escludere asset statici

Per escludere gli asset statici, aggiungere il percorso di esclusione desiderato al $(DefaultItemExcludes) gruppo di proprietà nel file di progetto. Separare le voci con un punto e virgola (;).

Nell'esempio seguente, il lib.css foglio di stile nella wwwroot cartella non è considerato un asset statico e non è incluso nell'RCL pubblicato:

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

Integrazione di Typescript

Per includere i file TypeScript in un RCL:

1. Fare riferimento al Microsoft.TypeScript.MSBuild pacchetto NuGet nel progetto.

   Nota

   Per indicazioni sull'aggiunta di pacchetti alle app .NET, vedere gli articoli sotto Installare e gestire pacchetti in Flusso di lavoro dell'utilizzo di pacchetti (documentazione di NuGet). Confermare le versioni corrette del pacchetto all'indirizzo NuGet.org.

2. Posizionare i file TypeScript (.ts) all'esterno della wwwroot cartella. Ad esempio, inserire i file in una Client cartella.

3. Configurare l'output della compilazione TypeScript per la wwwroot cartella . Impostare la TypescriptOutDir proprietà all'interno di un PropertyGroup nel file di progetto:

   <TypescriptOutDir>wwwroot</TypescriptOutDir>
   

4. Includere la destinazione TypeScript come dipendenza della PrepareForBuildDependsOn destinazione aggiungendo la destinazione seguente all'interno di un PropertyGroup nel file di progetto:

   <PrepareForBuildDependsOn>
     CompileTypeScript;
     GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
   </PrepareForBuildDependsOn>
   

Utilizzare il contenuto da un RCL a cui si fa riferimento

I file inclusi nella wwwroot cartella dell'RCL vengono esposti all'RCL o all'app che usa con il prefisso _content/{PACKAGE ID}/. Ad esempio, una libreria con un nome di assembly di Razor.Class.Lib e senza un <PackageId> specificato nel file di progetto restituisce un percorso al contenuto statico in _content/Razor.Class.Lib/. Quando si produce un pacchetto NuGet e il nome dell'assembly non corrisponde all'ID pacchetto (<PackageId> nel file di progetto della libreria), usare l'ID pacchetto come specificato nel file di progetto per {PACKAGE ID}.

L'app che usa fa riferimento agli asset statici forniti dalla libreria con <script>, <style><img>, e altri tag HTML. L'app che usa deve avere il supporto per i file statici abilitato in:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

Quando si esegue l'app di utilizzo dall'output di compilazione (dotnet run), gli asset Web statici sono abilitati per impostazione predefinita nell'ambiente di sviluppo. Per supportare gli asset in altri ambienti durante l'esecuzione dall'output di compilazione, chiamare UseStaticWebAssets sul generatore host in Program.cs:

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.UseWebRoot("wwwroot");
builder.WebHost.UseStaticWebAssets();

builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

La chiamata UseStaticWebAssets non è necessaria quando si esegue un'app dall'output pubblicato (dotnet publish).

Flusso di sviluppo multiprogetto

Quando viene eseguita l'app per l'utilizzo:

• Gli asset nell'RCL rimangono nelle cartelle originali. Gli asset non vengono spostati nell'app che usa.
• Qualsiasi modifica all'interno della cartella rcl wwwroot viene riflessa nell'app di utilizzo dopo la ricompilazione della libreria RCL e senza ricompilare l'app che usa.

Quando viene compilato l'RCL, viene generato un manifesto che descrive le posizioni statiche degli asset Web. L'app che usa legge il manifesto in fase di esecuzione per usare gli asset da progetti e pacchetti a cui si fa riferimento. Quando un nuovo asset viene aggiunto a un RCL, l'RCL deve essere ricompilato per aggiornarne il manifesto prima che un'app che utilizza possa accedere al nuovo asset.

Pubblica

Quando l'app viene pubblicata, gli asset complementari di tutti i progetti e i pacchetti a cui si fa riferimento vengono copiati nella wwwroot cartella dell'app pubblicata in _content/{PACKAGE ID}/. Quando si produce un pacchetto NuGet e il nome dell'assembly non corrisponde all'ID pacchetto (<PackageId> nel file di progetto della libreria), usare l'ID pacchetto specificato nel file di progetto per {PACKAGE ID} quando si esamina la wwwroot cartella per gli asset pubblicati.

Risorse aggiuntive

• Visualizzare o scaricare il codice di esempio (procedura per il download)

• Utilizzare i componenti Razor di ASP.NET Core da una libreria di classi Razor (RCL)

• Isolamento CSS di ASP.NET Core Blazor