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

Autore: Rick Anderson

Razor le visualizzazioni, le pagine, i controller, i modelli di pagina, Razor i componenti, i componenti di visualizzazione e i 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.

Creare una libreria di classi contenente Razor l'interfaccia utente

Visual Studio

• In Visual Studio selezionare Crea nuovo progetto.
• Selezionare Razor Libreria di> classiAvanti.
• Assegnare alla libreria il nome ,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 Pagine e visualizzazioni di supporto se è necessario supportare le visualizzazioni. Per impostazione predefinita, sono supportate solo Razor le pagine. Selezionare Crea.

Per impostazione predefinita, il Razor modello della libreria di classi (RCL) è Razor lo sviluppo di componenti. L'opzione Pagine e visualizzazioni di supporto supporta pagine e visualizzazioni.

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 ASP.NET Core 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.

Riferimento al contenuto RCL

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 rcl usa Razor Pages, abilitare 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 Web, creare il progetto RCL con la struttura di Pages 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 può fare riferimento l'RCL o l'app che utilizza l'RCL. ASP.NET Core consente la creazione di elenchi di classi di rete 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 packNuGet.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. Posizionare i file TypeScript (.ts) all'esterno della wwwroot cartella. Ad esempio, inserire i file in una Client cartella.

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

   <TypescriptOutDir>wwwroot</TypescriptOutDir>
   

3. 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 sotto il prefisso _content/{PACKAGE ID}/. Ad esempio, una libreria con un nome 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 ad 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 che usa 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 di 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 che usa:

• Gli asset nella libreria 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 compilata la libreria RCL, viene generato un manifesto che descrive le posizioni degli asset Web statici. L'app che usa legge il manifesto in fase di esecuzione per utilizzare 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 aggiornare 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 (come scaricare)

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

• Blazor isolamento CSS ASP.NET Core

Razor le visualizzazioni, le pagine, i controller, i modelli di pagina, Razor i componenti, i componenti di visualizzazione e i 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 (come scaricare)

Creare una libreria di classi contenente Razor l'interfaccia utente

Visual Studio

