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). L'RCL può essere impacchettato e riutilizzato. Le applicazioni possono includere la Razor Class Library (RCL) e sovrascrivere le visualizzazioni e le 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 classi, vedere Creare asset Web client per la libreria di classiRazor.

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"), >Crea. 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 Pagine e visualizzazioni di supporto se è necessario che la raccolta contenga pagine e/o visualizzazioni. Per impostazione predefinita, sono supportati solo i componenti Razor. Fare clic su Crea.

Il modello libreria di classi Razor si imposta di default per lo sviluppo di componenti Razor. 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

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

dotnet new razorclasslib -o RazorUIClassLib

Il modello libreria di classi Razor si imposta di default per lo sviluppo di componenti Razor. 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

È possibile fare riferimento all'RCL da:

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

Sovrascrivere viste, viste 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, rinomina WebApp1/Areas/MyFeature2 in WebApp1/Areas/MyFeature per 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 che la versione parziale dell'app sia in uso.

Se l'RCL utilizza Razor Pages, abilita i servizi di Razor Pages e gli endpoint 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 file _ViewStart.cshtml alla cartella del progetto RCL Pages per usare il file _Layout.cshtml dall'app Web host:

@{
    Layout = "_Layout";
}

Creare un RCL con asset statici

Un RCL può richiedere asset statici di accompagnamento a cui è possibile fare riferimento da RCL o dall'app che utilizza 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 del client al processo di compilazione

L'integrazione delle risorse Web del cliente nella pipeline di compilazione non è semplice. Per ulteriori informazioni, vedere Creare asset Web client per la Razor Libreria di Classi.

Escludere gli 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:

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

  Note

  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.

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

• Aggiungere il markup seguente al file di progetto:

  • Configurare l'output della compilazione TypeScript per la cartella wwwroot con la proprietà TypescriptOutDir.
  • Includere l'obiettivo TypeScript come dipendenza dell'obiettivo PrepareForBuildDependsOn.
  • Rimuovere l'output nel wwwroot folder.

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    // Markup removed for brevity.
    <TypescriptOutDir>wwwroot</TypescriptOutDir>
    <PrepareForBuildDependsOn>
      CompileTypeScriptWithTSConfig;
      GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
    </PrepareForBuildDependsOn>
  </PropertyGroup>

  <ItemGroup>
    <Content Remove="wwwroot\{path-to-typescript-outputs}" />
  </ItemGroup>

</Project>

Utilizzare il contenuto di un RCL di riferimento

I file inclusi nella wwwroot cartella dell'RCL vengono esposti all'RCL o all'app che la utilizza 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'applicazione consumatrice fa riferimento agli asset statici forniti dalla libreria con <script>, <style>, <img>, e altri tag HTML. L'applicazione utilizzatrice 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 l'app di consumo viene eseguita:

• Gli asset nell'RCL rimangono nelle cartelle originali. Gli asset non vengono spostati nell'applicazione consumante.
• Qualsiasi modifica all'interno della cartella RCL wwwroot viene riflessa nell'app di consumo dopo la ricostruzione della RCL senza ricostruire l'app che la utilizza.

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 lo utilizza possa accedere al nuovo asset.

Publish

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