• 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 19/06/2023

Générez automatiquement les couches de votre application MVC

Qu'est-ce que la génération automatique ?

La génération automatique d'ASP.NET a été introduite dans Visual Studio 2013 et reste un élément important de la plateforme de développement .NET Core.

Il s'agit d'un framework de génération de code automatique qui vous permet d'ajouter rapidement du code modélisé qui interagit avec vos modèles de données. Son utilisation pour générer les contrôleurs et vues MVC de vos modèles permet d'accélérer le développement de toutes les opérations de données standard de votre projet, ainsi que des pages HTML/Razor servant à visualiser ces données.

Utilisez la génération automatique avec Entity Framework

Avant de générer automatiquement vos contrôleurs et vos vues, vous devez créer une classe supplémentaire. Elle ne représente pas une entité spécifique de la base de données, mais plutôt un mélange d'éléments provenant de différentes entités. C'est ce qu'on appelle un modèle d'affichage, et vous en avez besoin pour configurer correctement l'affichage de votre liste de films. La liste de films est une collection d'identifiants d'utilisateurs et de films dans la table FilmUtilisateur, et vous devez la rendre lisible et facile à utiliser. C'est là que le modèle d'affichage entre en jeu.

Ajoutez les modèles d'affichage

Ajoutez une nouvelle classe appelée ModeleVueFilm dans le dossier Models. Modifiez ensuite la classe pour ajouter l'identifiant du film, son titre, son année, sa présence ou absence dans la liste de l'utilisateur, son statut de visionnage par l'utilisateur et sa note (le cas échéant).

public class ModeleVueFilm
{
 public int IdFilm { get; set; }
 public string Titre { get; set; }
 public int Annee { get; set; }
 public bool PresentDansListe { get; set; }
 public bool Vu { get; set; }
 public int? Note { get; set; }
}

Générez automatiquement une entité de modèle

Nous allons maintenant générer automatiquement la classe Film. Je vais vous guider dans le screencast ci-dessous. Vous utiliserez souvent cette méthode lors de la création d'applications MVC : veillez à bien comprendre le processus. Vous pouvez également suivre les étapes décrites ci-dessous.

Pour générer automatiquement des contrôleurs et des vues pour une entité de données, cliquez avec le bouton droit sur le dossier Controllers, puis choisissez Ajouter > Nouvel élément généré automatiquement.

Dans l'Explorateur de solutions, cliquez avec le bouton droit de la souris sur le dossier Controllers, puis sélectionnez Ajouter > Nouvel élément généré automatiquement.
Dans l'Explorateur de solutions, clic droit sur Controllers, puis Ajouter > Nouvel élément généré automatiquement.

Vous pouvez choisir parmi de nombreuses options, mais ce qui nous intéresse c'est la génération automatique d'un contrôleur MVC avec vues, utilisant Entity Framework. Sélectionnez cette option, puis cliquez sur le bouton Ajouter

La fenêtre Ajouter un nouvel élément généré automatiquement présente de nombreuses options.
La fenêtre Ajouter un nouvel élément généré automatiquement présente de nombreuses options.

