[ASP.NET MVC] Nouveautés MVC 3 Part 1 - Améliorations dans Visual Studio 2010

Voici la première partie de l'article sur les nouveautés d'ASP.NET MVC 3 écrit conjointement avec Philippe Viallate, MVP et responsable de la rubrique .NET sur Developpez.com.Cette série devrait se composer d'une dizaine de billets. En guise d'introduction, nous allons voir rapidement l'historique du Framework MVC, et aborder une question que certains se posent encore. Quelle est la différence fondamentale entre ASP.NET MVC et ASP.NET Web Forms ?

_{Qu'est-ce qu'ASP .NET MVC}

Le patron de conception Modèle-Vue-Contrôleur (en abrégé MVC) est un patron de conception architectural, qui organise l'interface utilisateur d'une application en trois composants :

• Un modèle (contenant aussi bien des données que des opérations)
• Une vue (responsable de la présentation aux utilisateurs)
• Un contrôleur, dont le rôle est de gérer les événements et la synchronisation entre la Vue et le Modèle

MVC a été mis au point en 1979 par Trygve Reenskaug, qui travaillait alors sur SmallTalk. ASP.NET MVC est donc un Framework de développement d'application web, basé sur ce patron de conception. Le Contrôleur est une classe exposant un certain nombre de fonctions (ou Actions) renvoyant un objet de type ActionResult. Une Action sera toujours le point d'entrée dans ASP.NET MVC, et pourra renvoyer, au choix, une page, des données dans différents formats (binaire, JSON, etc.), voire rien du tout. Les contrôleurs sont stockés dans le répertoire Controllers de l'application Web, et utilisent comme convention de nommage Controller. Dans le cadre d'ASP.NET MVC, une Vue est l'équivalent d'une page web, utilisant la liaison des données pour afficher des informations. Les vues sont par définitions stockées dans le répertoire Views de l'application Web. Toutes les vues qui seront renvoyées par un contrôleur Controller seront stockées dans le répertoire Views/. Enfin, le modèle est un ensemble de classes " standards " dont le but est de gérer un ensemble de données, lesquelles seront ensuite affichées à l'utilisateur. C'est la partie " métier " de l'application, qui va gérer l'accès aux données, la validation, etc.

_{Différences entre Web Forms et MVC}

En termes d'architecture, d'abord, les deux Framework partent de deux patrons d'architectures différents. Si MVC dérive du patron MVC, Web Forms de son coté, est une application du patron de conception contrôleur de page. Le plus gros point différentiateur entre Web Forms et MVC est situé sur la cible initiale de chacun de ces Framework. Historiquement, ASP.NET Web Forms fut développé pour faciliter la migration des développeurs du monde « stateful » du développement d'application Windows au monde « stateless » du Web. Pour parvenir à cela, un certain nombre de mécanismes (ViewState, PostBack, contrôles serveurs, cycle de vie complexe de la page) ont été mis en place, de façon à « cacher » aux développeurs les mécanismes de communication entre le client et le serveur. De l'autre côté, MVC utilise exclusivement du binding pour communiquer entre un contrôleur et une vue, n'a pas de ViewState, et est par essence stateless. Le cycle de vie, en contrepartie, est plus léger, et le découpage des contrôleurs favorise la conception pilotée par le domaine (DDD, ou Domain Driven Design). De plus, MVC a été pensé pour favoriser les tests unitaires à tous les niveaux, et expose de nombreux points d'extension. De nombreux évangélistes ayant débattu du sujet depuis 2009 et ASP.NET MVC 1, on ne reviendra pas sur la meilleure des deux implémentations (quoique les auteurs sont convaincus de la supériorité de MVC sur Web Forms ;) )

_{Améliorations dans Visual Studio 2010}

Les templates des projets Visual Studio 2010 pour la nouvelle version d'ASP.NET MVC incluent désormais les dernières versions de jQuery, et du plugin de validation jQuery. 

