Pour mettre en pratique cet article, vous aurez besoin de Visual

Transcription

1 T FEV/MARS 08 Le modèle MVC d'asp.net 3.5 // exstat déjà de nombreux f rame works de développement ASP. NET basés sur le modèle MVC, mas tous étaent développés par des ters. Mcrosoft propose sa propre soluton. Celle-c fat parte des Extensons ASRNET 3.5. // s'agt d'une préverson et la valdté du contenu de cet artcle est susceptble de changer dans les versons futures. Page 1/5 Pour mettre en pratque cet artcle, vous aurez beson de Vsual Studo 2008 Pour le développement d'applcatons ASP NET MVC, l vous faudra télécharger et nstaller la CTP des Extensons ASP.NET 3.5, dsponbles à cette adresse : http //asp net /downloads/3 5 extensons/). Enfn, l exste une bblothèque de classes adant le développement ASP.NET MYC, nommée MVC Toolkt Cette bblothèque sera prochanement ntégrée aux Extensons ASP.NET 3 5 maîs est pour le moment dstrbuée séparément. Vous pouvez vous la procurer a adresse http //asp.net/downloads/3 5 extensons/mvctoolkt Créaton du projet Zp Nous allons réalser une applcaton Web permettant la geston d'une lste de tâches Lne fos les Extensons ASP NET 3.5 nstallées, vous trouverez dans Vsual Studo 2008 un nouveau type de projet nommé " ASP.NET MVC Web Applcaton " : Eojecl types VranlC» Wndows Web Smart Oev Offce base ASP NET MVC Web Appfïcatcn tame 1 Soluton Nome Fg.l TaskManager TaskManager Soluton Explorer - TaskMan - Jl Jl ^ 4. P -r lf- X J3 Soluton TaskManager ( project) ff.al Propertes ^l Références vjfr App.Oata Sl Ldl Content f^ Contrôlez a Models Sl Vews 3] Default aspx $] Global asax _> Web confg «Jl ASP NET MVC Web Applcaton and Test ^ ASP NET Server Control fs: WCF Servce Applcaton JASPNET MVC We & Dynamc Web Applcaton Create drectory for soluton contendra les classes du modèle de données Nommez le projet TaskManager, et clquez sur OK. Vsual Studo génère une structure de répertores et des fchers par défaut : (Fg.2). Ms-à-part les éléments habtuels, l y a tros répertores drectement lés à l'archtecture MVC : - Contre/ters est le répertore dans lequel sont placées les classes de types contrôleurs (logque de contrôle) Mode/s est le répertore qu Vews est le répertore qu contendra l'nterface graphque (pages ASPX.etc..) Le projet utlsera la bblothèque MVC Toolkt qu est dstrbuée sous forme de sources et de bnares. Pour l'utlser, vous pouvez donc ajou ter une référence vers le fcher MVCToolkt dll Pour notre gestonnare Tarn Column Mme ï TaskD Descrpton p CC StotwD Statut Column Namc Type Al low Null! OB ï StatusD Fg 3 StatusD 2 3 F g 4 Descnphon TaskD Dcscnptron Flg5 Le modèle nt DrtaType AllowNuHs, [rj! nvarthar(max) F] "«L.nt rv.«ch*r(50) Descrpton NotStarted n Progress Complétée! Work on the websrte 2 Send an emal to Barry de tâches, nous utlserons une base de données SQL Server (la verson Express lvrée avec Vsual Studo convent tout à fat) Créez une base nommée dbtasks dans le répertore App_. La base content deux tables : Tasks qu content la lste de tâches et Status qu content les dfférentes étapes de tratement d'une tâche Voc leur structure. (Fg.3) La table Status content les valeurs suvantes (celles-c ne seront pas édtables depus l'n terface Web) : (Fg.4). Enfn, a des fns de tests unquement, nous allons ajouter les lgnes suvantes dans la table Tasks : (Fg.5). Le modèle de données se trouve par défaut dans le répertore Mode/s de l'applcaton Web Celu-c est vde à la créaton du projet. Pour notre projet, nous allons utlser le nouvel outl de mappng objet-relatonnel (ou ORM) de Mcrosoft LnqToSql. Un outl d'orm permet de générer des classes méter à partr d'une base de données relatonnelle Ces classes correspondent aux tables de notre base de donnees. Dans notre exemple, l faut une classe Task qu représentera une tâche et une classe Status qu représentera son statut Ben sûr, vous êtes lbres d'écrre ces classes vous-mêmes s vous ne voulez pas les générer automatquement. Afn de générer le modèle, l faut ajouter un nouvel élément de type " LNQ To SQL Classes " dans le répertore /Mode/s. (Fg.6) Donnons a cet element le Ma New tem TaskManager [_@J)gQfj Catégores. ïemplates. L3 [Ld] VMNtC* Code Q) HTML Page r^] nstaller Class J ^nterface Web : j jjscrpt Fle Wndows Forms ajljnq to SQL Classes WPF J G Nested Master Page Rcpcrtmg J Report UNQ to SQL classes rrupped to retotwnal otyecb yame- ng.6 DbTasks-dM Bor^^ nom de notre base de données DbTasks. Dans explorateur de soluton, double-clquez sur DbTasks.dbml. Ln édteur graphque apparaît. Ouvrez l'explorateur de serveur pour accéder au contenu de votre base de don nées depus Vsual Studo, et fates glsser les deux tables sur la surface ' : école supéreure d'nformatque, toutes ctatons

