Aree in ASP.NET Core

Di Dhananjay Kumar e Rick Anderson

Le aree sono una funzionalità di ASP.NET usata per organizzare le funzionalità correlate in un gruppo come separato:

• Spazio dei nomi per il routing.
• Struttura di cartelle per visualizzazioni e Razor pagine.

L'uso di aree crea una gerarchia per lo scopo del routing aggiungendo un altro parametro di route, area, a controller e action o una Razor pagina page.

Le aree consentono di partizionare un'app Web core ASP.NET in gruppi funzionali più piccoli, ognuno con un proprio set di Razor pagine, controller, visualizzazioni e modelli. Un'area è in effetti una struttura all'interno di un'app. In un progetto Web ASP.NET Core i componenti logici come pagine, modello, controller e visualizzazione si trovano in cartelle diverse. Il runtime di ASP.NET Core crea una relazione tra questi componenti usando convenzioni di denominazione. Per un'app di grandi dimensioni può risultare utile suddividere l'app in aree di funzionalità di alto livello distinte. È il caso, ad esempio, di un'app di e-commerce con più business unit, ad esempio per il completamento della transazione, la fatturazione e la ricerca. Ognuna di queste unità ha una propria area per contenere visualizzazioni, controller, Razor pagine e modelli.

In un progetto è consigliabile usare le aree quando:

• L'app è costituita da più componenti funzionali di alto livello che possono rimanere logicamente separati.
• Si vuole suddividere l'app in modo da poter lavorare su ogni area funzionale in modo indipendente.

Se si usano Razor pagine, vedere Aree con Razor pagine in questo documento.

Aree per i controller con visualizzazioni

Una tipica app Web ASP.NET Core che usa aree, controller e visualizzazioni contiene quanto segue:

• Una struttura di cartelle dell'area.

