Partie 2, ajouter un contrôleur à une application ASP.NET Core MVC

Par Rick Anderson

Le modèle d’architecture MVC (Model-View-Controller) sépare une application en trois composants principaux : Modèle, Vue et Contrôleur. Le modèle MVC vous permet de créer des applications qui sont plus faciles à tester et à mettre à jour que les applications monolithiques traditionnelles.

Les applications basées sur MVC contiennent :

• Des Modèles : des classes qui représentent les données de l’application. Les classes du modèle utilisent une logique de validation pour appliquer des règles d’entreprise à ces données. En règle générale, les objets du modèle récupèrent et stockent l’état du modèle dans une base de données. Dans ce didacticiel, un modèle Movie récupère les données des films dans une base de données, les fournit à la vue ou les met à jour. Les données mises à jour sont écrites dans une base de données.
• Vues : les vues sont les composants qui affichent l’interface utilisateur de l’application. En règle générale, cette interface utilisateur affiche les données du modèle.
• Contrôleurs : Classes qui :
  • Gèrent les demandes de navigateur.
  • Récupèrent les données du modèle.
  • Appellent les modèles d’affichage qui retournent une réponse.

Dans une application MVC, la vue affiche uniquement des informations. Le contrôleur gère et répond à l’entrée et à l’interaction utilisateur. Par exemple, le contrôleur gère les valeurs des données de routage et des chaînes de requête, et passe ces valeurs au modèle. Le modèle peut utiliser ces valeurs pour interroger la base de données. Par exemple :

• https://localhost:5001/Home/Privacy : spécifie le contrôleur Home et l’action Privacy.
• https://localhost:5001/Movies/Edit/5 : est une requête de modification du film avec ID=5 à l’aide du contrôleur Movies et de l’action Edit, qui sont détaillées plus loin dans le tutoriel.

Les données d’itinéraire sont expliquées plus loin dans le didacticiel.

Le modèle d’architecture MVC sépare une application en trois groupes de composants principaux : les modèles, les vues et les contrôleurs. Ce modèle permet de séparer les problèmes : La logique d’interface utilisateur appartient à la vue. La logique d’entrée appartient au contrôleur. La logique métier appartient au modèle. Cette séparation vous aide à gérer la complexité quand vous créez une application, car elle vous permet de travailler sur un aspect de l’implémentation à la fois, sans impacter le code d’un autre aspect. Par exemple, vous pouvez travailler sur le code des vues de façon indépendante du code de la logique métier.

Ces concepts sont présentés et démontrés dans cette série de tutoriels lors de la création d’une application de film. Le projet MVC contient des dossiers pour les contrôleurs et pour les vues.

Ajout d'un contrôleur

Visual Studio

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur Contrôleurs > Ajouter > Contrôleur.

Dans la boîte de dialogue Ajouter un nouvel élément généré automatiquement, sélectionnez Contrôleur MVC - Vide>Ajouter.

Dans la boîte de dialogue Ajouter un nouvel élément - MvcMovie, entrez HelloWorldController.cs et sélectionnez Ajouter.

Visual Studio Code

Sélectionnez l’icône EXPLORATEUR et cliquez en maintenant enfoncée la touche Ctrl (ou faites un clic droit) sur Contrôleurs > Nouveau fichier et nommez le nouveau fichierHelloWorldController.cs.

Remplacez le contenu de Controllers/HelloWorldController.cs par le code suivant :

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    // 
    // GET: /HelloWorld/
    public string Index()
    {
        return "This is my default action...";
    }
    // 
    // GET: /HelloWorld/Welcome/ 
    public string Welcome()
    {
        return "This is the Welcome action method...";
    }
}

Chaque méthode public d’un contrôleur peut être appelée en tant que point de terminaison HTTP. Dans l’exemple ci-dessus, les deux méthodes retournent une chaîne. Notez les commentaires qui précèdent chaque méthode.

Un point de terminaison HTTP :

• URL pouvant être ciblée dans l’application web, telle que https://localhost:5001/HelloWorld.
• Combine :
  • Protocole utilisé : HTTPS.
  • Emplacement réseau du serveur web, y compris le port TCP : localhost:5001.
  • URI cible : HelloWorld.

Le premier commentaire indique qu’il s’agit d’une méthode HTTP GET qui est appelée en ajoutant /HelloWorld/ à l’URL de base.

Le deuxième commentaire indique une méthode HTTP GET qui est appelée en ajoutant /HelloWorld/Welcome/ à l’URL. Plus loin dans ce tutoriel, le moteur de génération de modèles automatique est utilisé pour générer des méthodes HTTP POST qui mettent à jour des données.

