ASP.NET MVC2 - Votre première application

suite de mon premier article :

ASP.NET MVC2 - Introduction

ASP.NET MVC2 - Votre première application

ASP.NET MVC2 - Le modèle et la vue fortement liée

Pré-requis :

Pour pouvoir utiliser ASP.NET MVC2, vous devez au moins utiliser les systèmes d’exploitation suivants :

- Window Xp, Vista, 7, server 2003, server 2008.

Pour ce qui est de l’IDE :

- Visual studio 2008 (avec SP1) peu importe l’édition, Visual Studio 2010 (peu importe l’édition), Visual Web Developper 2008 Express (attention, avec cette version, vous n’aurez pas accès aux projets de test unitaire compris dans Visual Studio 2008).

Attention : Il n’est pas possible de construire des applications ASP.NET MVC avec Visual Studio 2005.

Si vous n’avez jamais installé de framework ASP.NET MVC sur votre machine, il suffit simplement de le télécharger ici : http://www.asp.net/mvc/.

NB : Par contre si vous utilisez comme moi Visual Studio 2010 RC1, la version fournie est ASP.NET MVC 2 RC1, pour installer la dernière version c’est à dire ASP.NET MVC 2, vous devez tout d’abord désinstaller la version ASP.NET MVC 2 installée sur votre système et ensuite installer la dernière version téléchargée. Source de mon information : http://haacked.com/archive/2010/02/10/installing-asp-net-mvc-2-rc-2-on-visual-studio.aspx

Pour ma part, ma configuration dans cette série sera Visual Studio 2010 CTP avec la dernière version d’ASP.NET MVC 2 RTM.
Concernant la base de données, j’utiliserai Sql Server 2008 Express edition que vous pouvez télécharger via ce lien : http://www.microsoft.com/express/database/.

Maintenant que vous êtes en possession de tous les outils requis, je vous invite donc à créer une première application MVC.
Pour cela, File > New > Project

Cliquez sur ok, nous avons alors une boîte de dialogue qui apparaît afin de savoir si nous voulons y accoler un projet de test.

Nous cliquerons sur « No, do not create a unit test project ». Nous reviendrons sur cette partie plus tard.

Vous voilà en face d’une nouvelle application MVC. Si vous naviguez dans le solution explorer de ce projet, vous remarquerez qu’il n’est pas vide.

Pressez CTRL+F5 afin de lancer l’application.

Si vous arrivez à cet écran, c’est que tout se passe bien et que votre installation s’est bien déroulée. En cas de problème, n’hésitez-pas à laisser un commentaire, je me ferai un plaisir de vous aider.

Fermez votre navigateur et assurez-vous que le débuggeur soit bien stoppé.

Retournons dans le “solution explorer” et supprimons les fichiers qui ne nous intéressent pas. En effet, ASP.NET MVC crée pour nous une application prête à l’emploi.

Nous aurions pu, au lieu de créer une ASP.NET MVC2 application, prendre le template vide que nous fournit Visual Studio mais je voulais m’assurer du bon fonctionnement de votre configuration.

Nettoyez les fichiers tels que montrez dans l’image ci-dessous :

Rendez-vous dans le Controller HomeController. Il sera votre controller par défaut, si je puis dire, et nous verrons plus tard pourquoi. Supprimer les classes construites à l’intérieur de celui-ci et créez une méthode qui renvoie un string.

Lancez l’application et vous devriez avoir le résultat suivant :

Wow, vous venez de créer votre première application ASP.NET MVC ! Félicitation, ce fût dur n’est-ce pas ?

Trêve de plaisanterie, que s’est t’il passé lors du lancement d’application :

Nous avons lancé l’application, celle-ci à envoyé une requête http de type GET, cette requête a, apparemment, été interceptée par notre HomeController etla méthode que nous avons écrite a été exécutée.

À l’aide de l’outil FireBug de Firefox, analysons les requêtes http, voici ce que nous dit FireBug concernant la requête envoyée :

Et voici ce que nous avons eu en retour :

Un string « Welcome to a my First MVC Application ». Vous noterez au passage la faute de frappe, j’aurais dû écrire « Welcome to my First MVC Application », je vous laisse corriger cette erreur.

Maintenant, regardons le code source de cette page, nous voyons que ce n’est pas du html mais un simple string renvoyé par le controller. Suis-je donc entièrement maître de ce que j’envoie comme réponse au client ? La réponse est oui.

En MVC, le controller est responsable d’intercepter les requêtes rentrantes. Dans ASP.NET MVC, le controller est une simple classe C# qui dérive de System.Web.MVC.Controller. Chaque méthode “public” d’un controller est appelé une action. Cette action pourra être atteindre par le web via l’URL.

Récapitulons, vous avez un controller HomeController et une méthode d’action Index. Comment l’application fait-elle le lien entre cette action et votre url. En effet, lorsque vous lancez l’application, l’url est « / ». En fait, Si vous vous rendez dans le global.asax, vous verrez ceci :

En fait, au commencement de l’application (Application_Start()), l’application charge toutes routes définies dans la méthode RegisterRoutes().

Dans celle-ci nous avons une route par défaut.

Si nous regardons cette route pas « Default », en dernier lieu, un objet anonyme qui donne en paramètre, le controller Home, l’action Index et un string vide en id. C’est cette ligne qui crée notre route par défaut.

L’action Index compris dans le controller Home sera donc exécuté lorsque l’url aura les valeurs suivantes :
/
/Home/
/Home/Index

