Démarrage rapide avec ASP.NET MVC

La conception logicielle moderne utilise souvent des architectures qui séparent les préoccupations, améliorant ainsi la maintenabilité et l'évolutivité. Le modèle Model-View-Controller (MVC) est l'une de ces architectures, particulièrement populaire dans le développement web. ASP.NET MVC applique ce paradigme, organisant une application en trois composants principaux :

Modèles (Models) : Représentent les données de l'application et les règles métier. Ils interagissent avec la base de données et encapsulent la logique de données.
Contrôleurs (Controllers) : Gèrent les requêtes des utilisateurs. Ils interagissent avec les modèles pour traiter les données et sélectionnent la vue appropriée à afficher en réponse.
Vues (Views) : Sont responsables de l'interface utilisateur. Elles affichent les données fournies par le contrôleur.

Cette structure garantit un flux de travail clair pour les requêtes web, comme illustré ci-dessous :

MVC Request Flow

Ce guide propose un parcours pratique pour initier les développeurs à ASP.NET MVC, couvrant les étapes fondamentales de la création d'une application.

Création d'un projet ASP.NET MVC

Pour commencer, lancez Visual Studio et créez un nouveau projet. Sélectionnez le modèle "Application Web ASP.NET (.NET Framework)". Nommez votre projet, par exemple, MonAppMvcDemo. Dans l'étape suivante, choisissez le modèle "MVC" pour préconfigurer votre application avec la structure MVC.

Définition du modèle de données

Le modèle représente les entités de votre application. Dans le dossier Models de votre projet, ajoutez une nouvelle classe C# nommée ClientData.cs. Cette classe servira à stocker les informations sur un client.

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MonAppMvcDemo.Models
{
    public class ClientData
    {
        [Key, Column(Order = 1)]
        public int ClientId { get; set; }
        public string ClientName { get; set; }
        public string EmailAddress { get; set; }
        public bool IsActive { get; set; }
    }
}

Implémentation du contrôleur

Les contrôleurs sont le point d'entrée des requêtes utilisateur. Par défaut, votre projet aura un HomeController. Vous pouvez l'utiliser ou en créer un nouveau. Pour cet exemple, nous allons modifier la méthode Index du HomeController par défaut pour préparer des données à afficher.

using System.Web.Mvc;
using MonAppMvcDemo.Models;

namespace MonAppMvcDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            // Utilisation de ViewBag pour transmettre des données simples
            ViewBag.PageTitle = "Tableau de Bord Client";
            ViewBag.CurrentDate = System.DateTime.Now.ToShortDateString();
            ViewBag.HasAlert = true;

            // Création d'une instance du modèle pour la vue
            ClientData clientRecord = new ClientData
            {
                ClientId = 101,
                ClientName = "Dupont Jean",
                EmailAddress = "jean.dupont@example.com",
                IsActive = true
            };

            // Passage de l'objet modèle à la vue
            return View(clientRecord);
        }
    }
}

Conception de la vue

La vue est l'interface utilisateur qui affichera les données préparées par le contrôleur. Dans le dossier Views/Home, modifiez le fichier Index.cshtml. Ce fichier Razor affichera les données du ViewBag et les propriétés de notre modèle ClientData.

@model MonAppMvcDemo.Models.ClientData


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.PageTitle</title>
</head>
<body>
    <div>
        <h1>Bienvenue sur le @ViewBag.PageTitle</h1>
        <p>Date du jour : <strong>@ViewBag.CurrentDate</strong></p>
        @if (ViewBag.HasAlert)
        {
            <p style="color: red;">Attention : Il y a des notifications importantes !</p>
        }

        <h2>Détails du Client (via le modèle)</h2>
        <div>
            <label>ID Client :</label> @Html.TextBoxFor(m => m.ClientId, new { @readonly = "readonly" })<br />
            <label>Nom Client :</label> @Html.TextBoxFor(m => m.ClientName)<br />
            <label>Email :</label> @Html.TextBoxFor(m => m.EmailAddress)<br />
            <label>Actif :</label> @Html.CheckBoxFor(m => m.IsActive)<br />
        </div>
        <button type="submit">Enregistrer</button>
    </div>
</body>
</html>

Après avoir exécuté l'application (F5), vous devriez voir la page affichant les données du ViewBag et les informations du client transmises par le modèle.

Techniques de base en ASP.NET MVC

Transfert de données entre contrôleur et vue (ViewBag / ViewData)

ViewBag et ViewData sont deux mécanismes pour transmettre des données du contrôleur à la vue. Bien que similaires, ils présentent des différences notables :

ViewBag : Est une propriété dynamique (de type dynamic). Les données sont accessibles directement par leur nom, par exemple ViewBag.MaDonnee. Il ne nécessite pas de transtypage explicite dans la vue, ce qui le rend facile à utiliser pour des données simples.
ViewData : Est un dictionnaire (ViewDataDictionary) qui stocke des paires clé-valeur. Les données sont accessibles via un indexeur, par exemple ViewData["MaDonnee"]. Les données récupérées de ViewData sont de type object et nécessitnet généralement un transtypage explicite pour être utilisées.

