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

  • Articolo

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 classi, vedere Creare asset Web client per la Razor libreria di classi.

Creare una libreria di classi contenente Razor l'interfaccia utente

  • 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 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 libreria di classi è 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).

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:

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.

Pubblicazione

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

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

  • 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 Support pages and views (Pagine e visualizzazioni di supporto) se è necessario supportare le visualizzazioni. Per impostazione predefinita, sono supportate solo Razor le pagine. Seleziona Crea.

Per impostazione predefinita, il Razor modello libreria di classi (RCL) è Razor lo sviluppo di componenti. L'opzione Support pages and views supporta pagine e visualizzazioni.

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:

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 .

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").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();

Nota: .NET 6 richiede solo la chiamata a builder.WebHost.UseWebRoot("wwwroot").UseStaticWebAssets. Per altre informazioni, vedere questo problema in GitHub.

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.

Pubblicazione

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

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.

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

Creare una libreria di classi contenente Razor l'interfaccia utente

  • In Visual Studio selezionare Crea un nuovo progetto.
  • Selezionare Razor Libreria di>classi Avanti.
  • Denominare la libreria (ad esempio, "RazorClassLib"), >Crea>successivo. 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 Framework di destinazione. Controllare ☑ le pagine e le visualizzazioni del supporto per supportare le 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.

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

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.

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 .

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 ResolveCurrentProjectStaticWebAssets destinazione aggiungendo la destinazione seguente all'interno di un PropertyGroup nel file di progetto:

    <ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
  CompileTypeScript;
  $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

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 Startup.Configure:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseStaticFiles();

    ...
}

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:

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

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>();
            });
}

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.

Pubblicazione

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

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.

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

Creare una libreria di classi contenente Razor l'interfaccia utente

  • Dal menu File di Visual Studio selezionare Nuovo>Progetto.
  • Selezionare Applicazione Web ASP.NET Core.
  • Denominare la libreria (ad esempio, "RazorClassLib") >OK. Per evitare un conflitto di nomi di file con la libreria di visualizzazione generata, verificare che il nome della libreria non finisca per .Views.
  • Verificare che sia selezionato ASP.NET Core 2.1 o versioni successive.
  • Selezionare Razor Libreria di classi>OK.

Un RCL ha il file di progetto seguente:

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

    <PropertyGroup>
        <TargetFramework>netcoreapp3.1</TargetFramework>
        <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
    </PropertyGroup>

    <ItemGroup>
        <FrameworkReference Include="Microsoft.AspNetCore.App" />
    </ItemGroup>


</Project>

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

Procedura dettagliata: Creare un progetto RCL e usarlo da un Razor progetto Pages

È possibile scaricare il progetto completo e testarlo anziché crearlo. Il download di esempio contiene codice aggiuntivo e collegamenti che rendono più semplice testare il progetto. È possibile lasciare commenti e suggerimenti in questa discussione su GitHub con i commenti sui download di esempio rispetto alle istruzioni dettagliate.

Testare l'app di download

Se non è stata scaricata l'app completa e si vuole invece creare il progetto della procedura dettagliata, passare alla prossima sezione.

Aprire il file .sln in Visual Studio. Eseguire l'app.

Seguire le istruzioni indicate in Testare WebApp1

Creare un RCL

In questa sezione viene creato un RCL. Razor i file vengono aggiunti alla libreria RCL.

Creare il progetto di libreria di classi Razor:

  • Dal menu File di Visual Studio selezionare Nuovo>Progetto.
  • Selezionare Applicazione Web ASP.NET Core.
  • Assegnare all'app il nome RazorUIClassLib>OK.
  • Verificare che sia selezionato ASP.NET Core 2.1 o versioni successive.
  • Selezionare Razor Libreria di classi>OK.
  • Aggiungere un file di Razor visualizzazione parziale denominato RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml.

Aggiungere Razor file e cartelle al progetto

  • Sostituire il markup in RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml con il codice seguente:

    <h3>_Message.cshtml partial view.</h3>

<p>RazorUIClassLib\Areas\MyFeature\Pages\Shared\_Message.cshtml</p>

  • Sostituire il markup in RazorUIClassLib/Areas/MyFeature/Pages/Page1.cshtml con il codice seguente:

    @page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h2>Hello from a Razor UI class library!</h2>
<p> From  RazorUIClassLib\Areas\MyFeature\Pages\Page1.cshtml</p>

<partial name="_Message" />

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers è necessario per usare la visualizzazione parziale (<partial name="_Message" />). Anziché includere la @addTagHelper direttiva , è possibile aggiungere un _ViewImports.cshtml file. Ad esempio:

    dotnet new viewimports -o RazorUIClassLib/Areas/MyFeature/Pages

    Per altre informazioni su _ViewImports.cshtml, vedere Importazione di direttive condivise

  • Compilare la libreria di classi per verificare che non siano presenti errori del compilatore:

    dotnet build RazorUIClassLib

L'output di compilazione contiene RazorUIClassLib.dll e RazorUIClassLib.Views.dll. RazorUIClassLib.Views.dll contiene il contenuto compilato Razor .

Usare la libreria dell'interfaccia Razor utente da un Razor progetto Pages

Creare l'app Razor Web Pages:

  • Da Esplora soluzioni fare clic con il pulsante destro del mouse sulla soluzione> Aggiungi>nuovo progetto.

  • Selezionare Applicazione Web ASP.NET Core.

  • Denominare l'app WebApp1.

  • Verificare che sia selezionato ASP.NET Core 2.1 o versioni successive.

  • Selezionare Applicazione Web>OK.

  • In Esplora soluzioni fare clic con il pulsante destro del mouse su WebApp1 e selezionare Imposta come progetto di avvio.

  • In Esplora soluzioni fare clic con il pulsante destro del mouse su WebApp1 e selezionare Dipendenze di compilazione>Dipendenze progetto.

  • Selezionare RazorUIClassLib come una dipendenza di WebApp1.

  • In Esplora soluzioni fare clic con il pulsante destro del mouse su WebApp1 e scegliere Aggiungi>Riferimento.

  • Nella finestra di dialogo Gestione riferimenti selezionare RazorUIClassLib>OK.

Eseguire l'app.

Testare WebApp1

Passare a per /MyFeature/Page1 verificare che la libreria di classi dell'interfaccia Razor utente sia in uso.

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.

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>

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.

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

Creare una libreria di classi contenente Razor l'interfaccia utente

  • 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 Support pages and views (Pagine e visualizzazioni di supporto) se è necessario supportare le visualizzazioni. Per impostazione predefinita, sono supportate solo Razor le pagine. 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.

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:

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:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddRazorPages();
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

        endpoints.MapRazorPages();
    });
}

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 .

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 ResolveCurrentProjectStaticWebAssets destinazione aggiungendo la destinazione seguente all'interno di un PropertyGroup nel file di progetto:

    <ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
  CompileTypeScript;
  $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

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 Startup.Configure:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseStaticFiles();

    ...
}

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:

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

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>();
            });
}

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.

Pubblicazione

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