2 «a» TasAUnag*' Mcrosoft VîawSjMCJw ^MnwjftfWoJ jp Fk drt ï«w projet) fuld S*r et bpltff - ~x" ] '4,*, 4 Connertons B fc& dbtasks mdf S -ja base Dggfam; B Là Tau» m 3Tnte a aw<«x a StomlProctdum t C^ Functwre Gl Synonyml M>T«Olt O<M r ra = Pfop*rt«î T ÏTasUO ^f Descrpton " Status» ma v X C'est* n-rft-hrdï by Page 2/5 Attenton vérfez ben que le code de votre classe partelle se trouve dans l'espace de noms TasksManager.Models, car l s'agt de l'espace de nom qu content le code partel généré. Remarquez que nous avons c utlsé le nouveau langage LNQ pour les requêtes, ce qu est partculèrement appropre pusque nous avons un modèle objet généré par LnqToSql. Ben sûr, ren ne vous oblge à l'uth ser et vous pouvez tout à fat fare la même chose avec les modes connecté ou déconnecté d'ado.net et des requêtes SQL classques. g} 'LM AcmUtt ( ^1 Servers, 'cebe «Slver Expteur d Symbol Résulte] "«.», * - Pfep«rTes f _3* StaoslO ^y Descopton [ «my ln» FS 7 f CMU Ch l WS de l'édteur (Rg 7) L'édteur va générer deux classes (une pour chaque table), ayant chacune des proprétés correspondant aux colonnes de la base de données Chaque nstance d'une classe correspondra donc à une lgne dans la base de données Enfn ajoutons au modèle une méthode qu nous renvoe la lste des tâches. Nous allons pour cela étendre une classe qu a été générée par LnqToSql, ll s'agt de la classe DbTasksContext, qu représente la base de donnees dbtasks C'est par cette classe que nous passerons pour accéder aux donnees ou pour les modfer. La classe DbTasksContext a été générée comme classe partelle. Pour lu ajouter des méthodes, l sufft donc d'ajouter une autre défnton partelle de la classe De cette manère s la classe est régénérée, nos ajouts ne seront pas écrasés, pusqu'ls se trouvent dans un fcher dfférent. Dans l'explorateur de soluton, clquez avec le bouton drot sur le fcher DbTasks dbml et chosssez Vew Code. Vsual Studo crée un nouveau fcher avec une défnton partelle de la classe Modfez ce code pour lu ajouter les methodes d'accès aux données suvantes : usng System, usmg System Lmq, nomespace TaskManager Models f partal class DbTasksContext publc Queryable<Task> Geflasks() return fram task n Tasks sélect task, Les contrôleurs Les contrôleurs sont les classes qu font le len entre l'nterface et le modèle Typquement, ls tratent des événements. ls mettent à jour le modèle, renvoent une réponse, ete Nous allons créer un contrôleur pour les tâches Par défaut, les contrôleurs se trouvent dans le sousrépertore Controllers. Ajoutez donc à ce répertore un nouvel élément de type " MVC Controller Class " Vous nommerez cet élément Tasks- Controller. (Rg 8) Add New tem TaskManager LëJHËlll Categon.» Templatcs: Gl [H] Vtsual C* Code WPF Reportng MVC Web Applcaton C ont roller Class ttsrne Fe 8 TasksControlter Tl Master Page fl E Web User Contrat Hl Web Content Form -." sse Unt Test AMVCControlterCtass x^mvc VewContent Page Ll ^ MVC Vew Master Page. a jj [ [ Canet. [ Ca ll est mportant de respecter la conventon de nommage qu veut que le nom fnsse par Controller Dans le fcher Global asax, vous trouverez le code suvant. RouteTable Routes Add(new Route Url = "[controller]/[acton]/[d]", Defaults = new acton = "ndex", d = (strmg)null }, RouteHandler = typeof(mvcroutehandler) RouteTable Routes Add(new Route Url = "Default aspx", Defaults = new controller = "Home", acton = "ndex" RouteHandler = typeof(mvcroutehandler) d = (strmg)null }, publc Queryable<Task> GetTasksWthStatus(mt statusd) return from task n Tasks where task StatusD == statusd sélect task, Ce code, exécute au démarrage de l'applcaton, détermne la corres pondance entre une URL et une acton. Une acton est en fat une méthode d'un contrôleur. Par défaut, les URL dovent être de la forme [controller]/[acton]/[d] Par exemple, l'url Tasks/VewTask/3 appellera la méthode VewTask du contrôleur TasksController, en lu passant en paramètre 3. Nous aurons occason de revenr sur ce schéma tout au long de cet artcle : école supéreure d'nformatque, toutes ctatons

3 Le deuxème bloc permet une excepton à la règle, en ndquant que l'url Default.aspx dot être assocée à la méthode ndex du contrôleur HomeController(en lu passant un D nul). La classe HomeContro/terest créée par défaut lors de la créaton du projet Vous pourrez trouver cellec dans le répertore Controllers. Ajoutez au contrôleur une méthode qu permettra d'affcher la lste des tâches : Add New tem -TaslfManager lt. UNÉSË!] tategones Vsual C* Code Web Wndows Porms WPf Reportng lemplates. Page 3/5 SjO] l BfcJ web user Lontrat»! 1 1 ~J Cl Web Content Form JL 5bae Unt Test J -«MVCControHerClass,JMVC Vew Content Page L^MVC Vew Master Page *MVC Vew Page GM fjffl &jm VfflÊ -,.â MVC Vew User Control» ] fl usmg System, usmg System Web, usmg System Web Mvc, usmg TaskManager Models; MVC AppBcaoon Vew Content Page Name: TasfcLsbasïx Fg.9 f~_.»*l j [ Caooal namespace TaskManager Controllers publc class TasksController Contrôler prvate DbTasksContext database = new DbTasksContext(), publc vod ndex)) Vew = database GetATasks(), RenderVew("TaskLst"), classe défnt en partculer une proprété Vew qu permet de récupérer les données passées à la vue (le deuxème paramètre de Render- Vew). Vous remarquerez que la proprété Vew est de type object. C'est ben normal pusque les données passées à la vue peuvent être de n'mporte quel type. Cependant, cela nous oblge à fare un cast à chaque accès à la proprété Pour paller cela, l est possble de fare dérver la page de la verson générque de la classe VewPage. Changeons la déclaraton de notre classe (dans le fcher TaskLstaspx.es) pour typer la proprété Vew (le type correspond à la valeur de retour de la méthode GetATasks) : publc partal class TaskLst VewPaae<Queryable<Task» La méthode dot être décorée de l'attrbut pour ndquer que celle-c peut être appelée à travers une URL. Notre méthode est assez smple et se contente d'appeler la vue " Task- Lst " (nous ne l'avons pas encore créée). La méthode RenderVew est une méthode hértée de la classe Controller. Le premer paramètre est le nom de la vue à affcher et le second permet de spécfer les données à affcher, c la lste des taches. l est mportant que toutes les données dont la vue pourrat avor beson soent passées dans ce paramètre, car d'un pont de vue archtectural la vue ne dot pas accéder au modèle de données. Les vues Les vues correspondent a l'nterface utlsateur. Dans le cas d'une applcaton ASP.NET, l s'agt de pages ASPX, master pages, et contrôles ASCX Par défaut, les vues se trouvent dans le répertore Vews. Celu-c est dvsé en sous-répertores : un pour chaque contrôleur, et un répertore Shared pour les éléments communs à pluseurs contrôleurs. Par défaut, le runtme cherchera dans le répertore correspondant au contrôleur, pus dans le répertore Shared s la vue n'a pas pu être trouvée La méthode ndex de notre contrôleur fat appel à la vue " TaskLst ". Créons mantenant cette vue en créant un sous-répertore Tasks dans le répertore Vews, et en y ajoutant un élément de type " MVC Vew Content Page ", qu s'ntégrera dans la master page créée par défaut dans le répertore /Vews/Shared. (Rg.9) Cela a pour effet d'ajouter une nouvelle page ASPX Cependant, une df férence notable par rapport aux pages habtuelles est que celle-c dérve de la classe VewPage (qu elle-même dérve de la classe Page). Cette ll ne nous reste plus qu'à lre les données dans la proprété Vew el les affcher sur la page. Cec peut être fat smplement avec ce code : <table class="tasklsltable"> <th>task</th> <th>status</th> <% foreach (var task n Vew) %> <% } %> <td><%= task Descrpton %></td> <td><%= task Status Descrpton %></td> Au passage, notez qu'avec Vsual Studo 2008 l'ntelhsense fonctonne parfatement dans les blocs de code C# ntégrés au markup ASP NET ll est également possble d'utlser des contrôles serveur. Cependant, le mécansme de postback ne fonctonne pas sur le modèle MVC. Nous verrons par la sute comment les donnees peuvent être transmses de la vue vers le contrôleur Vous My Task Manager pouvez à présent lancer l'applcaton et vous rendre à l'url /Tasks/lndex. Avec l'ade d'un peu de code CSS ajouté au fcher Work on the webslte Send an emal to Barry /Content/Ste.css, voc ce Fs W l'on peut obtenr : (Fg.10). : école supéreure d'nformatque, toutes ctatons

4 L URL /Tasks donne le même resultat car ndex est la valeur par défaut pour le nom de acton (vor le fcher Global asax) Edtons la master page pour y ajouter un len vers la lste de taches Nous voulons her vers la methode ndex du contrôleur TasksController Par défaut URL /Tasks/lndex fonctonne Cependant l est plus pru dent de générer cette adresse a ade de la methode Html Actonbnk() De cette manère s on souhate changer le systeme de mappng entre les URL et les contrôleurs l suffra de modfer le fcher Global asax et le changement sera automatquement prs en compte dans tous les lens génères avec Html ActonLnk() Ajoutons donc le len dans le fcher /Vews/Shared/Ste Master <ul> <lxa href= '~/' runat= 'server' >Home</ax/l> <hx%= Html ActonLmk("Abou! Us' "Abouf 'Home") %></l> <h><%= Html ActonLmkC Tasks" 'ndex' Tasks') %></l> Le premer paramètre est le texte du len suv du nom de acton et du nom du contrôleur nserton de données Voyons mantenant comment fare des écrtures dans la base Nous allons ajouter a notre exemple une page permettant la creaton d une nouvelle tache L nserton requert deux actons sur le contrôleur La premere acton (New dans notre exemple) sera responsable de aff chage de la vue qu permet la sase des donnees La deuxeme acton (Create) permettra le tratement de ces donnees Le formulare de sase d une tache devra ressem her a cela (Rg ll) Flgll La vue a donc beson de la lste des statuts et e est au contrôleur de la lu fournr Ajoutons donc cette methode a notre contrôleur publc vod New() RenderVew("NewTask" database GetAStatus()), Ajoutez un nouveau fcher NewTask aspx de type Page Page 4/5 MYC Vew Content dans le répertore /Vews/Tasks/ Modfez le fcher C# pour que votre classe dérve de VewPage<Queryable<Status> pus mod fez le fcher de markup pour créer le formulare <form acton="/tasks/create"> <table> </form> <td>descnpton </td> <tdx%= Html TextBox("Descnpton") %x/td> <td>status </td> <td><%- Html Select)' StatusD' Vew) %></td> <td colspan="2"> </td> <%- Html SubmtButton( 'Create ' "Create' ) %> Remarquez qu l s agt d un formulare HTML classque Les appels aux methodes de la proprete Html vont générer des balses nput (pour la zone de texte et le bouton) et sélect (pour la lste déroulante) Le pre mer paramètre de ces methodes est le nom du controle HTML (valeur de la proprete name) La proprete acton du formulare ponte vers une methode Create du contrôleur Tasks que nous n avons pas encore ecn te ll s agt de la methode qu devra trater les donnees entrées dans le formulare Voc le contenu de la methode Create publc vod Create(stnng descrpton mt statusd) Task task = new TaskfJ task Descrpton = descrpton task StatusD = statusd database Tasks nsertonsubmt(task) database SubmtChanges(), Ans que la methode d acces aux donnees dans notre modele RedrectToActon("lndex" "Tasks' ) publc Queryable<Status> GetAStatusfJ return fram status m Status sélect status Créons mantenant la vue NewTask qu\ affchera le formulare de sase Nous allons nous ader des methodes de la proprete Htm/ pour créer les champs des formulares ll s agt en fat de methodes d extensons qu nous sont fournes par la bblothèque MVC Toolktdont nous avons précédemment ajoute la référence La methode possède deux paramètres dont les noms correspondent aux noms des champs HTML du formulare Les valeurs de ces champs seront donc automatquement passées en paramètres de la methode Lorsque le nombre de champs est trop mportant l peut etre contra gnant d avor a écrre tous les paramètres correspondant dans la sgna ture de la methode ll exste donc d autres technques pour récupérer les valeurs des champs notamment par la proprete Request Form Le code d ajout des donnees a la base est relatvement smple grâce aux classes générées par LmqToSql ll sufft de créer un nouvel objet de type Task de ajouter a la proprete Tasks du contexte et de valder les modfcatons Enfn notre methode redrge utlsateur sur acton : école supéreure d'nformatque, toutes ctatons

5 /nctexdu contrôleur Tasks pour affcher la lste des tâches après l'mser lon de donnees Nous aurons tout auss ben pu affcher une autre vue affchant un message a utlsateur Mse à jour d'une tâche La mse a jour d une tâche fonctonne de manère tres smlare a mser lon Une premere acton (Edt) affchera la vue qu content le formulare de sase, et une deuxeme acton (Update) fera la mse ajourdu modele Nous avons toutefos un problème a résoudre notre vue aura beson de pluseurs donnees, en occurrence la lste des statuts pour affcher la lste déroulante et les valeurs courantes des proprétés de la tache pour préremplr les champs ll exste pluseurs technques pour passer les donnees du contrôleur vers la vue Nous poumons par exemple reunr toutes les donnees dans un nouveau type, ou utlser un Dctonary (tech nque que nous utlserons c) Voc les deux actons du contrôleur publc vod Edt(mt d] Vew["DefaultValues"] = database GetTaskByld(d), Vew["StatusLst"] = database GetAStatus(), RenderVew("EdtTask"), publc vod Updatejmt taskd, strmg descrpton, mt statusd) Task task = database GetTaskByld(tasklD), task Descrpton = descrpton, task StatusD = statusd, database SubmtChangesj), RedrectToActon("lndex", "Tasks"), La proprete Vew du contrôleur est de type Dctonary et ses valeurs pourront etre récupérées dans la proprete Vew de la vue Pusque les donnees a transmettre sont déjà dans la proprete VewDa ta, nous devons appeler une autre surcharge de la methode Renter Vew, qu ne prend pas de donnees en paramètre, maîs unquement le nom de la vue Voc la vue " EdtTask " <form acton="/tasks/update"> <% var task = (TaskManager Models Task)Vew["DefaultValues"], %> <% var statuslst = (Queryable<TaskMartager Models Stalus>)Vew ["StatusLst"], %> <table> <td>descnpton </td> <td><%= Html TextBox("Descnpton", task Descrpton) %></td> <td>status </td> <td><%= Html Select("StatuslD", statuslst, task StatusD) %></td> <td colspan="2"> <%= Html Hdden("TasklD", task TaskD) %> <%= Html SubmtButton("Update" "Update") %> </td> </form> L URL pour édter une tache est de la forme /Tasks/Edt/[d] D sera automatquement mappe au paramètre d de la methode Edt du contrôleur Complétons la vue TaskLst pour nclure des lens vers les methodes New et Edt. <p><%= Html AchonLnk("Create a new task", "New", "Tasks") %></p> <table class="tasklsttable"> <th>delete</th> <th>edt</th> <th>task</th> <th>status</th> <% foreach (var task n Vew) %> <td><%= Html ActonLmk("Delete" new Acton = "Delete" D = task TaskD })%></td> <td><%= Html ActonLnk("Edt" new Acton = "Edt" D = task TaskD }) %></td> ^o/ \ o/ ^ < /o } /o> <td><%= task Descrpton %></td> <td><%= task Status Descrpton %></td> Suppresson d'une tâche Pour que notre applcaton sot complète, l ne manque plus que la methode Delete sur notre contrôleur JasksController Nous avons déjà crée les lens vers cette acton, qu prend en paramètre D de la tâche a supprmer Voc comment écrre cette methode publc vod Delete(mt d) Task task = database GetTaskByld(d), database Tasks DeleteOnSubmt(task), database SubmtChanges() RedrectToActon("lndex", "Tasks"), Lancez l'applcaton, celle c est mantenant totalement fonctonnelle Concluson Le nouveau modele MYC ne vse pas à remplacer approche classque ll s agt d une opton que vous n êtes pas oblges d utlser De plus, le modele MVC et le modele classque peuvent tout a fat cohabter dans la même applcaton Xaver Ponas Formateur laboratore Net Supnfo Page 5/5 : école supéreure d'nformatque, toutes ctatons