ASP.NET MVC 4 - M2BDIA - Université de Dijon

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

Download Report