Blog de Hinault Romaric (.NET Core, ASP.NET Core, Azure, DevOps)

L’architecture MVC sur laquelle reposent les projets ASP.NET MVC offre une disposition par défaut aux fichiers du projet. Ainsi, tous les contrôleurs de l’application sont créés par défaut dans un dossier Contrôleur, les vues dans un dossier Views et le modèle dans le dossier correspondant.

Cette représentation, bien qu’assez pratique, peut cependant devenir pénible à maintenir ou à identifier les contrôleurs/vues pour un projet volumineux qui dispose d’un nombre important de fichiers (contrôleurs, vues et modèles).

De ce fait, il serait plus judicieux d’être en mesure de découper son projet en module, et disposer pour chaque module un emplacement pour ses contrôleurs et ses vues.

1 - Pourquoi utiliser les ares ?

Supposons que nous voulons mettre en place une application Web pour une entreprise qui dispose d’un garage de réparation de véhicules et d’un magasin pour la vente des pièces d’auto.

Suite à l’analyse et au découpage, nous avons identifié trois principaux modules pour l’application : administration, vente et réparation, qui sont quasiment indépendants. Pour avoir une meilleure organisation de nos fichiers et mieux séparer les grandes fonctionnalités de notre application, nous avons décidé que pour chaque module, nous aurons dans un dossier racine les contrôleurs, le modèle et les vues correspondantes :

2 – Mise en place des Areas dans un projet ASP.NET Core

Pour mettre cela en œuvre, ASP.NET MVC nous offre les Areas, qui ont été introduits dans le framework depuis la version 2, et qui ont été améliorés avec ASP.NET Core.

Avec les Areas, nous pouvons mettre en place nos différents modules dans notre projet ASP.NET Core, chacun ayant son modèle, ses contrôleurs et ses vues regroupés au même emplacement.

La mise en oeuvre des Areas dans un projet ASP.NET MVC fait intervenir un nouveau paramètre « area », en plus des paramètres de routage traditionnels « controller » et « action ».

La première chose à faire sera donc de modifier la définition de la table de routage de votre application pour introduire le paramètre « area ». Pour le faire, vous devez éditer le fichier Startup.cs et remplacer le code suivant dans la méthode Configure

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });

Par

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
app.UseMvc(routes =>
{
  routes.MapRoute(name: "areaRoute",
    template: "{area:exists}/{controller=Home}/{action=Index}");
 
  routes.MapRoute(
      name: "default",
      template: "{controller=Home}/{action=Index}");
});

Je tiens à souligner que nous utilisons ici le routage par convention.

Avec cette table de routage, désormais, lorsque le framework ASP.NET MVC va essayer d’afficher une vue dans un Area, il va rechercher cette dernière dans les emplacements suivants :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
/Areas/<Area-Name>/Views/<Controller-Name>/<Action-Name>.cshtml
/Areas/<Area-Name>/Views/Shared/<Action-Name>.cshtml
/Views/Shared/<Action-Name>.cshtml

De ce fait, vous devez créer un dossier Areas dans votre projet et créer ensuite dans ce dernier vous différents Areas (Admin, Vente, Reparation) :

Comme vous pouvez le constater, pour chaque Area, nous avons nos contrôleurs, nos vues et notre modèle. Nous pouvons réutiliser le même nom pour nos contrôleurs. Toutefois, pour chaque contrôleur, nous devons le décorer avec l’attribut [Area] :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
namespace AreasApp.Areas.Admin.Controllers
{
 
    [Area("Admin")]
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
 
 
    }
}

Il est important que chaque Area ait son propre namespace et que les contrôleurs soient décorés avec l’attribut Area.

3 – Prise en compte des Areas dans la génération des liens

Si vous exécutez votre application et que vous saisissez dans le navigateur le lien suivant :
http://votreapplication/admin/ la méthode d’action Index du contrôleur HomeController dans l’area Admin sera appelée.

Pour définir les liens vers vos pages, vous devez procéder différemment dans les deux cas suivant : le lien redirige vers une vue qui est dans le même Area que la vue qui est affichée ou le lien redirige vers une vue qui est dans un autre Area.

Dans le cas où le lien redirige vers une vue du même Area, vous n’avez pas besoin de renseigner le nom de l’area dans la définition :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a asp-controller="Home" asp-action="Index">Index Admin</a>

Pour le cas où le lien doit rediriger vers une vue dans un autre Area, vous devez ajouter l’attribut « asp-area » avec le nom de l’area dans la définition du lien.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a asp-area="admin" asp-controller="Home" asp-action="Index">Index Admin</a>

Les Areas offrent de nombreux avantages, dont une meilleure organisation de son site web, le regroupement des fichiers en fonction des grands modules de l’application et la possibilité de réutiliser le même nom pour les contrôleurs. Toutefois, pour un petit site, il n’est pas nécessaire de recourir à cela.