Introduction à ASP.NET MVC 3

Cet article est une première approche de ASP.NET MVC 3, nous allons ici voir les principales nouveautés apportées et les appliquer ensuite dans un exemple.


Introduction

Pour rappel, MVC (Modèle-Vue-Contrôleur) est un pattern de conception.

• Modèle : le modèle implémente la logique métier
• Vue : la vue correspond à l'interface utilisateur
• Contrôleur : le contrôleur agit comme intermédiaire entre la vue et le modèle

Principales nouveautés

Une série d'améliorations ont été apportées grâce et avec Visual Studio 2010.

• Le template d'un projet ASP.NET MVC 3 inclue maintenant par défaut les dernières versions de JQuery, du plugin de validation JQuery ainsi que JQuery UI (Bibliothèque de composants JQuery http://jqueryui.com/).
• NuGet est maintenant installé avec ASP.NET MVC 3 et permet ainsi d'accéder à une large galerie de bibliothèques.
• Un nouveau moteur de vues RAZOR est maintenant disponible. Pour info, ce nouveau moteur a pour principale avantage de simplifier l'écriture et la lisibilité des vues.

La validation côté client continue à évoluer. La version 3 d'ASP.NET MVC étant compilée avec le Framework .NET 4.0, nous avons accès à toutes les DataAnnotations apparues dans le Framework .NET 3.5.

La gestion des action filters a elle aussi évoluée. Il était possible dans la version précédente d'appliquer des action filters à un contrôleur, il maintenant possible de l'étendre à toute l'application en ajoutant notre filtre à la collection GlobalFilters via le fichier Global.asax.

2 nouveau types d'ActionResult font leur apparition : HttpNotFoundResult et HttpStatusCodeResult.

• HttpNotFoundResult : Permet de rediriger vers une page 404 avec un message personnalisé
• HttpStatusCodeResult : Permet de gérer l'envoi d'une page avec le status code souhaité

Côté JavaScript, le moteur d'exécution nous permet maintenant de supporter l'Unobstrusive Javascript que nous détaillerons plus bas.

La preuve par l'exemple

Commençons par créer un projet de type Application Web ASP.NET MVC 3 en veillant bien à sélectionner le moteur de vue Razor ainsi que le template Internet Application.

Commençons par créer notre model dans le répertoire Models, nous nommerons notre classe CarModel.

using System.ComponentModel.DataAnnotations;

    public class CarModel
    {
        [Required]
        [Display(Name = "Marque")]
        public string Marque { get; set; }

        [Required]
        [Display(Name = "Modèle")]
        public string Modele { get; set; }

        [Required]
        [Display(Name = "Carburant")]
        public string Carburant { get; set; }

        [Required()]
        [Display(Name = "Motorisation")]
        public string Motorisation { get; set; }
    }

    public class Cars
    {
        public Cars()
        {
            CarsList.Add(new CarModel
            {
                Marque = "Volkswagen",
                Modele = "Polo",
                Carburant = "Diesel",
                Motorisation = "1.9 TDI 90"
            });
            CarsList.Add(new CarModel
            {
                Marque = "Volkswagen",
                Modele = "Golf",
                Carburant = "Diesel",
                Motorisation = "1.9 TDI 105"
            });
            CarsList.Add(new CarModel
            {
                Marque = "Volkswagen",
                Modele = "Passat",
                Carburant = "Diesel",
                Motorisation = "2.0 TDI 140"
            });
            CarsList.Add(new CarModel
            {
                Marque = "Volkswagen",
                Modele = "Touran",
                Carburant = "Diesel",
                Motorisation = "2.0 TDI 140"
            });
            CarsList.Add(new CarModel
            {
                Marque = "Volkswagen",
                Modele = "Tiguan",
                Carburant = "Diesel",
                Motorisation = "1.9 TDI 105"
            });
        }

        public List<CarModel> CarsList = new List<CarModel>();
    }

Nous pouvons observer ici l'utilisation des DataAnnotations, pour plus de détails : http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.aspx

Nous allons maintenant afficher notre liste de Cars.
Ajoutez une référence à votre HomeController créé par défaut afin d'accéder à votre CarModel créé juste avant.
Ajoutez ensuite le code suivant dans votre méthode Index:

Cars result = new Cars();
return View(result.CarsList)

Créez une vue en ayant pris soin de supprimer au préalable la vue Index existante

Nous pouvons maintenant afficher nos résultats.

Les résultats sont affichés grâce à un tableau, ce qui peut rendre la lecture de notre vue assez compliquée. Différentes solutions sont disponibles pour simplifier notre code.
Allez dans Références et ajoutez un "Library Package Reference". Effectuez ensuite une recherche pour microsoft-web-helpers et installez le package. NuGet nous permet d'installer la dernières version de ce package en quelques secondes.

Utilisons maintenant le WebGrid fournit par ce package (pour plus d'infos http://msdn.microsoft.com/en-us/library/system.web.helpers.webgrid(v=vs.99).aspx)
Commençons par ajouter les lignes suivantes au fichier de style situé par défaut dans le répertoire Content

/* WebGrid
-----------------------------------------------------------*/
.WebGrid{margin:3px;width:400px;border-collapse:collapse;}

.GridHeader{background-color:Silver;font-weight:bold;}

.WebGrid th, .WebGrid td{border:1px solid black;padding:2px;}

.AlternateGrid{background-color:Gray;}

Modifions maintenant notre vue de la façon suivante:

@model IEnumerable

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
var webGrid = new WebGrid(source: Model, canPage: true, rowsPerPage: 2);
webGrid.Pager(WebGridPagerModes.Numeric);
@webGrid.GetHtml(tableStyle:"WebGrid",
headerStyle:"GridHeader",
alternatingRowStyle:"AlternateGrid",
columns:webGrid.Columns(webGrid.Column("Marque", "Marque", canSort:true),
webGrid.Column("Modele","Modèle",canSort:true),
webGrid.Column("Carburant","Carburant",canSort:true),
webGrid.Column("Motorisation", "Motorisation", canSort: true)));
}

Nous obtenons ainsi une WebGrid avec la gestion de la pagination et du tri en seulement quelques lignes.

------------------------------------------------------------------------

A une prochaine fois dans un autre post! :)