30/01/2014 Présentation de l’entreprise M2BDIA – Université de Bourgogne – Janvier 2014 Yohann PANSARD – [email protected] Présentation de ASP.NET MVC 4 But du cours • • • • • Startup Dijonnaise créée en 2009, Spécialisée dans le développement de solutions E-Business, Partenaire de Teletech International, Premier espace de Co-Working à Dijon, Les technologies Microsoft => 90% des projets. • Yohann PANSARD, ingénieur développement informatique Expert chez Eb-Lab depuis Janvier 2011. • Diplômé du M2BDIA en 2010. Fonctionnement • Présentation des concepts généraux de MVC, • Initiation aux technologies .NET pour le développement d’applications WEB (MVC 4 Razor), • Utilisation d’AJAX pour obtenir une application web dynamique. • Compétences à la fin du module : • Créer une application Web contenant : • Des pages pour interagir avec une BDD, • Une authentification sécurisée des utilisateurs, • Utiliser AJAX pour accroître les performances et la réactivité, • Faire communiquer l’application web avec d’autres processus. • Tester, évaluer et améliorer la qualité de son code (selon avancement) : • Journaliser efficacement les erreurs, • Déboguer une application, • Initiation aux tests unitaires. • Ne pas hésiter à interrompre le cours pour poser des questions, • Ne pas hésiter à poser des questions par email entre deux séances : • [email protected] ou [email protected] • Toutes les présentations, TD, TP, corrections, code des démonstrations et ressources utiles seront déposées sur http://m2bdia.ypdeveloppement.fr • Vendredi 31 janvier 8h30 - 12h00 => CM/TD • Vendredi 7 février • 08h00 - 10h00 TP (groupe 1) • 10h00 - 12h00 TP (groupe 2) • Vendredi 14 février 08h30 - 12h00 => CM/TD • Vendredi 21 février • 08h00 - 10h00 TP (groupe 1) • 10h00 - 12h00 TP (groupe 2) Plan • • • • • Présentation du concept MVC Introduction à la solution de Microsoft Mécanismes de sécurité d’ASP.NET MVC Communication avec une application MVC Amélioration des performances Présentation du concept MVC 1 30/01/2014 Qu’est ce que MVC ? – Modèle-Vue-Contrôleur (Model-View-Controller en anglais) – Créé en 1979 sous le nom de TMVE (Thing – Model – View – Editor) – Séparation de l’application en couches. – Spécialement adapté aux applications de gestion manipulant de gros volume de données. – Implémenté en ASP.NET, C++, JS, Java, Objective C, PHP, Python, Ruby,… Qu’est ce que MVC ? BDD VUE MODELE CONTROLEUR Web Service Serveur Fichier Serveur SMTP La vue Le modèle • Décrit comment les données vont être présentées à l’utilisateur. • Contient le code Javascript, HTML,..(contexte web) • Fonctionne comme un « texte à trous » • Un ensemble de classes au sens objet qui décrit les données – Une classe représente : • une entité, • la représentation visuelle d’une entité. – Chaque attribut de la classe représente : • Une propriété de l’objet avec ses règles de gestion, • Des informations sur l’état de la vue – Un attribut sera une « brique » pour « boucher un trou de la vue ». Le contrôleur L’action • Se charge de la logique métier (requêtes BDD, appels de WS, gestion des fichiers, gestion des droits,…) • Traite et répond aux appels AJAX. • Contient un ensemble de méthodes appelées « Actions ». • C’est une composante du contrôleur (méthode), • Est appelée par une requête du navigateur, • Retourne un résultat qui sera interprété par le navigateur (Vue, Fichier, Vide, Objet multimédia, JSON,..) 2 30/01/2014 La route Avantages • C’est la méthode utilisée pour appeler une action (URL en web). • En MVC pas d’appels par chemin direct (physique ou virtuel). • • • • • Très bonne séparation en couches, Conception claire et efficace, Gain de temps (réutilisabilité forte), Facilite la maintenance, Grande souplesse dans l’organisation du développement, • Tests unitaires très pointus, • Adapté aux projets conséquents. Inconvénients • Multiplication des fichiers, • Nécessite un recul plus important par rapport au projet, • Demande une communication importante entre les membres de l’équipe, • Attention à la régression de code (réutilisabilité), • Inadapté aux petits projets. ASP.NET MVC versus ASP.NET WebForms La solution de Microsoft : ASP.NET MVC Historique Date • • • • • • • Pas de PostBack, Pas de Viewstate, Pas de RAD, Pas de Code Behind, Routage d’URL plus simple, Plus de contrôle sur le code HTML, Intégration plus simple d’Ajax. • ASP.NET MVC (version actuelle MVC 5 07/10/2013) • Apparition en 2007 en CTP puis 2009 • Implémentation Open Source (Licence Apache) • Se base sur ASP.NET • Deux moteurs différents de rendus (ASP, Razor,..) Version 10 December 2007 ASP.NET MVC CTP 13 March 2009 ASP.NET MVC 1.0 16 December 2009 ASP.NET MVC 2 RC 4 February 2010 ASP.NET MVC 2 RC 2 10 March 2010 ASP.NET MVC 2 6 October 2010 ASP.NET MVC 3 Beta 9 November 2010 ASP.NET MVC 3 RC 10 December 2010 ASP.NET MVC 3 RC 2 13 January 2011 ASP.NET MVC 3 20 September 2011 ASP.NET MVC 4 Developer Preview 15 February 2012 ASP.NET MVC 4 Beta 31 May 2012 ASP.NET MVC 4 RC 15 August 2012 ASP.NET MVC 4 30 May 2013 ASP.NET MVC 4 4.0.30506.0 26 June 2013 ASP.NET MVC 5 Preview 23 August 2013 ASP.NET MVC 5 RC 1 17 October 2013 ASP.NET MVC 5 3 30/01/2014 Qu’est ce que Razor ? • Introduit avec MVC3 • Moteur par défaut dans MVC • Diffère de ASP au niveau de la syntaxe – Plus propre – Plus adaptée – Plus légère Le modèle • Classe au sens Dotnet (écrite en C# ou VB.net) – Supporte tous les concepts de la POO (héritage, extension, déclaration partielle,…) – Supporte les annotations • Possibilité d’utiliser les collections et LINQ, • Représente souvent un objet métier. • Toutes les commandes sont précédées d’un @ La vue La vue • Peut être partielle ou non (une classe partielle sera préfixée par un underscore ‘_’), • Peut être décrite par un fichier maitre (Layout => équivalent à la masterpage en webforms), • Peut inclure d’autres vues, • Est décrite par un seul modèle, • Correspond à un template qui va générer du balisage HTML, • Est fortement typée. • Commentaire dans une vue La vue Le contrôleur • Code explicite <span>Prenom @(Prenom)</span> • Code non-encodé <span>@Html.Raw(Model.Message)</span> • Bloc de code @* Ceci est un commentaire *@ • Utilisation du « @ » My twitter handle is @@YpDeveloppement • Code implicite <span>@Model.Message</span> • Une classe spéciale (qui hérite de Controller). • Par convention chaque contrôleur possède le suffixe Controller dans son nom. • Obligatoirement déclaré avec le niveau d’accès ‘public’ @{ int x = 123; string y = "Hello M2BDIA !"; } 4 30/01/2014 Le contrôleur • Cherche la vue qui porte le nom de l’action dans le répertoire du nom du contrôleur par défaut. • En cas d’échec, il regarde dans le répertoire partagé (Shared). • Il est possible de spécifier explicitement le nom de la vue. L’action • Une méthode .NET avec le type de retour « ActionResult » • Doit retourner un objet de type (chacun héritant de ActionResult): – – – – – – – – ViewResult JsonResult JavaScriptResult ContentResult FileContentResult FileStreamResult FilePathResult EmptyResult • Niveau d’accessibilité ‘Public’ La zone La route • Microsoft permet de regrouper le site en compartiments logiques => area • Chaque zone est indépendante, • Utilisation facultative, • URL pour accéder à une page du site (http://www.monsite.fr/Area/Controller/Action /parameters/ par exemple) • Décrite dans le fichier RouteConfig.cs du répertoire AppStart, • Possibilité d’ajouter autant de routes que nécessaire, • Une route par défaut est créée pour chaque projet dans Visual Studio. • Attention à l’ordre des routes ! • Exemple : – Séparer la partie FrontOffice de la partie Backoffice d’un site. La route routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); • Name : Identifiant unique de la route, • URL : Template de l’url (après le domaine du site) • Defaults : Valeurs par défaut de la route Exemple de route valides: • http://www.monsite.fr • http://www.monsite.fr/Home/Index (identique à la route précédente) • http://www.monsite.fr/Admin/VoirProduit/3 • http://www.monsite.fr/Admin/ListerProduit?limite=10 Les bundles • Package regroupant un ensemble de fichier JS ou un ensemble de fichiers CSS. • Permet d’intégrer rapidement un lot de fichier dans une vue. • Permet de passer rapidement du développement à la production. • Permet de compresser les fichiers et d’améliorer les performances (minification). 5 30/01/2014 Arborescence d’un projet Visual Studio Elément Répertoire Modèle(s) ./Models/ Vue(s) ./Views/[Controller]/ ou ./Views/Shared/ Contrôleur(s) ./Controllers/ Action(s) Dans chaque [controller].cs Zone(s) ./Areas/ Route(s) ./App_Start/RouteConfig.cs Bundle(s) ./App_Start/BundleConfig.cs But des vues partielles • • • • • • • • • Décrit une sous-partie d’une vue Equivalent du UserControl (.ascx) de WebForms Forte réutilisation Favorise le travail collaboratif Indispensable pour AJAX Pas de traitements dans une vue partielle Nom préfixé par ‘_’ Fortement typée Pas de layout => @{Layout = null;} Les vues partielles & Templates Utiliser une vue partielle • Dans le contrôleur : return PartialView(); return PartialView("_UpdateUser"); • Dans la vue (_UpdateUser.cshtml) : @model DemoMVC4.Models.UpdateUser @{ Layout = null; } <h2>MAJ de l’utilisateur @Model.Login effectuée</h2> Le DisplayTemplate Le EditorTemplate • ≈ Vue partielle • Répertoire Views/Shared/DisplayTemplates/ • Composant d’affichage • ≈ Vue partielle • Répertoire Views/Shared/EditorTemplates/ • Composant d’édition – Pas de formulaire – Pas d’input (sauf pour affichage), • Utilisable à l’infini dans une page • Imbrication possible • Typage fort – formulaire – input • Utilisable à l’infini dans une page • Imbrication possible • Typage fort 6 30/01/2014 JSON, XML, vue partielle,.. Communiquer entre les couches VUE MODELE CONTROLEUR Ajax Passer un modèle à une vue Spécifier le modèle attendu par la vue • Géré par le contrôleur, • Dans le return d’une action, il convient de définir : • Première ligne de la vue (convention) • Mot-clef @model suivi du type • Si modèle attendu ≠ modèle fournit => exception – La vue à restituer, – Le modèle à utiliser (optionnel). • Syntaxe : return View("About", MonModele); Passer des données sans modèle • 3 variables dynamiques (dictionnary) : – ViewBag (vidé à chaque appel) – ViewData (vidé à chaque appel) – TempData (vidé à la fin de la session) – Accessible dans la vue via @ ( @ViewBag.MaVariable) – A utiliser avec parcimonie ! • Exemples: – – – – – @model @model @model @model @model MonApplication.Model string Int32 IEnumerable<Model> Nullable<bool> Passer des paramètres à un contrôleur • Utilisation des paramètres de l’action • Par la route • Par un paramètre nommé. • Exemple: – http://monsite.fr/Home/AfficherArticle/1 – http://monsite.fr/Home/AfficherArticle?IdArticle=1 Public ActionResult AfficherArticle(int IdArticle) { //IdArticle vaut 1 } 7 30/01/2014 1er cas : Une vue sans modèle HomeController.cs http://monsite.fr Démonstration sur Visual Studio public ActionResult Index() { return View(); } 2ème cas : Une vue avec modèle 1er cas : Une vue sans modèle On ne passe aucun modèle à la vue. Le moteur renvoie donc le code HTML de la vue à l’internaute directement. Views/Home/Index.cshtml <html> … </html> HomeController.cs HomeController.cs public ActionResult Index() { return View(); } public ActionResult HelloWorld(string Who) { return View(new HWModel(Who,DateTime.Now)); } 2ème cas : Une vue avec modèle HomeController.cs public ActionResult HelloWorld(string Who) { return View(new HWModel(Who,DateTime.Now)); } HWModel.cs Public string Name {get;set;} Public DateTime CurrentTime {get;set;} Accéder aux données (Facultatif) Views/Home/HelloWorld.cshtml @model HWModel <html> Bonjour @Model.Name, nous somme le @Model.CurrentTime </html> Ne pas parcourir ce chapitre 8 30/01/2014 Entity Framework Langage d’interrogation : LINQ • Un ORM (Object Relational Mapping) • Indépendant du SGBD, • Réduit la quantité de code à écrire et rend le code homogène, • Requiert une base de données « normalisée », • Réduit légèrement les performances, • Débogage simplifié. • LINQ – Requêtes écrites directement en .NET – Requêtes traduites en SQL à la compilation – Interrogation de structures de nature différentes • LINQ Dynamique – Idem sauf requêtes traduites au runtime – Entité spécifiée sous forme de chaine de caractère – Pas d’intellisense Source : http://msdn.microsoft.com/en-us/data/aa937709.aspx L’accès aux données via EF Formulaires et composants HTML Rappels sur la balise <form> Le formulaire et ASP.NET MVC 4 • Délimite ce qui sera envoyé au serveur • 2 Attributs importants : • Action – Action => Où ? – Method => Comment ? (GET ou POST) – Nom de la méthode du contrôleur vers qui les données seront envoyées – Exemple : /Home/ExecuteSearch • Pas d’imbrication de form • Plusieurs balises form par page possible • Method <form action="http://www.google.fr/"> <input type="text" name="q" value="M2BDIA"/> <input type="submit" value="Rechercher"/> </form> <form action="/Home/ExecuteSearch"> <input type="text" name="What" value="M2BDIA"/> <input type="submit" value="Rechercher"/> </form> – Dépend du contexte 9 30/01/2014 Le formulaire et ASP.NET MVC 4 Lier un modèle à un composant : HTMLHelper • L’action du contrôleur (renseignée dans l’attribut action du formulaire): • Liaison faite via un ModelBinder, – attend un modèle typé (en paramètre), – doit être décorée par HttpPost ou HttpGet (suivante l’attribut method du formulaire) [HttpPost] public ActionResult ExecuteSearch(SearchModel model) { //Do some work… return View(); } public class SearchModel { public string What { get; set; } } Alimentation du model depuis un formulaire @model MonModel <html> <head>…</head> <body> <form …> <input type=« text » name=« prenom » value =« Albert »/> <input type=« submit »> </form> </body> </html> Public class MonModel { public string prenom {get;set;} } Le prénom vaudra « Albert » à la validation du formulaire – Le DefaultBinder utilise la propriété name du composant, – Possibilité d’écrire son propre ModelBinder, – Fonctionne avec les types complexes, – Fonctionne avec les types nullables • Effectuée au ‘submit’ de la page Les Helpers • Qu’est ce qu’un Helper ? – Ensemble de méthodes, – Génère du code automatiquement, – Paramétrable, – Gains • Fiabilité, • Productivité. VUE MODELE Les Helpers dans ASP.NET MVC 4 • HTMLHelper – Génère du code HTML principalement pour les composants. • URLHelper – Fournit des outils pour la génération des routes, paths,… • AJAXHelper – Génère automatiquement le code pour les appels asynchrone AJAX. – Présenté en détails plus loin. Générer des routes : URLHelper • Url.Action – Génère le chemin vers une action @Url.Action("About", "Home") • Url.Content – Génère le chemin vers une ressource – Ne pas oublier le ~ @Url.Content("~/Content/Images/UB.png") 10 30/01/2014 Générer les composants Html : HTMLHelper Générer les composants Html : HTMLHelper • Génération des balises du formulaire: • Syntaxe avant MVC3: – BeginForm (syntaxe possible avec using) – EndForm @Html.BeginForm("ExecuteSearch","Home", FormMethod.Post) @Html.EndForm() @Html.TextBox("Name") • Syntaxe depuis MVC3: @Html.TextBoxFor(m => m.Name) Ou @using (Html.BeginForm("ExecuteSearch", "Home", FormMethod.Post)) { //SomeWork } Générer les composants Html : HTMLHelper HTMLHelper : Les templates Méthode Helper Composant Html généré TextBoxFor <input type="text"/> PasswordBoxFor <input type="Password" /> TextAreaFor <textarea></textarea> CheckBoxFor <input type="checkbox" /> RadioButtonFor <input type="radio" /> DropDownListFor <select></select> LabelFor <span></span> HiddenFor <input type="hidden"/> – Injecte le contenu d’un EditorTemplate dans la vue ValidationMessageFor <span>[MESSAGE ERREUR]</span> @Html.EditorFor("_Address", m => m.Address) ValidationSummary <div> [RECAP ERREURS]</div> ActionLink <a href="…" /> Raw Affiche du texte sans encodage • Html.DisplayFor – Injecte le contenu d’un DisplayTemplate dans la vue @Html.DisplayFor("_Address", m => m.Address) • Html.EditorFor HTMLHelper : Les Helpers spéciaux • Html.Partial – Injecte le contenu d’une vue partielle dans une vue sans passer par le contrôleur (Vue statique) • Html.RenderPartial – Injecte le contenu d’une vue partielle dans une vue en passant par le contrôleur (Vue avec modèle) • Html.Action Démonstration sur Visual Studio – Injecte le contenu d’une vue dans autre une vue sans passer par le contrôleur (Vue statique) • Html.RenderAction – Injecte le contenu d’une vue dans autre une vue en passant par le contrôleur (Vue avec modèle) 11 30/01/2014 Application de gestion de mes séries Table SerieState Attribut Type Description Id Entier non nul clé primaire Identifiant unique de l’état Caption Chaine de caractère Intitulé de l’état Domaine de valeur : • En production • Arrêtée Table Serie Table Season Attribut Type Description Attribut Type Description Id Entier non nul clé primaire Identifiant unique de la saison Id Entier non nul clé primaire Identifiant unique de la série IdSerie Entier non nul clé étrangère Identifiant de la série concernée Name Chaine de caractère Nom de la série NumSeason Entier non nul SerieState Entier non nul clé étrangère Etat actuel de la série VersionVO Booléan Indique si la série est en VO ou non PicturePath Chaine de caractère Lien vers une illustration Table Episode Numéro de la saison Application de gestion de mes séries • Afficher la liste de mes séries (tableau) – Afficher le détail d’une série Attribut Type Description Id Entier non nul clé primaire Identifiant unique de l’épisode IdSeason Entier non nul clé étrangère Identifiant de la saison Title Chaine de caractère Titre de l’épisode Seen Booléen Indique si l’épisode a déjà été regardé Rate Integer Note attribuée à l’épisode FileSize Integer Taille en octet du fichier vidéo • Informations + liste saisons • Liste des épisodes (DisplayTemplate) • Ajouter / Modifier une série (EditorTemplate) • Ajouter / Modifier un épisode 12 30/01/2014 Fin du CM n°1 Avez-vous des questions ? 13
© Copyright 2024 Paperzz