Exécutez l’application sans le débogueur en appuyant sur Ctrl+F5 (Windows) ou ⌘+F5 (macOS).

Ajoutez /HelloWorld au chemin dans la barre d’adresse. La méthode Index retourne une chaîne.

MVC appelle les classes du contrôleur et les méthodes d’action au sein de celles-ci en fonction de l’URL entrante. La logique de routage d’URL par défaut utilisée par le modèle MVC utilise un format comme celui-ci pour déterminer le code à appeler :

/[Controller]/[ActionName]/[Parameters]

Le format de routage est défini dans le fichier Program.cs.

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

Quand vous naviguez jusqu’à l’application et que vous ne fournissez aucun segment d’URL, sa valeur par défaut est le contrôleur « Home » et la méthode « Index » spécifiée dans la ligne du modèle mise en surbrillance ci-dessus. Dans les segments d’URL précédents :

• Le premier segment d’URL détermine la classe du contrôleur à exécuter. localhost:5001/HelloWorld mappe donc à la classe de contrôleur HelloWorld.
• La seconde partie du segment d’URL détermine la méthode d’action sur la classe. Ainsi, localhost:5001/HelloWorld/Index provoque l’exécution de la méthode Index de la classe HelloWorldController. Notez que vous n’avez eu qu’à accéder à localhost:5001/HelloWorld pour que la méthode Index soit appelée par défaut. Index est la méthode par défaut qui est appelée sur un contrôleur si un nom de méthode n’est pas explicitement spécifié.
• La troisième partie du segment d’URL (id) concerne les données de routage. Les données d’itinéraire sont expliquées plus loin dans le didacticiel.

Accédez à : https://localhost:{PORT}/HelloWorld/Welcome. Remplacez {PORT} par votre numéro de port.

La méthode Welcome s’exécute et retourne la chaîne This is the Welcome action method.... Pour cette URL, le contrôleur est HelloWorld, et Welcome est la méthode d’action. Vous n’avez pas encore utilisé la partie [Parameters] de l’URL.

Modifiez le code pour passer des informations sur les paramètres de l’URL au contrôleur. Par exemple : /HelloWorld/Welcome?name=Rick&numtimes=4.

Modifiez la méthode Welcome en y incluant les deux paramètres, comme indiqué dans le code suivant.

// GET: /HelloWorld/Welcome/ 
// Requires using System.Text.Encodings.Web;
public string Welcome(string name, int numTimes = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, NumTimes is: {numTimes}");
}

Le code précédent :

• Utilise la fonctionnalité de paramètre facultatif de C# pour indiquer que le paramètre numTimes a 1 comme valeur par défaut si aucune valeur n’est passée pour ce paramètre.
• Utilise HtmlEncoder.Default.Encode pour protéger l’application contre les entrées malveillantes, par exemple via JavaScript.
• Utilise des chaînes interpolées dans $"Hello {name}, NumTimes is: {numTimes}".

Exécutez l’application et accédez à : https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4. Remplacez {PORT} par votre numéro de port.

Essayez différentes valeurs pour name et numtimes dans l’URL. Le système de liaison de données MVC mappe automatiquement les paramètres nommés provenant de la chaîne de requête aux paramètres de la méthode. Pour plus d’informations, consultez Liaison de données.

Dans l’image précédente :

• Le segment Parameters d’URL n’est pas utilisé.
• Les paramètres name et numTimes sont transmis dans la chaîne de requête.
• Le ? (point d’interrogation) dans l’URL ci-dessus est un séparateur, qui est suivi d’une chaîne de requête.
• Le caractère & sépare les paires champ-valeur.

Remplacez la méthode Welcome par le code suivant :

public string Welcome(string name, int ID = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, ID: {ID}");
}

Exécutez l’application et entrez l’URL suivante : https://localhost:{PORT}/HelloWorld/Welcome/3?name=Rick

Dans l’URL précédente :

• Le troisième segment de l’URL correspondait au paramètre de routage id.
• La méthode Welcome contient un paramètre id qui correspondait au modèle d’URL de la méthode MapControllerRoute.
• Le ? de fin démarre la chaîne de requête.

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

Dans l’exemple précédent :

• Le troisième segment de l’URL correspondait au paramètre de routage id.
• La méthode Welcome contient un paramètre id qui correspondait au modèle d’URL de la méthode MapControllerRoute.
• Le ? de fin (dans id?) indique que le paramètre id est facultatif.

Précédent : Bien démarrerSuivant : Ajouter une vue