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
- 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.
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 pack
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:
Posizionare i file TypeScript (
.ts
) all'esterno dellawwwroot
cartella. Ad esempio, inserire i file in unaClient
cartella.Configurare l'output di compilazione TypeScript per la
wwwroot
cartella . Impostare laTypescriptOutDir
proprietà all'interno di unPropertyGroup
nel file di progetto:<TypescriptOutDir>wwwroot</TypescriptOutDir>
Includere la destinazione TypeScript come dipendenza della
PrepareForBuildDependsOn
destinazione aggiungendo la destinazione seguente all'interno di unPropertyGroup
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
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
- 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.
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 pack
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:
Posizionare i file TypeScript (
.ts
) all'esterno dellawwwroot
cartella. Ad esempio, inserire i file in unaClient
cartella.Configurare l'output di compilazione TypeScript per la
wwwroot
cartella . Impostare laTypescriptOutDir
proprietà all'interno di unPropertyGroup
nel file di progetto:<TypescriptOutDir>wwwroot</TypescriptOutDir>
Includere la destinazione TypeScript come dipendenza della
ResolveCurrentProjectStaticWebAssets
destinazione aggiungendo la destinazione seguente all'interno di unPropertyGroup
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
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
- 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>
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.
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 all'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 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
.
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 condiviseCompilare 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
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.
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 (.cshtml
file) 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 (.cshtml
file) 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
- 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.
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 (.cshtml
file) 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 pack
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 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:
Posizionare i file TypeScript (
.ts
) all'esterno dellawwwroot
cartella. Ad esempio, inserire i file in unaClient
cartella.Configurare l'output della compilazione TypeScript per la
wwwroot
cartella. Impostare laTypescriptOutDir
proprietà all'interno di unPropertyGroup
file di progetto:<TypescriptOutDir>wwwroot</TypescriptOutDir>
Includere la destinazione TypeScript come dipendenza della destinazione aggiungendo la destinazione seguente all'interno di un
PropertyGroup
file diResolveCurrentProjectStaticWebAssets
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.