Vous entrez à présent dans les détails du processus de génération automatique. Sélectionnez la classe du modèle à partir de laquelle vous allez générer automatiquement le contrôleur et les vues (il s'agit de la classe Film), puis sélectionnez votre classe du contexte de la base de données (ApplicationDbContext) et définissez le nom du contrôleur (FilmsController). Assurez-vous que les trois cases sont cochées : nous voulons générer des vues, référencer les bibliothèques de scripts telles que jQuery et Bootstrap, et utiliser une page de disposition (dans ce cas, la page de disposition par défaut convient).

Vérifiez que les trois vues sont cochées.
Vérifiez que les trois vues sont cochées.

Une fois le processus terminé, vous verrez apparaître un nouveau fichier FilmsController.cs dans le dossier Controllers et un nouveau dossier Films dans le dossier Views de votre projet.

Le nouveau fichier FilmsController.cs et le nouveau dossier Films
Le nouveau fichier FilmsController.cs et le nouveau dossier Films

Ces ajouts sont déjà fonctionnels, nous les testerons plus tard dans le cours. Pour l'instant, nous devons générer automatiquement d'autres éléments.

Générez automatiquement des composants individuels

Vous avez déjà généré automatiquement un contrôleur complet avec des vues utilisant Entity Framework pour la classe Film. Je vais maintenant vous montrer comment générer automatiquement des éléments à plus petite échelle, par exemple pour ajouter un ou deux éléments, et non un ensemble complet d'opérations CRUD.

Ajoutez un contrôleur Liste de films

Ajoutons un nouveau contrôleur que vous pouvez utiliser pour créer et afficher votre liste de films. Il s'agira d'un code personnalisé et non pas d'un code généré à partir d'un modèle, vous devez donc commencer par créer un contrôleur vide. Pour ce faire, faites un clic droit sur le dossier Controllers, puis choisissez Ajouter > Contrôleur. 

Faites un clic droit sur le dossier Controllers et choisissez Ajouter > Contrôleur.
Faites un clic droit sur le dossier Controllers et choisissez Ajouter > Contrôleur.

La fenêtre suivante est similaire à celle qui présente les options de génération automatique que nous avons vue dans la section précédente, mais comporte moins d'éléments. C'est le premier qui nous intéresse : Contrôleur MVC — Vide

Dans la fenêtre Ajouter un nouvel élément généré automatiquement, choisissez Contrôleur MVC — Vide.
Dans la fenêtre Ajouter un nouvel élément généré automatiquement, choisissez Contrôleur MVC — Vide.

Il est maintenant temps de nommer le nouveau contrôleur. Appelons-le ListeFilmsController.

Nommez le contrôleur.
Nommez le contrôleur.

Ajoutez une vue par défaut

Après avoir ajouté une classe ListeFilmsController vide, vous devez ajouter une vue unique pour afficher la liste de films.

Ajoutez un nouveau sous-dossier dans le dossier Views appelé ListeFilms. Faites un clic droit sur le nouveau dossier ListeFilms et choisissez Ajouter > Vue

Ajoutez le sous-dossier ListeFilms. Faites un clic droit et choisissez Ajouter > Vue.
Ajoutez le sous-dossier ListeFilms. Faites un clic droit et choisissez Ajouter > Vue.

C'est ici que vous pouvez définir les types de vues que vous souhaitez ajouter au projet. Vous savez que la liste de films est une liste qui contient des titres de films et des informations supplémentaires, comme des notes, mais c'est toujours et avant tout une liste d'éléments. Par conséquent, vous devez créer une vue en liste.

Nommez cette nouvelle page Index afin qu'elle s'affiche par défaut chaque fois que le contrôleur ListeFilmsController est appelé. Pour le type de modèle, sélectionnez Liste. Pour la classe de modèle, sélectionnez la classe ModeleVueFilm que vous avez créée précédemment. Ensuite, supprimez tout ce qui est présent dans la liste déroulante Classe du contexte de données. On ne veut pas qu'elle soit liée directement à la base de données, car les données se trouveront dans un modèle de vue et non dans un modèle de données (base de données). Enfin, assurez-vous que la case à cocher Créer en tant que vue partielle n'est pas cochée. En revanche, cochez les cases Bibliothèques de scripts de référence et Utiliser une page de disposition, puis cliquez sur Ajouter.

L'option Ajouter un nouvel élément généré automatiquement
L'option Ajouter un nouvel élément généré automatiquement
L'option Créer en tant que vue partielle n'est pas cochée, mais les options Bibliothèques de scripts de référence et Utiliser une page de disposition le sont.
L'option Créer en tant que vue partielle n'est pas cochée, mais les options Bibliothèques de scripts de référence et Utiliser une page de disposition le sont.

Vous avez maintenant un nouveau contrôleur et une nouvelle vue pour gérer la création et l'affichage de la liste des films d'un utilisateur. Mais aucun des deux n'est fonctionnel pour le moment. Vous devez créer la liste de films, ce qui signifie ajouter du code personnalisé au contrôleur ListeFilmsController.

Modifiez le contrôleur ListeFilmsController

Le contrôleur ListeFilmsController est vide. La seule chose qu'il contient est une méthode appelée Index, qui ouvrira la vue Index.cshtml que vous venez d'ajouter. Pour remplir cette vue avec les données de la liste de films, vous devez ajouter quelques éléments à ce contrôleur.

Récupérez le contexte de la base de données

Tout d'abord, vous devez accéder à la base de données via l'objet de contexte de base de données, ApplicationDbContext. ASP.NET Core utilise l'injection de dépendances pour fournir des instances des objets importants à utiliser dans les contrôleurs. Ainsi, pour avoir accès au contexte de la base de données, vous devez le demander à .NET Core en l'ajoutant comme paramètre dans le constructeur du contrôleur ListeFilmsController.

Vous devrez ajouter quelques déclarations using au début de votre classe ListeFilmsController :

using Microsoft.AspNetCore.Identity;
using Watchlist.Data;
using Watchlist.Models;

Elles permettent d'accéder aux données et aux objets du modèle, ainsi qu'à .NET Core Identity, dont vous aurez besoin pour récupérer les films de l'utilisateur connecté.

Ensuite, pour injecter le contexte de la base de données dans votre contrôleur ListeFilmsController, ajoutez le code suivant au-dessus de la classe ListeFilmsController :

private readonly ApplicationDbContext _contexte;

public ListeFilmsController(ApplicationDbContext contexte)
{
   _contexte = contexte;
}

Dans l'exemple ci-dessus, une variable privée en  readonly  contient une instance du contexte de la base de données pour ce contrôleur. Affectez-le à l'objet de contexte qui est injecté dans le constructeur.

Cela vous permettra de récupérer les films de la liste de l'utilisateur. Vous devez être capable d'identifier l'utilisateur, puisque les films sont associés à son identifiant unique. Par conséquent, vous devez récupérer l'identifiant de l'utilisateur connecté pour obtenir ses films et générer la liste.

Récupérez l'utilisateur connecté

Pour obtenir l'utilisateur connecté, appelez le service UserManager de .NET Identity, qui fournit toutes les méthodes dont vous avez besoin pour obtenir les informations sur l'utilisateur. Pour avoir accès au service UserManager, injectez-le dans le constructeur, comme vous l'avez fait pour le contexte de la base de données.

public class ListeFilmsController : Controller
{
   private readonly ApplicationDbContext _contexte;
   private readonly UserManager<Utilisateur> _gestionnaire;
   
   public ListeFilmsController(ApplicationDbContext contexte,
      UserManager<Utilisateur> gestionnaire)
   {
      _contexte = contexte;
      _gestionnaire= gestionnaire;
   }
}

Le service UserManager étant maintenant disponible, vous pouvez écrire du code pour récupérer les informations de l'utilisateur. Une bonne pratique consiste à ajouter une méthode privée dans le contrôleur qui appelle le service, puis une requête HTTP GET publique pour récupérer l'identifiant de l'utilisateur.

public class ListeFilmsController : Controller
{
   private readonly ApplicationDbContext _contexte;
   private readonly UserManager<Utilisateur> _gestionnaire;
   
   public ListeFilmsController(ApplicationDbContext contexte,
      UserManager<Utilisateur> gestionnaire)
   {
      _contexte = contexte;
      _gestionnaire= gestionnaire;
   } 
   
   private Task<Utilisateur> GetCurrentUserAsync() =>
      _gestionnaire.GetUserAsync(HttpContext.User);
      
   [HttpGet]
   public async Task<string> RecupererIdUtilisateurCourant()
   {
      Utilisateur utilisateur = await GetCurrentUserAsync();
 return utilisateur?.Id;
   }
}

Enfin, vous pouvez appeler votre nouvelle méthode RecupererIdUtilisateurCourant à partir de la méthode Index où vous allez construire le modèle de vue pour la liste de films. Remarquez que la signature de la méthode Index a changé, passant d'une méthode synchrone à une tâche asynchrone. Cette évolution est nécessaire pour appeler les méthodes du service UserManager.

public async Task<IActionResult> Index()
{
   var id = await RecupererIdUtilisateurCourant();
   return View();
}

Créez la liste de films de l'utilisateur

Cela nous a demandé un peu de boulot, mais c'était nécessaire pour créer la liste de films spécifique à l'utilisateur connecté. Dans la méthode Index, insérez le code surligné suivant :

public async Task<IActionResult> Index()
{
   var id = await RecupererIdUtilisateurCourant();
 var filmsUtilisateur = _contexte.FilmsUtilisateur.Where(x => x.IdUtilisateur == id);
   var modele = filmsUtilisateur.Select(x => new ModelVueFilm
   {
      IdFilm = x.IdFilm,
      Titre = x.Film.Titre,
      Annee = x.Film.Annee,
      Vu = x.Vu,
      PresentDansListe = true,
      Note = x.Note
   }).ToList();
   
   return View(modele);
}

Après avoir récupéré l'identifiant de l'utilisateur connecté, une requête LINQ récupère tous les enregistrements FilmUtilisateur de la base de données qui le contiennent. Ensuite, à partir des résultats de cette requête, on sélectionne des éléments spécifiques tels que le titre du film, son année, son statut de visionnage par l'utilisateur et sa note. Ensuite, on construit une liste de nouveaux objets ModeleVueFilm en utilisant ces éléments. Enfin, on transmet cette liste d'objets ModeleVueFilm à la vue via la variable modele. Les données sont alors rendues dans un fichier HTML dynamique.

En résumé

Nous avons couvert beaucoup de choses dans ce chapitre !

  • Vous avez maintenant une application Watchlist dotée d'un modèle de données complet, de contrôleurs qui gèrent vos entités de données et de vues qui affichent vos données.

  • Vous avez appris tout ce qu'il y avait à savoir sur le processus de génération automatique et sur la façon dont il peut être utilisé pour créer des contrôleurs complets avec des vues basées sur une seule classe de modèle, des contrôleurs plus simples (ou vides) sans vues, ou encore des vues distinctes de la génération automatique du contrôleur.

  • Vous avez personnalisé le contrôleur ListeFilmsController pour gérer l'affichage des listes de films de vos utilisateurs.

La partie 2 de notre cours s'est avérée passionnante et riche en informations. Prenez quelques minutes pour répondre au quiz qui lui est consacré. Ensuite, passez à la partie 3.

Exemple de certificat de réussite
Exemple de certificat de réussite