Projet ASP.NET MVC 2 Projet ASP.NET MVC 3

Plus précisément nous avons la version 1.4.4 de jQuery et la version 1.7 du plugin de validation jQuery. Comme on peut le constater sur le comparatif MVC 2 / MVC 3 ci-dessus, une nouvelle bibliothèque est présente par défaut dans le template du projet. Il s'agit de la version 1.8.7 de jQuery UI. Cette bibliothèque propose un ensemble de composants pour vos interfaces graphiques et rencontre un certain succès. Pour plus d'informations :  http://jqueryui.com. Mis à part ces ajouts, le template du projet garde la même organisation :

• Le dossier App_Data possède le même rôle que pour les sites ASP.NET Web Forms et permet de stocker physiquement des données ;
• Le dossier Content qui contient en général les fichiers statiques. Il est recommandé d'y ajouter les fichiers tels que les feuilles de style CSS et les images ;
• Le dossier Controllers qui correspond à l'emplacement recommandé pour placer ses contrôleurs ;
• Le dossier Models est utilisé pour les classes qui représentent le modèle de l'application. Il est également recommandé d'y placer le code implémentant l'accès aux données. Bien entendu, ces classes sont souvent positionnées dans une librairie indépendante ;
• Le dossier Scripts pour stocker les fichiers de scripts utilisés par l'application Web ;
• Le dossier Views qui est l'emplacement recommandé pour stocker les Views. Cela comprend les pages .aspx, les UserControls .ascx ainsi que les MasterPages .master.

_{Support de NuGet}

NuGet, anciennement NuPack, est installé avec ASP.NET MVC 3 afin de vous permettre de tirer parti de cet outil et utiliser des librairies ou extensions MVC dans votre projet. Mais qu'est-ce que NuGet ? NuGet est un gestionnaire gratuit de packages open source. Il vous permet facilement de trouver, installer et utiliser toutes sortes de bibliothèques .Net dans vos projets. Il fonctionne avec tous les types de projets .NET y compris bien sûr les projets ASP.NET Web Forms et ASP.NET MVC. Nuget permet aux développeurs qui maintiennent des projets open source comme StructureMap, NUnit, NHibernate ou encore ELMAH, d'emballer ces librairies dans un package et de les publier dans une galerie en ligne afin de les rendre accessibles à tout le monde. L'avantage également est que NuGet est maintenant intégré à Visual Studio 2010, via le NuGet Package Manager ou via ligne de commande. NuGet faisant l'objet d'un article plus détaillé en cours d'écriture nous illustrerons ici simplement comment ajouter un package à son projet. Pour notre exemple, nous rajouterons la librairie de code de Developpez.com. Pour ce faire, un clic droit sur notre projet ASP.NET MVC puis "Add Library Package Reference". Ceci affichera la fenêtre de sélection du NuGet Package Manager comme ci-dessous. 
Après sélection du projet désiré, un simple clic sur install téléchargera et ajoutera une référence à la librairie Developpez à votre projet. Notez qu'une fenêtre console permet de faire la même chose en ligne de commande via PowerShell comme ci-dessous : 
Notez qu'en plus de télécharger et installer automatiquement la librairie, NuGet récupèrera également toutes les dépendances. On peut dire que cela va grandement faciliter la tâche aux développeurs. La liste de package, consultable sur le  site officiel, contient à ce jour 700 packages et continue de grossir.

_{Fenêtre de création de nouveau projet}

Lorsque vous créez un nouveau projet, la boîte de dialogue vous permet désormais de spécifier le moteur d'affichage ainsi que le modèle de projet ASP.NET MVC. Pour le moteur d'affichage nous avons le choix entre le nouveau moteur Razor (qui fera l'objet d'un prochain article) ou le moteur ASPX standard comme on peut le voir ci-dessous : 
Notez qu'avec cette nouvelle version il est également possible de modifier la liste des modèles et des moteurs d'affichage répertoriés dans la boîte de dialogue. Pour ce faire une modification est nécessaire dans la base de registre. Les modèles de projet par défaut sont les suivants :