• In Visual Studio selezionare Crea un nuovo progetto.
• Selezionare Razor Libreria di> classiAvanti.
• Assegnare alla libreria il nome ,ad esempio "RazorClassLib", > Create Next (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. Selezionare Crea.

Per impostazione predefinita, il Razor modello della libreria di classi (RCL) è Razor lo sviluppo di componenti. L'opzione Pagine e visualizzazioni di supporto supporta pagine e visualizzazioni.

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 ASP.NET Core 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.

Riferimento al contenuto RCL

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.

Layout pagine RCL

Per fare riferimento al contenuto RCL come se fa parte della cartella dell'app Web, creare il progetto RCL con la struttura di Pages 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 può fare riferimento l'RCL o l'app che utilizza l'RCL. ASP.NET Core consente la creazione di elenchi di classi di rete 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 packNuGet.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. Posizionare i file TypeScript (.ts) all'esterno della wwwroot cartella. Ad esempio, inserire i file in una Client cartella.

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

   <TypescriptOutDir>wwwroot</TypescriptOutDir>
   

3. 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 sotto il prefisso _content/{PACKAGE ID}/. Ad esempio, una libreria con un nome 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 ad 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 che usa 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 di 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 che usa:

• Gli asset nella libreria 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 compilata la libreria RCL, viene generato un manifesto che descrive le posizioni degli asset Web statici. L'app che usa legge il manifesto in fase di esecuzione per utilizzare 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 aggiornare 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

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

Razor le visualizzazioni, le pagine, i controller, i modelli di pagina, Razor i componenti, i componenti di visualizzazione e i 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 (come scaricare)

Creare una libreria di classi contenente Razor l'interfaccia utente

Visual Studio

• 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> classiOK.

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>

Interfaccia della riga di comando di .NET Core

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

dotnet new razorclasslib -o RazorUIClassLib

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 ASP.NET Core 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.

Riferimento al contenuto RCL

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.

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.

Visual Studio

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

Interfaccia della riga di comando di .NET Core

Da un prompt dei comandi nella cli directory compilare l'app RCL e Web.

dotnet build

Passare alla WebApp1 directory ed eseguire l'app:

dotnet run

Seguire le istruzioni indicate in Testare WebApp1

Creare un RCL

In questa sezione viene creato un RCL. Razor i file vengono aggiunti all'RCL.

Visual Studio

Creare il progetto di libreria di classi Razor:

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

Interfaccia della riga di comando di .NET Core

Eseguire il comando seguente dalla riga di comando:

dotnet new razorclasslib -o RazorUIClassLib
dotnet new page -n _Message -np -o RazorUIClassLib/Areas/MyFeature/Pages/Shared
dotnet new viewstart -o RazorUIClassLib/Areas/MyFeature/Pages

I comandi precedenti:

• Crea l'RCL RazorUIClassLib .
• Crea una Razor pagina di _Message e la aggiunge a RCL. Il parametro -np crea la pagina senza un PageModel.
• Crea un _ViewStart.cshtml file e lo aggiunge all'RCL.

Il _ViewStart.cshtml file è necessario per usare il layout del Razor progetto Pages (che viene aggiunto nella sezione successiva).

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

Visual Studio

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 Web Application>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.

• Controllare RazorUIClassLib come dipendenza da 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.

Interfaccia della riga di comando di .NET Core

Creare un'app Web Pages e un Razor file di soluzione contenente l'app Razor Pages e RCL:

dotnet new webapp -o WebApp1
dotnet new sln
dotnet sln add WebApp1
dotnet sln add RazorUIClassLib
dotnet add WebApp1 reference RazorUIClassLib

Compilare ed eseguire l'app Web:

cd WebApp1
dotnet run

Testare WebApp1

Passare a /MyFeature/Page1 per 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 nell'app Web e nell'RCL, il markup (.cshtmlfile) nell'app Web ha la Razor 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 modo da 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 di 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 RazorUIClassLib/Pages/Shared di 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>

Razorvisualizzazioni, pagine, controller, modelli Razordi pagina, componenti, Visualizza componenti e modelli di dati possono essere incorporati 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 nell'app Web e nell'RCL, il markup (.cshtmlfile) nell'app Web ha la Razor precedenza.

Visualizzare o scaricare codice di esempio (come scaricare)

Creare una libreria di classi contenente Razor l'interfaccia utente

Visual Studio

• In Visual Studio selezionare Crea nuovo progetto.
• Selezionare Razor Libreria> di classisuccessiva.
• Assegnare un nome alla 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 di supporto e visualizzazioni se è necessario supportare le visualizzazioni. Per impostazione predefinita, sono supportate solo Razor pagine. Selezionare Crea.

Il modello della Razor libreria di classi (RCL) è predefinito per Razor lo sviluppo dei componenti per impostazione predefinita. L'opzione Pagine e visualizzazioni del supporto supporta pagine e visualizzazioni.

Interfaccia della riga di comando di .NET Core

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

dotnet new razorclasslib -o RazorUIClassLib

Il modello della Razor libreria di classi (RCL) è predefinito per Razor lo sviluppo dei componenti per impostazione predefinita. 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 RCL.

I modelli di ASP.NET Core 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 nell'app Web e nell'RCL, il markup (.cshtmlfile) nell'app Web ha la Razor 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 modo da 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 RCL usa Razor Pages, abilitare 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 di 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 RazorUIClassLib/Pages/Shared di 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 alla cartella del Pages progetto RCL per usare il _ViewStart.cshtml_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 di creare elenchi di codice 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.

Quando si esegue 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 packNuGet.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 viene considerato un asset statico e non è incluso nell'RCL pubblicato:

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

Integrazione typescript

Per includere i file TypeScript in un RCL:

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

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

   <TypescriptOutDir>wwwroot</TypescriptOutDir>
   

3. Includere la destinazione TypeScript come dipendenza della destinazione aggiungendo la destinazione seguente all'interno di un PropertyGroup file di ResolveCurrentProjectStaticWebAssets progetto:

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

Usare il contenuto da un RCL a cui si fa riferimento

I file inclusi nella wwwroot cartella dell'RCL vengono esposti a RCL o all'app che usa sotto il prefisso _content/{PACKAGE ID}/. Ad esempio, una libreria con un nome di assembly di Razor.Class.Lib e senza un <PackageId> oggetto specificato nel file di progetto comporta un percorso di 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'utilizzo di app fa riferimento agli asset statici forniti dalla libreria con <script>, <style>, <img>e altri tag HTML. L'app che usa deve disporre del supporto di file statici abilitato in Startup.Configure:

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

    app.UseStaticFiles();

    ...
}

Quando si esegue l'app che usa 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 il 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 multi-progetto

Quando viene eseguita l'app che usa:

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

Quando l'RCL viene compilato, viene prodotto un manifesto che descrive le posizioni degli asset Web statici. L'app che usa legge il manifesto in fase di esecuzione per utilizzare 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 usa 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 è uguale all'ID pacchetto (<PackageId> nel file di progetto della libreria), usare l'ID pacchetto come specificato nel file di progetto per {PACKAGE ID} quando si esamina la wwwroot cartella per gli asset pubblicati.

Risorse aggiuntive

• Usare i componenti ASP.NET Core Razor da una libreria di Razor classi (RCL)
• Blazor isolamento CSS ASP.NET Core