Dans l'exemple ci-dessus, nous avons utilisé ViewBag pour transmettre le titre de la page et la date actuelle.

Récupération des données de formulaire dans le contrôleur

Lorsqu'un utilisateur soumet un formulaire, le contrôleur peut récupérer les données de plusieurs manières :

Paramètres d'action : La méthode d'action peut directement recevoir les données du formulaire si les noms des champs correspondent aux noms des paramètres de la méthode ou aux propriétés d'un objet modèle.
FormCollection : Cet objet contient toutes les données soumises par le formulaire sous forme de paires clé-valeur. C'est utile lorsque les données ne correspondent pas directement à un modèle ou pour une gestion plus générique.
Request.Form ou Request.QueryString : Accès direct à la collection de formluaires (pour les requêtes POST) ou aux paramètres de la chaîne de requête (pour les requêtes GET).

Exemple d'utilisation de FormCollection :

using System.Web.Mvc;

namespace MonAppMvcDemo.Controllers
{
    public class RegistrationController : Controller
    {
        [HttpPost]
        public ActionResult SubmitRegistration(FormCollection formData)
        {
            string userName = formData["userNameField"]; // Récupération par nom
            string userEmail = formData["emailAddressField"];

            // Traitement des données...
            ViewBag.Confirmation = $"Inscription de {userName} avec l'email {userEmail} reçue.";
            return View("Confirmation");
        }
    }
}

Types de retour des actions de contrôleur

Une méthode d'action dans un contrôleur doit retourner un objet de type ActionResult ou d'une de ses classes dérivées. Voici les plus courants :

Classe	Description
`ViewResult`	Rend une vue spécifique, potentiellement avec un modèle de données. C'est le type de retour le plus fréquent.
`PartialViewResult`	Rend une vue partielle (sans le layout principal), utile pour les mises à jour AJAX.
`JsonResult`	Retourne des données au format JSON, couramment utilisé pour les APIs ou les appels AJAX.
`ContentResult`	Retourne une chaîne de texte simple avec un type de contenu spécifié.
`RedirectResult`	Effectue une redirection vers une URL spécifiée.
`RedirectToRouteResult`	Effectue une redirection vers une autre action de contrôleur via le système de routage.
`FileResult` (abstrait)	Base pour les résultats qui retournent des fichiers (`FileContentResult`, `FilePathResult`, `FileStreamResult`).
`EmptyResult`	Ne retourne rien.

Exemple d'action GET retournant du contenu dynamique via AJAX :

using System.Web.Mvc;

namespace MonAppMvcDemo.Controllers
{
    public class ApiController : Controller
    {
        [HttpGet]
        public ContentResult GetMessage(string name)
        {
            return Content($"Bonjour, {name} ! Bienvenue sur notre API.");
        }
    }
}

Côté client, vous pourriez appeler cette action avec JavaScript :

$.ajax({
    type: "GET",
    url: "/Api/GetMessage",
    data: { name: "UtilisateurTest" },
    success: function(response) {
        console.log(response); // Affiche "Bonjour, UtilisateurTest ! Bienvenue sur notre API."
        // Ou mettez à jour un élément HTML : $('#messageDisplay').text(response);
    },
    error: function(xhr, status, error) {
        console.error("Erreur lors de l'appel AJAX :", error);
    }
});

Raccourcis Visual Studio essentiels pour MVC

F12 : Accéder à la définition (Go To Definition) d'un symbole (classe, méthode, propriété).
Ctrl + K, Ctrl + C : Commenter les lignes de code sélectionnées.
Ctrl + K, Ctrl + U : Décommenter les lignes de code sélectionnées.
Ctrl + M, Ctrl + O : Réduire toutes les régions de code.
Ctrl + M, Ctrl + L : Développer toutes les régions de code.
F5 : Démarrer le débogage de l'application.
Shift + F5 : Arrêter le débogage.
Alt + glisser-déposer : Sélectionner un bloc de texte rectangulaire.
#region / #endregion : Définir des blocs de code pliables pour une meilleure organisation.

Débogage en ASP.NET MVC

Pour afficher des messages de débogage pendant l'exécution de votre application ASP.NET MVC, utilisez System.Diagnostics.Debug.WriteLine(). Ces messages apparaîtront dans la fenêtre "Sortie" de Visual Studio. Notez que Console.WriteLine() n'affichera pas de sortie dans le contexte d'une application web ASP.NET.

using System.Diagnostics; // N'oubliez pas l'importation

public ActionResult ProcessData()
{
    Debug.WriteLine("Début du traitement de la méthode ProcessData.");
    // ... votre logique ...
    Debug.WriteLine("Fin du traitement de la méthode ProcessData.");
    return View();
}

Étiquettes: ASP.NET MVC C# Visual Studio Modèle-Vue-Contrôleur Développement Web

Publié le 19 juillet à 12h08

L'Atelier Monstre