L’action Index étant l’action par défaut lorsque rien n’est renseigné après le nom du Controller dans l’url.

Par défaut également, si vous créez un controller nommer ProductControlller, automatiquement, sa route sera /Product et non /ProductController. Nous parlerons plus en détails de ce comportement au moment opportun.

Renvoyer de simples string n’étant pas très utile, nous allons maintenant tenter d’envoyer du beau html.

Créer et afficher une vue :

Pour cela retournons dans notre solution explorer et supprimons le fichier Index et About qui se trouve sous le répertoire Home.

Ensuite retournons dans notre controller et modifions l’action Index comme ci-dessous :

Action result est une classe abstraite, vous ne pourrez donc par retourner un new ActionResult. Vous devrez retourner un type qui dérive d’ActionResult, nous utilisons la méthode View qui retourne un ViewResult. Il existe plusieurs classes dérivant d’ActionResult, nous verrons cela prochainement.

Que fait cette méthode View() ? On sait qu’elle retourne un ViewResult mais ou va-t-il chercher sa vue ? Pour le savoir et à condition que vous ayez bien supprimé les fichiers About et Index en dessous de répertoire Home. Vous devriez avoir le comportement suivant :

En effet, il ne trouve aucune vue se nommant Index dans le répertoire HOME de votre solution. Ce qui est normal, nous les avons supprimés.
Les vues sont associées avec une action par une convention. Lorsque le framework veut trouver une vue par défaut pour l’action index du controller HomeController, vous voyez sur l’image ci-dessus les endroits dans lesquelles le Framework cherche cette fameuse vue.

Pour créer une vue depuis votre controller, faites bouton-droit sur le nom de l’action, comme ci-dessous :

Vous avez alors la boîte de dialogue suivante :

Vous voyez que par défaut le nom de votre vue est Index, si vous changez celui-ci et laissez la méthode View() telle quelle, cette vue ne sera par trouvée. Elle ne respectera pas la convention utilisée par le framework. Vous devrez alors fournir des paramètres à la méthode View(), ce que nous verrons plus tard.

Vous remarquez également que ce dialogue nous permet de choisir si nous voulons utiliser une master page ou pas. Nous allons utiliser la master page par défaut et ajouter cette vue à notre application en appuyant sur le bouton Add.

Une page aspx s’ouvre alors, vous pouvez maintenant la remplir de HTML comme bon vous semble.

Un exemple :

CTRL+F5 pour lancer l’application et voici le résultat :

En premier lieu, on voit bien que le MasterPage a été chargé. Ce qui est normal vu que l’attribut MasterPageFile de notre Page renseigne bien notre MasterPage.

Analysons maintenant la réponse qui a été envoyée à notre client par la suite de notre méthode GET.

En réponse nous voyons bien, que la réponse est maintenant une page html et non plus un simple string :

Vous pourriez tout aussi bien retirer le lien vers le masterpage en supprimant en entier l’attribut MasterPageFile= « votre lient ». Attention dans ce cas, vous devez supprimer toutes les balises <asp :content> et  recréer une page html en entier avec son head, son body,…
Voici notre nouvelle vue sans master page :

Et le résultat :

Le mécanisme des masterpages n’est pas une nouveauté en ASP.NET MVC mais on voit qu’il continue à fonctionner. À noter que le masterpage n’a pas de code-behind. Il est juste ce qu’il doit être, un squelette pour notre application. Nous y reviendrons plus tard et nous allons réutilisez cette vue (maintenant sans masterpage) afin d’afficher un contenu dynamique.

Modifions l’action comme tel :

Et notre vue de la manière suivante :

Et vous obtenez le résultat suivant :

Que s’est-il passé lors cette exécution ?

Le navigateur a envoyé une requête GET afin d’atteindre l’action lié à l’url « / », par l’entremise des Routes, cette méthode est envoyée vers l’action Index de l’objet HomeController. Cette index est interprété et retourne sa vue par défaut. Cette action Index passe des données à sa vue par l’intermédiaire de l’objet ViewData. Ces données sont interprétées par la vue à l’aide de la commande en ligne <%=ViewData["message"] %>. Cette vue maintenant interprétée est renvoyée au client par l’intermédiaire d’une requête HTTP de type réponse. Pour finir, votre navigateur affiche le résultat de cette requête.

Cette explication ne rentre bien évidemment pas, pour le moment, dans les détails. Nous nous y attarderons plus en profondeur bientôt.

En conclusion :

Vous venez donc de créer votre première application ASP.NET MVC2 ! Vous avez ajouté un peu de logique à votre action afin rendre le tout plus dynamique. Vous avez remarqué lors de cet exercice que l’objet ViewData permet de passer des valeurs à la vue et que grâce au commande en ligne d’ASP.NET et ces célèbres balises <% %>, vous avez affiché dans votre vue, des données se trouvant dans votre controller.

Avant ce dernier exercice, vous avez appris la notion de vue et celle de Controller, vous avez approché la notion des routes et la notion de requête http qui transite depuis votre navigateur jusqu’au server Web et vice-versa.

Nous arrivons donc à la fin de cette article, vous aurez certainement remarquez que nous n’avons pas parlé du M de MVC, le modèle. Nous approcherons ce principe plus en détail dans notre prochain article. Dans celui-ci nous verrons comment communiquer avec le Modèle par l’intermédiaire du controller. Nous terminerons alors avec une partie théorique avant de passer aux choses sérieuses. Le développement d’une application réelle.