• Empty : contient un ensemble minimal de fichiers pour un projet ASP.NET MVC, y compris la structure de répertoires par défaut pour les projets ASP.NET MVC, un fichier qui contient une feuille de style Site.css et un répertoire qui contient les fichiers de script par défaut ;
• Internet Application : contient la structure du modèle Empty, ainsi qu'un exemple d'utilisation du Membership Provider en ASP.NET MVC.

_{Fenêtre de création d'une nouvelle vue}

Lorsque vous ajoutez une vue fortement typée, la boîte de dialogue filtre désormais bien plus les types non-applicables que dans les versions précédentes, comme les nombreuses classes de base du Framework .NET. En outre, la liste est maintenant triée par le nom de classe et non par le nom qualifié complet du type, ce qui rend plus facile de trouver types. 

_{Le moteur Razor}

Le moteur Razor est une des plus importante et sympathique nouveauté apportée par ASP.NET MVC 3. Un prochain article en cours de rédaction présentera plus en détails Razor ainsi que sa syntaxe, mais pour résumer rapidement ses avantages :

• Il est compact, expressif et fluide. Il réduit drastiquement le code nécessaire à écrire et en facilite la compréhension ;
• Il est facile à apprendre car nécessite peu de concepts à maîtriser ;
• Ce n'est pas un nième langage. Microsoft a voulu permettre aux développeurs C# et VB.NET de pouvoir construire de l'HTML facilement ;
• Il possède l'Intellisens ;
• Il permet de mettre en place des tests unitaires sans avoir besoin d'un contrôleur ou d'un serveur web.

A noter que Visual Studio 2010 propose désormais l'IntelliSense ainsi que la coloration syntaxique pour Razor comme on peut le voir sur l'image ci-dessous : 

_{Amélioration du scaffolding des vues}

Les templates T4 utilisés pour le scaffolding des vues (échafaudage en français) avec la boîte de dialogue "Ajouter une nouvelle Vue" génèrent maintenant des vues qui utilisent  Html.EditorFor au lieu des helpers tels que  Html.TextBoxFor. Ce changement vous permet éventuellement d'annoter des modèles avec des métadonnées (en utilisant des attributs d'annotation de donnée) afin de mieux personnaliser le rendu de votre interface utilisateur à l'exécution. Lors de l'ajout d'une vue, le scaffolding prend également en charge une meilleure détection ainsi qu'une meilleure utilisation des informations fournies par les clés primaires sur les modèles (y compris le support des conventions de nommage comme ID, ProductID, etc). Par exemple: la boîte de dialogue "Ajouter une nouvelle Vue" utilise cette information pour s'assurer que la valeur de la clé primaire n'est pas échafaudée comme un champ de formulaire éditable, et que les liens entre les vues sont auto-générés correctement avec les informations de la clé primaire. Les templates par défaut pour l'édition et la création incluent maintenant des références aux scripts jQuery nécessaires à la validation. Le scaffolding des formulaires des vues prend désormais en charge la validation côté client par défaut. La validation côté client avec ASP.NET MVC 3 est également réalisée par une approche discrète du JavaScript (unobstrusive JavaScript en anglais), rendant la création de pages plus rapide et propre comme indiqué dans le paragraphe sur le sujet plus bas dans cet article. Même si cela ne fait pas partie de la release d'ASP.NET MVC 3, il est intéressant de souligner la sortie du package NuGet MvcScaffolding écrit conjointement par Steve Sanderson et Scott Hanselman. Ce package vous permettra un gain de productivité si vous souhaitez automatiser les tâches courantes ou un moyen rapide de prendre en main ASP.NET MVC si vous êtes débutant. Pour plus d'informations à ce sujet vous pouvez consulter le billet de Steve Anderson.