• Controller con l'attributo [Area] per associare il controller all'area:

  [Area("Products")]
  public class ManageController : Controller
  {
  

• Percorso dell'area aggiunto a Program.cs:

  var builder = WebApplication.CreateBuilder(args);
  
  builder.Services.AddControllersWithViews();
  
  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: "MyArea",
      pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");
  
  app.MapControllerRoute(
      name: "default",
      pattern: "{controller=Home}/{action=Index}/{id?}");
  
  app.Run();
  

Struttura di cartelle dell'area

Si consideri un'applicazione che ha due gruppi logici, Prodotti e Servizi. Usando le aree, la struttura delle cartelle sarebbe simile alla seguente:

• Nome progetto
  • Aree
    • Prodotti
      • Controller
        • HomeController.cs
        • ManageController.cs
      • Visualizzazioni
        • Home
          • Index.cshtml
        • Gestire
          • Index.cshtml
          • About.cshtml
    • Servizi
      • Controller
        • HomeController.cs
      • Visualizzazioni
        • Home
          • Index.cshtml

Anche se il layout precedente è tipico quando si usano le aree, per usare questa struttura di cartelle sono necessari solo i file delle visualizzazioni. L'individuazione delle visualizzazioni cercherà un file di visualizzazione area corrispondente in quest'ordine:

/Areas/<Area-Name>/Views/<Controller-Name>/<Action-Name>.cshtml
/Areas/<Area-Name>/Views/Shared/<Action-Name>.cshtml
/Views/Shared/<Action-Name>.cshtml
/Pages/Shared/<Action-Name>.cshtml

Associare il controller a un'area

I controller di area sono designati con l'attributo [Area] :

using Microsoft.AspNetCore.Mvc;
using Microsoft.Docs.Samples;

namespace MVCareas.Areas.Products.Controllers;

[Area("Products")]
public class ManageController : Controller
{
    public IActionResult Index()
    {
        ViewData["routeInfo"] = ControllerContext.MyDisplayRouteInfo();
        return View();
    }

    public IActionResult About()
    {
        ViewData["routeInfo"] = ControllerContext.MyDisplayRouteInfo();
        return View();
    }
}

Aggiungere una route di area

Le route di area usano in genere il routing convenzionale anziché il routing degli attributi. Il routing convenzionale dipende dall'ordinamento. In generale, le route con aree devono essere posizionate prima delle altre nella tabella di route poiché sono più specifiche rispetto alle route senza un'area.

{area:...} può essere usato come token nei modelli di route se lo spazio URL è uniforme in tutte le aree:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();

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: "MyArea",
    pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

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

app.Run();

Nel codice precedente, exists applica il vincolo che la route deve corrispondere a un'area. Uso di {area:...} con MapControllerRoute:

• Meccanismo meno complesso per l'aggiunta del routing alle aree.
• Corrisponde a tutti i controller con l'attributo [Area("Area name")] .

Il codice seguente usa MapAreaControllerRoute per creare due route di area denominate:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();

var app = builder.Build();

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

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

app.UseRouting();

app.UseAuthorization();

app.MapAreaControllerRoute(
    name: "MyAreaProducts",
    areaName: "Products",
    pattern: "Products/{controller=Home}/{action=Index}/{id?}");

app.MapAreaControllerRoute(
    name: "MyAreaServices",
    areaName: "Services",
    pattern: "Services/{controller=Home}/{action=Index}/{id?}");

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

app.Run();

Per altre informazioni, vedere Aree.

Generazione di collegamenti con le aree MVC

Il codice seguente dal download di esempio mostra la generazione di collegamenti con l'area specificata:

<li>Anchor Tag Helper links</li>
<ul>
    <li>
        <a asp-area="Products" asp-controller="Home" asp-action="About">
            Products/Home/About
        </a>
    </li>
    <li>
        <a asp-area="Services" asp-controller="Home" asp-action="About">
            Services About
        </a>
    </li>
    <li>
        <a asp-area="" asp-controller="Home" asp-action="About">
            /Home/About
        </a>
    </li>
</ul>
<li>Html.ActionLink generated links</li>
<ul>
    <li>
        @Html.ActionLink("Product/Manage/About", "About", "Manage",
                                                new { area = "Products" })
    </li>
</ul>
<li>Url.Action generated links</li>
<ul>
    <li>
        <a href='@Url.Action("About", "Manage", new { area = "Products" })'>
            Products/Manage/About
        </a>
    </li>
</ul>

Il download di esempio include una visualizzazione parziale che contiene:

• Collegamenti precedenti.
• I collegamenti simili a quelli precedenti, ad eccezione area del fatto che non sono specificati.

La visualizzazione parziale viene referenziata nel file di layout, in modo che ogni pagina nell'app mostri i collegamenti generati. I collegamenti generati senza specificare l'area sono validi solo quando sono referenziati da una pagina nella stessa area e controller.

Quando l'area o il controller non sono specificati, il routing dipende dai valori di ambiente. I valori di route correnti della richiesta corrente sono considerati valori di ambiente per la generazione del collegamento. In molti casi per l'app di esempio, l'uso dei valori di ambiente genera collegamenti non corretti con il markup che non specifica l'area.

Per altre informazioni, vedere Routing ad azioni del controller.

Layout condiviso per le aree tramite il file _ViewStart.cshtml

Per condividere un layout comune per l'intera app, mantenere il _ViewStart.cshtml nella cartella radice dell'applicazione. Per altre informazioni, vedere Layout in ASP.NET Core

Cartella radice dell'applicazione

La cartella radice dell'applicazione è la cartella contenente il Program.cs file in un'app Web creata con i modelli ASP.NET Core.

_ViewImports.cshtml

/Views/_ViewImports.cshtml, per MVC e /Pages/_ViewImports.cshtml per Razor Pages, non viene importato nelle visualizzazioni nelle aree. Usare uno degli approcci seguenti per fornire le importazioni di visualizzazione a tutte le visualizzazioni:

• Aggiungere _ViewImports.cshtml alla cartella radice dell'applicazione. Un _ViewImports.cshtml nella cartella radice dell'applicazione verrà applicato a tutte le visualizzazioni nell'app.
• Copiare il file _ViewImports.cshtml nella cartella di visualizzazione appropriata nelle aree. Ad esempio, un'app Razor Pages creata con singoli account utente ha un file _ViewImports.cshtml nelle cartelle seguenti:
  • /Areas/Identity/Pages/_ViewImports.cshtml
  • /Pages/_ViewImports.cshtml

Il file _ViewImports.cshtml contiene in genere istruzioni Tag Helpers imports, @using, e @inject . Per altre informazioni, vedere Importazione di direttive condivise.

Modificare la cartella dell'area predefinita in cui sono archiviate le visualizzazioni

Il codice seguente modifica la cartella dell'area predefinita da "Areas" a "MyAreas":

using Microsoft.AspNetCore.Mvc.Razor;

var builder = WebApplication.CreateBuilder(args);

builder.Services.Configure<RazorViewEngineOptions>(options =>
{
    options.AreaViewLocationFormats.Clear();
    options.AreaViewLocationFormats.Add("/MyAreas/{2}/Views/{1}/{0}.cshtml");
    options.AreaViewLocationFormats.Add("/MyAreas/{2}/Views/Shared/{0}.cshtml");
    options.AreaViewLocationFormats.Add("/Views/Shared/{0}.cshtml");
});

builder.Services.AddControllersWithViews();

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: "MyArea",
    pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

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

app.Run();

Aree con Razor pagine

Le aree con Razor Pagine richiedono una Areas/<area name>/Pages cartella nella radice dell'app. La struttura di cartelle seguente viene usata con l'app di esempio:

• Nome progetto
  • Aree
    • Prodotti
      • Pagine
        • _ViewImports
        • Informazioni su
        • Indice
    • Servizi
      • Pagine
        • Gestire
          • Informazioni su
          • Indice

Generazione di collegamenti con Razor pagine e aree

Il codice seguente dal download di esempio mostra la generazione di collegamenti con l'area specificata (ad esempio, asp-area="Products"):

<li>Anchor Tag Helper links</li>
<ul>
    <li>
        <a asp-area="Products" asp-page="/About">
            Products/About
        </a>
    </li>
    <li>
        <a asp-area="Services" asp-page="/Manage/About">
            Services/Manage/About
        </a>
    </li>
    <li>
        <a asp-area="" asp-page="/About">
            /About
        </a>
    </li>
</ul>
<li>Url.Page generated links</li>
<ul>
    <li>
        <a href='@Url.Page("/Manage/About", new { area = "Services" })'>
            Services/Manage/About
        </a>
    </li>
    <li>
        <a href='@Url.Page("/About", new { area = "Products" })'>
            Products/About
        </a>
    </li>
</ul>

Il download di esempio include una visualizzazione parziale che contiene i collegamenti precedenti e gli stessi collegamenti senza specificare l'area. La visualizzazione parziale viene referenziata nel file di layout, in modo che ogni pagina nell'app mostri i collegamenti generati. I collegamenti generati senza specificare l'area sono validi solo in caso di riferimento da una pagina nella stessa area.

Quando l'area non è specificata, il routing dipende dai valori di ambiente. I valori di route correnti della richiesta corrente sono considerati valori di ambiente per la generazione del collegamento. In molti casi per l'app di esempio, l'uso dei valori di ambiente genera collegamenti non corretti. Si considerino, ad esempio, i collegamenti generati dal codice seguente:

<li>
    <a asp-page="/Manage/About">
        Services/Manage/About
    </a>
</li>
<li>
    <a asp-page="/About">
        /About
    </a>
</li>

Per il codice precedente:

• Il collegamento generato da <a asp-page="/Manage/About"> è corretto solo quando l'ultima richiesta riguarda una pagina nell'area Services. Ad esempio, /Services/Manage/, /Services/Manage/Index o /Services/Manage/About.
• Il collegamento generato da <a asp-page="/About"> è corretto solo quando l'ultima richiesta riguarda una pagina in /Home.
• Il codice deriva dal download di esempio.

Importare lo spazio dei nomi e gli helper tag con il file _ViewImports

È possibile aggiungere un file _ViewImports.cshtml a ogni cartella Pagine dell'area per importare lo spazio dei nomi e gli helper tag in ogni Razor pagina della cartella.

Prendere in considerazione l'area Services del codice di esempio, che non contiene un file _ViewImports.cshtml. Il markup seguente mostra la pagina /Services/Manage/AboutRazor :

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RPareas.Areas.Services.Pages.Manage.AboutModel
@{
    ViewData["Title"] = "Srv Mng About";
}

<div>
  ViewData["routeInfo"]:  @ViewData["routeInfo"]
</div>

<a asp-area="Products" asp-page="/Index">
    Products/Index
</a>

Nel markup precedente:

• Il nome completo della classe deve essere usato per specificare il modello (@model RPareas.Areas.Services.Pages.Manage.AboutModel).
• Gli helper tag sono abilitati da @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Nel download di esempio, l'area Products contiene il file _ViewImports.cshtml seguente:

@namespace RPareas.Areas.Products.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Il markup seguente mostra la pagina /Products/AboutRazor :

@page
@model AboutModel
@{
    ViewData["Title"] = "Prod About";
}

Nel file precedente lo spazio dei nomi e la direttiva @addTagHelper vengono importati dal file Areas/Products/Pages/_ViewImports.cshtml.

Per altre informazioni, vedere Gestione dell'ambito dell'helper tag e Importazione delle direttive condivise.

Layout condiviso per Razor le aree pagine

Per condividere un layout comune per l'intera app, spostare _ViewStart.cshtml nella cartella radice dell'applicazione.

Pubblicazione di aree

Tutti i file *.cshtml e i file all'interno della directory wwwroot vengono pubblicati nell'output quando <Project Sdk="Microsoft.NET.Sdk.Web"> è incluso nel file *.csproj.

Aggiungere un'area MVC con Visual Studio

In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e scegliere AGGIUNGI nuovo elemento con scaffolding, quindi selezionare Area MVC.>

Risorse aggiuntive

• Visualizzare o scaricare il codice di esempio (procedura per il download). Il download di esempio fornisce un'app di base per testare le aree.
• MyDisplayRouteInfo e ToCtxString vengono forniti dal pacchetto NuGet Rick.Docs.Samples.RouteInfo. I metodi visualizzano informazioni di route per Controller e Razor Page.