alphorm.com - formation développez des applications web avec asp.net mvc 4(70-486)
DESCRIPTION
La formation complète est disponible ici: http://www.alphorm.com/tutoriel/formation-en-ligne-asp-net-mvc-4-70-486 Cette formation permet d'acquérir les compétences et connaissances nécessaires pour développer des applications ASP.NET MVC avancées en utilisant les outils et technologies du Framework .NET 4.5. L'accent sera mis sur les bonnes pratiques de codage qui permettent d'améliorer les performances et l'évolutivité des applications Web. ASP.NET MVC et Web Forms seront présentés et comparés afin de savoir quand ils devraient/pourraient être utilisés. La formation est basée sur Visual Studio 2012. Cette formation prépare à l'examen " 70-486 - Developing ASP.NET MVC 4 Web Applications "TRANSCRIPT
Développez des applications Web avec ASP.NET MVC 4
Présentation de la formation
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Web avec ASP.NET MVC 4 (70-486)
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Présentation de votre formateur
• Présentation de la formation
• Le plan de la formation
• Outils nécessaires
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Outils nécessaires
• Liens utiles & références
• La certification
Votre formateur
• Djamel BOUCHOUCHA
• Consultant .NET et formateur
• Compétences :
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Web : ASP.NET, PHP, HTML5, CSS3, JavaScript, Web Service, WCF, RestFul
� Autres: C#, XAML, WPF, JAVA, C++, C, SQL, Cloud (Azure), iOS, Android, WP
• Références :
� Profil Linkedin : fr.linkedin.com/pub/djamel-bouchoucha/57/210/572/
Présentation de la formation
• Objectif principal : Préparation à la certification 70-486
• Prérequis :
� Avoir une première expérience dans le développement d’application ASP.NET
� Connaissance du Framework .NET et du langage C#
Connaissances des langages de base du Web (HTML, CSS et JavaScript)
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Connaissances des langages de base du Web (HTML, CSS et JavaScript)
• Ce que vous saurez faire à la fin de cette formation :
� Construire une application ASP.NET MVC complète
� Déployer votre application sur plusieurs supports dont le cloud
� Tester votre application
Le plan de la formation
Module 1 : Introduction à ASP.NET MVC 4
Module 2 : Conception d'application Web ASP.NET MVC 4
Module 3 : Développement de Modèles ASP.NET MVC 4
Module 4 : Développement de Contrôleurs ASP.NET MVC 4
Module 5 : Développement de Vues ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Module 6 : Tests et débogage d'application Web ASP.NET MVC 4
Module 7 : Structurer des applications Web ASP.NET MVC 4
Module 8 : Appliquer des styles aux applications Web ASP.NET MVC 4
Le plan de la formationModule 9 : Concevoir des pages réactives dans les applications Web ASP.NET MVC 4
Module 10 : Utilisation de JavaScript et de jQuery pour des applications Web réactives MVC 4
Module 11 : Gestion des droits d'accès aux applications Web ASP.NET MVC 4
Module 12 : Concevoir des applications Web robustes ASP.NET MVC 4
Module 13 : Utilisation des Web Services Windows Azure dans les applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
MVC 4
Module 14 : Implémentation d'API Web dans les applications Web ASP.NET MVC 4
Module 15 : Gestion des requêtes dans les applications Web ASP.NET MVC 4
Module 16 : Déploiement d'applications Web ASP.NET MVC 4
Outils nécessaires
• Un Système d’exploitation Microsoft
� Windows 7 SP1
� Windows 8 et 8.1
� Windows Server 2008 R2 SP1 (x64 uniquement)
� Windows Server 2012 (x64 uniquement)
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Windows Server 2012 (x64 uniquement)
• Le framework .NET 4.5
• Visual Studio 2012
• Optionnel : un compte Windows Azure
Liens utilies & références• Microsoft ASP.NET MVC
� http://www.asp.net/mvc
• Microsoft .NET:
� www.microsoft.com/net
• MSDN (Microsoft Developer Network)
� msdn.microsoft.com
• Microsoft Learning Center
• Rubrique ASP.NET de developpez.com
• dotnet.developpez.com/asp.net/
• Communauté d’aide au développement
• borntolearn.mslearn.net
• stackoverflow.com
• www.siteduzero.com
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Microsoft Learning Center
� www.microsoft.com/learning
• Communauté Microsoft Learning
� www.microsoft.com/learning/en/us/community.aspx
• Blog de ScottGu’s
� http://weblogs.asp.net/scottgu/
• Blog de Scott Hanselman
• http://www.hanselman.com
• Livres recommandés
• Liste de eBook gratuit proposés par Microsoft
• Pro ASP.NET MVC 4 (Professional Apress), Fourth Edition de Adam Freeman
• Professional ASP.NET MVC 4 de Scott Hanselman
La certification
• Développez des applications Web avec ASP.NET MVC 4 (70-486)
� http://www.microsoft.com/learning/en-us/exam-70-486.aspx
• MCSD: Web Applications
� http://www.microsoft.com/learning/en-us/mcsd-web-apps-certification.aspx
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
certification.aspx
• Second Shot
� http://bsf01.com/Microsoft_Vouchers/SecondShot.aspx
• Prometric
� http://www.register.prometric.com/
Bonne formation ☺
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Bonne formation ☺
Introduction aux technologies Web de
Introduction à ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
technologies Web de Microsoft
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Présentation des principaux outils web Microsoft
• Côté serveur
• Côté client
• Windows Azure
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Présentation des différents outils Web MS
• Développement :
� Visual Studio
� WebMatrix
� MonoDevelop
• Hosting :
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Hosting :
� Internet Information Services
� Windows Azure
• Exécution côté serveur : ASP.NET
• Exécution côté client : JavaScript, JQuery ..
Côté serveur
• IIS : Internet Information Services
� Serveur HTTP (comparable à Apache)
� Rôle dans Windows Serveur
� Permet d’exécuter des applications : ASP.NET, ASP, PHP…
• Windows Azure
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Windows Azure
� Cloud Microsoft
� Sites Web, Services, Base de données …
• Le framework .NET
• Les standards du web : HTML, CSS et JavaScript
• Les templates ASP.NET, mettent en avant l’utilisation de :
� JavaScript, JQuery
� HTML5 et CSS3
La compatibilité Multi-navigateur
Côté client
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� La compatibilité Multi-navigateur
� L’adaptation des sites sur Mobile
• Silverlight
Ce qu’on a couvert
• Les outils de développement
• IIS
• Windows Azure
• L’utilisation des standards
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Introduction à ASP.NET 4.5
Introduction à ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
ASP.NET 4.5
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
•Applications web :
� Web pages
� Web Forms
MVC
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� MVC
Web Pages
• WebMatrix, Visual Studio, Bloc-notes..
• Uniquement avec le moteur de vue Razor
• Le code HTML et le code métier dans le même fichier (fichier .cshtml)
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
(fichier .cshtml)
Web Forms
• Visual Studio, MonoDevelop
• Moteur de vue ASPX
• Création d’UI à l’aide des boites à outils
• Binding des contrôles
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Le code HTML et le code métier sont dans deux fichiers séparés (.aspxet aspx.cs)
MVC
• Visual Studio, MonoDevelop
• Moteur de vue ASPX ou Razor
• Pas de boites à outils, uniquement les contrôles HTML standards
• Séparation en 3 couches
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• La couche vue génère les interfaces utilisateurs
Ce qu’on a couvert
•Applications web :
� Web pages
� Web Forms
MVC
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� MVC
Introduction à ASP.NET MVC 4
Introduction à ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
MVC 4
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• MVC : Models, Views, et Controllers
• MVC dans le Framework .NET
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
MVC : Models, Views, and Controllers
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
MVC dans le Framework .NET
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Ce qu’on a couvert
• MVC : Models, Views, et Controllers
• MVC dans le Framework .NET
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Préparer les phases de conception
Conception d'application Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
de conception
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
•La gestion de projet
•Les données
•La couche service
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
La gestion de projet
• Méthodes :
� Agile
� Extreme Programming (XP)
� Test Driven Development (TDD - développement piloté par les tests)
• Les besoins:
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Les besoins:
� Définir les fonctions en amont
� Utilisation d’UML (notamment les USE CASE)
• Exécution côté serveur : ASP.NET
• Exécution côté client : JavaScript, JQuery ..
Les données
• Choix du serveur de base de données :
� SQL SERVER
� Oracle
� MySql
• Object-relational mapping (ORM)
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Object-relational mapping (ORM)
� Entity Framework
� Nhibernate
La couche service
• Choix du fournisseur de service :
� Web Services
� WCF
� RestFul (WebApi)
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Ce qu’on a couvert
• La nécessité de :
� Choisir une méthode de gestion de projet
� Choisir le serveur de base de données et un ORM
� Choisir son fournisseur de service
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Conception des Modèles, Contrôleurs et Vues
Conception d'application Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Contrôleurs et Vues
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• La conception de la couche Modèle
• La conception de la couche Contrôleur
• La conception de la couche Vue
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
La conception de la couche Modèle
• Les entités :
� Simple classe C#
� Configurer à l’aide d’annotation
• La persistance :
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• La persistance :
� ADO.NET
� ORM (Entity Framework, NHibernate…)
• Entity Framework : Génération automatique des vues et des entités
La conception de la couche Contrôleur
• Une classe qui hérite de « Controller »
• Qu’est ce qu’une Action ?
• POST et GET
• Gestion des vues
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Sécurité
La conception de la couche Vue
• Deux moteurs de rendues :
� Razor
� ASPX
• Plusieurs types de vues :
Complète
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Complète
� Template
� Partiel
Ce qu’on a couvert
• La conception des couches MVC
• Entity Framework
• La génération automatique des vues
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Création des modèles MVC
Développement de Modèles ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
des modèles MVC
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Création des modèles
• Liaison de données (Model Binder)
• Utilisation des annotations pour l’affichage et la validation des données
• Créer son propre système de validation des données
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Création des modèles
public class ToDo {
ToDo
ToDoID : int
Title : string
UserName : string
Description : string
Etat : boolean
CreatedDate : object
UpdatedDate : object
Comment
CommentID : int
UserName : string
Subject : string
Body : string
CreatedDate : object
UpdatedDate : object
0..*1
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
public int ToDoID { get; set; }
public string Title { get; set; }
public string UserName { get; set; }
public string Description { get; set; }
public bool Etat { get; set; }
public DateTime CreatedDate { get; set; }
public DateTime UpdatedDate { get; set; }
public virtual ICollection<Comment> Comments { get; set; }
}
public class Comment {
public int CommentID { get; set; }
public string UserName { get; set; }
public string Subject { get; set; }
public string Body { get; set; }
public DateTime CreatedDate { get; set; }
public DateTime UpdatedDate { get; set; }}
Liaison de données (Model Binder)
Sans le Model Binder MVC
public string Index()
{
var todo= new ToDo() {
Name = Request["Title"].ToString(),
Description = Request[« Description"].ToString(),
ToDoId = Int32.Parse(Request["ToDoId"])
Avec le Model Binder MVC
public ActionResult Index(ToDo todo)
{
…
public class HomeCustomBinder : IModelBinder
{
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
ToDoId = Int32.Parse(Request["ToDoId"])
};
…
• DefaultModelBinder : Binder par défaut• IModelBinder : Binder personnalisé
{
public object BindModel(ControllerContext
controllerContext, ModelBindingContext bindingContext)
{
HttpRequestBase request =
controllerContext.HttpContext.Request;
string title = request.Form.Get("Title");
string desc= request.Form.Get("Description");
return new HomePageModels
{
Title = title,
Description = desc
};
Utilisation des annotations pour l’affichage et la validation des données
public class ToDo
{
public int ToDoID { get; set; }
[DisplayName("Titre de la ToDo :")]
public string Title { get; set; }
[DataType(DataType.MultilineText)]
public class Person
{
public int PersonID { get; set; }
[Required(ErrorMessage="Veuillez saisir un nom.")]
public string Name { get; set; }
[Range(0, 400)]
public int Height { get; set; }
[Required]
[RegularExpression(".+\\@.+\\..+")]
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
public string Description { get; set; }
[DataType(DataType.DateTime)]
[DisplayName("Created Date")]
[DisplayFormat(DataFormatString = "{0:yyyy/MM/dd}", ApplyFormatInEditMode = true)]
public DateTime CreatedDate { get; set; }
public string UserName { get; set; }
public virtual ICollection<Comment> Comments { get; set; }
}
[RegularExpression(".+\\@.+\\..+")]
public string EmailAddress { get; set; }
}
Créer son propre système de validation des données
[AttributeUsage(AttributeTargets.Field)]
public class LargerThanValidationAttribute : ValidationAttribute
{
public int MinimumValue { get; set; }
public LargerThanValidationAttribute(int minimum)
{
MinimumValue = minimum;
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
MinimumValue = minimum;
}
public override Boolean IsValid(Object value)
{
var valueToCompare = (int)value;
if (valueToCompare > MinimumValue) { return true; }
else { return false; }
}
}
Ce qu’on a couvert
• La création de modèle à l’aides annotations
• Le binding du model avec le contrôleur
• La possibilité de créer des annotations
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Travailler avec les données
Développement de Modèles ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
avec les données
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Connexion à une base de données
• Entity Framework
• Définir un context pour Entity Framework
• Utiliser LINQ to Entities
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Démo
Connexion à une base de données
• Pour configurer l’accès à une base de données il y a deux étapes :
� Ajouter la DLL System.Data au projet
� Ajouter la chaine de connexion au fichier web.conf
<connectionStrings>
<add name="ToDoDB" connectionString="Data
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
<add name="ToDoDB" connectionString="Data Source=.\SQLEXPRESS;Initial
Catalog=DoToDB;Integrated Security=SSPI"
providerName="System.Data.SqlClient"/>
</connectionStrings>
Entity Framework
• Trois configurations possibles pour EF
� Database First
� Model First
� Code First
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Pour Model First et Code First il est possible de définir des données chargées par défaut lors de la première initialisation (en surchargeant la méthode Seed)
Définir un context pour Entity Framework
• Le contexte EF est juste une classe qui détermine les entités manipulés
• Il suffit de créer une classe qui hérite de DbContext
public class ToDoDB : DbContext
{
public DbSet<ToDo> ToDos { get; set; }
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
public DbSet<ToDo> ToDos { get; set; }
public DbSet<Comment> Comments { get; set; }
}
Utiliser LINQ to Entities
• LINQ to Entities est une version de LINQ qui fonctionne avec EF
• Sample LINQ Query:
var todos = (from t in context.ToDos
orderby t.CreatedDate descending
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
orderby t.CreatedDate descendingselect t).Take(number).ToList();
Démo
• Nous allons :
� Ajouter une connexion à une base de donnée dans le fichier web.conf
� Installer et configurer Entity Framework
� Créer une application web « ToDo »
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Ce qu’on a couvert
• La configuration de l’accès à une base de données en passant par le fichier web.conf
• Entity Framework
• Linq
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Créer des contrôleurs et leurs actions
Développement de Contrôleurs ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
et leurs actions
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Répondre aux requêtes utilisateurs à l’aide des Actions
• Passer des paramètres aux « Vues »
• Qu’est-ce que le « Controller Factory »
• Démo
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Répondre aux requêtes utilisateur à l’aide des Actions
• Création d’un contrôleur et de ses actions:� Création d’une action simple� Utilisation des types GET et POST� Création d’une Action Result personnalisée
• Exemple d’Action
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Exemple d’Action
public ActionResult First () {
ToDo firstToDo= context.ToDos.ToList()[0];
if (firstToDo != null) {
return View("Details", firstToDo);
} else {
return HttpNotFound();
}
}
Les paramètres d’actions
http://www.alphorm.com/ToDo/gettodobytitle?title=myfirsttodo
DefaultModelBinder
Le DefaultModelBinder permet d’obtenir le titre passé en paramètre de la query string et le transmetre automatiquement à la méthode GetToDoByTitle
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
public ActionResult GetToDoByTitle (string title){
var query = from p in context.ToDos where p.Title == title select p;
ToDo requestedTODo = (ToDo)query.FirstOrDefault();
return View("Details", requestedToDo );
}
Passé des paramètres aux vues
• Pour transmettre des paramètres aux vues vous avez trois possibilités :
� “View()“ méthode helper : Pour lier vos entités à la vue
� “ViewBag” propriété Dynamique (Ex : ViewBag.MaVar = “Bonjour”)
� “ViewData Dictionary” propriété : Utilisée avec MVC2, elle est remplacée par
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� “ViewData Dictionary” propriété : Utilisée avec MVC2, elle est remplacée par ViewBag depuis MVC3, elle reste utilisable pour assurer la rétrocompatibilité
Qu’est-ce le « Controller Factory »
� Permet d’implémenter son propre gestionnaire de contrôleur (DefaultControllerFactory)
� Le gestionnaire doit hériter de IControllerFactory
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Le gestionnaire doit hériter de IControllerFactory
� La classe doit être instancié dans le fichier Global.asax
Démo
� En utilisant le projet ToDo nous allons :
• Créer un Controller Factory
• Créer les 4 méthodes CRUD (Create, Read, Update, Delete) pour les commentaires
• Créer un moteur de recherche permettant de filtrer la liste des « ToDo »
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Ce qu’on a couvert
• La création de contrôleur et d’action
• Le passage de paramètre (ViewBag)
• Controller Factory
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Utiliser les filtres
Développement de Contrôleurs ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
•Qu’est ce qu’un filtre ?
•Créer et utiliser les filtres d’actions
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Qu’est ce qu’un filtre ?
� Certaines actions doivent être exécutée à des moments spécifiques :• Les autorisations• Les logs• Le système de cache
� Il existes 4 types de filtre : • Les filtres d’autorisations : sont exécutés avant les autres filtres et avant
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Les filtres d’autorisations : sont exécutés avant les autres filtres et avant l’exécution des méthodes d’actions
• Les filtres d’action: peuvent s’exécuter avant ou après, l’exécution des actions
• Les filtres de retour : peuvent s’exécuter avant ou après, l’exécution des actions
• Les filtres d’exceptions : permet d’interception les exceptions, l’exécution des actions
Créer et utiliser les filtres
public class SimpleActionFilter : ActionFilterAttribute
• Pour les filtres de type :• Autorisation : AuthorizeAttribute• Action et Result : ActionFilterAttribute• Exception : HandleErrorAttribute
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
public class SimpleActionFilter : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
Debug.WriteLine("This Event Fired: OnActionExecuting");
}
public override void OnActionExecuted(ActionExecutedContext filterContext)
{
Debug.WriteLine("This Event Fired: OnActionExecuted");
}}
Ce qu’on a couvert
•Les types de filtre
•Créer et utiliser les filtres
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Créer des vues avec Razor
Développement de Vues ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Razor
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
•Présentation de Razor
•Les méthodes Helpers
•Les vues partielles
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Razor 1/2 – La syntaxe
• Excution côté serveur
• @ ou @{ }
• Pour écrire un @ : @@
• Détection automatique du HTML (ou<text></text>)
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Détection automatique du HTML (ou<text></text>)
• @varName ou @ViewBag.VarName
• @if() {}, @foreach(var item in items) {}
Razor 2/2 - Binding
• @model : paramètre dans le helper View (model)
• ViewBag
• TempData
• Session[“keyName”]
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Session[“keyName”]
Les méthodes Helpers 1/2 – L’affichage
• @Html.ActionLink � Permet de créer un lien
• @Html.DisplayNameFor() � Affiche le nom d’une variable
• @Html.DisplayFor() � Affiche le contenu d’une variable
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• @Html.DisplayFor() � Affiche le contenu d’une variable
• @Html.Raw() � Affiche du texte sans les balises HTML
• @Url.Action() � Méthode d’action
Les méthodes Helpers 2/2 – Les formulaires
• @Html.BeginForm() � Permet de créer un formulaire
• @Html.LabelFor() � Créer un label pour un paramètre
• @Html.EditorFor() � Créer un input pour un paramètre
• @Html.ValidationSummary() � Permet d’afficher la liste des
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• @Html.ValidationSummary() � Permet d’afficher la liste des erreurs de saisie
• @Url.ValidationMessageFor() � Permet d’afficher l’erreurliée à un champs spécifique
Les vues partielles
• Par convention : _NomDeLaVuePartielle
• Action avec un retour PartielViewResult
• @Html.Partial() � Si on utilise le même modèle que la classemère
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• @Html.Action() � Si on utilise un modèle indépendant
• @ViewBag et ViewData accessible
Ce qu’on a couvert
•La syntaxe Razor
•Les méthodes permettant de générer :
�Des liens
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
�Des Formulaires
�Des Messages d’erreurs
•La réutilisation du code
Les tests unitaires dans
Tests et débogage d'application Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Les tests unitaires dans une application MVC
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
•Ecrire des tests unitaires avec Visual Studio
•Définir un contexte
•Nuget : Gestionnaire de Package
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• IoC : Ninject
•MOCK : Moq
Ecrire des tests unitaires avec Visual Studio
• Créer un nouveau projet TEST
• Ajouter la référence au projet de TEST
• Utilisation de Assert
• Utilisation de faux objets, Mock (MOQ)
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Utilisation de faux objets, Mock (MOQ)
Définir un contexte
• Créer un contexte pour les tests
• Définir un contexte EF différent
• Utilisation du constructeur pour spécifier un contexte différent
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
différent
• Utilisation de IoC (Ninject)
Nuget : Gestionnaire de Package
• NuGet est un gestionnaire de paquets libres et open source pour le Framework .NET
• NuGet est une extension de Visual Studio
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
IoC : Ninject
• IoC : Inversion of Control
•Faible couplage (facilite les tests)
•Facilite le changement
•IDepencyResolver
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
•IDepencyResolver
IKernel ninjectKernel = new StandardKernel();
ninjectKernel.Bind<IRepository>().To<Repository>()
.WithConstructorArgument("", "");
var rep = ninjectKernel.Get<IRepository>();
rep.Add(maTodo);
Mock : Moq
•Permet de créer de faux objets pour simuler l’application
•Permet de tester le comportement d’autres objets
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Démo
☺
Ce qu’on a couvert
• Les test unitaires
• Assert
• Nuget
• IoC
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• IoC
• Mock
Mettre en place une stratégie de gestion des exceptions
Tests et débogage d'application Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
de gestion des exceptions
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Interception des exceptions
• Enregistrer les exceptions
• Health Monitoring et ELMAH
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Interception des exceptions
• Try; Catch; Finnaly
• Rédéfinition de la méthode OnException
• Utilisation de l’annotation [HandleError]
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� <customErrors mode="On" defaultRedirect="Error" />
Enregistrer les exceptions
• Utilisation des filtres et d’un système de persistance
• Observateur d'événements Windows
• Log4net
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Health Monitoring et ELMAH
• Health Monitoring
� ASP.Net Health monitoring est une méchanisme permettant de créer et configurer un système de log.
• Elmah
Disponible sur Nuget, permet d’enregistrer et de générer un rapport
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Disponible sur Nuget, permet d’enregistrer et de générer un rapport détaillé des différents erreurs levees par votre l’application.
Ce qu’on a couvert
• L’interception des excetpions
• La nécessité d’enregistrer les exceptions
• Health Monitoring et Elmah
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Configurer des chemins d'accès (ROUTAGE)
Structurer des applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
d'accès (ROUTAGE)
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Le moteur de routage ASP.NET MVC
• Configuration du routage
• Passer des paramètres en utilisant le routage
• Test unitaire sur les règles de routage
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Test unitaire sur les règles de routage
Le moteur de routage ASP.NET MVC
• Le routage par default :
http://www.alphorm.com/todo/details/1
Default Route
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Custom routes
• Controller factories
Controller Action ID
• La configuration par défault :
routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } );
• Ajouter une configuration :
Configuration du routage
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Ajouter une configuration :
routes.MapRoute( name: "tâche détail", url: "tache/{id}",
defaults: new { controller = "ToDo", action = "Details" });
Passer des paramètres en utilisant le routage
• Deux choix pour retrouver les données passées en paramètre :
� Binding
� RouteData.Values
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
routes.MapRoute( name: "recherche", url: "tache/{recherche}",
defaults: new { controller = "ToDo", action = "Filtre",
recherche = UrlParameter.Optional });
Test unitaire sur les règles de routage
[TestMethod]
public void Test_Route_Controller()
{
//Arrange
var context = new FakeHttpContextForRouting(
requestUrl: "~/ControllerName");
var routes = new RouteCollection();
Model2Demo.RouteConfig.RegisterRoutes(routes);
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
// Act
RouteData routeData = routes.GetRouteData(context);
// Assert
Assert.AreEqual("ControllerName", routeData.Values["controller"]);
Assert.AreEqual("Index", routeData.Values["action"]);
Assert.AreEqual(UrlParameter.Optional, routeData.Values["id"]);
}
Ce qu’on a couvert
• Le moteur de routage ASP.NET MVC
• Ajouter des routes
• Récupérer les valeurs passes en paramètre
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Utiliser les Layouts et les CSS dans une application MVC
Appliquer des styles aux applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
dans une application MVC
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Qu’est ce qu’un Layout ?
• Utiliser un Layout
• Utiliser les CSS
• Bundle : Minification CSS et JavaScript
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Bundle : Minification CSS et JavaScript
Qu’est ce qu’un Layout ?
• Un Layout c’est la possibilité de partager du contenu entre plusieurs vues. (Création d’un style)
• Comparable au master page dans les projets ASP.NET non MVC
Layout
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Layout
Accueil ToDo Create
Utiliser un Layout
• _ViewStart.cshtml � Défini le Layout par défault des vues
•@{Layout = null;} � Défini une vue sans Layout
•@RenderBody() � à placer à l’endroit ou l’on souhaite le chargement de la vue
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
souhaite le chargement de la vue
•@RenderSection("featured", required: false)
• Convention : un « _ » juste avant le nom du Layout et le mettre dans le dossier Shared.
Utiliser les CSS
• Utilisation classique HTML
• Import classique d’un fichier CSS à l’aide de la balise Link avec «~»
• Utilisation des StyleBundle
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Bundle : Minification CSS et JavaScript
• BundleConfig, deux modes :
� Debug : CSS et JavaScript non minifier
� Release : CSS et JavaScript minifier
•ScriptBundle
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
•ScriptBundle
� Pour les scripts javascript
•StyleBundle
� Pour les styles css
Ce qu’on a couvert
• La création de l’utilisation des Layouts
• RenderSection
• Les Bundles
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Créer une interface en fonction du périphérique
Appliquer des styles aux applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
fonction du périphérique
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Utilisation des CSS Media Queries
• Les templates MVC et vues spécifiques aux mobiles
• Les autres possibilités
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Utilisation des CSS Media Queries
• Responsive Design : CSS3
• Les opérateurs logiques : and, only et not
• Les fonctionnalités : width, height, orientation (portrait ou landscape) etc…
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
landscape) etc…
@media only screen and (max-width: 850px) {
#login {
font-size: .85em;
margin: 0 0 12px;
text-align: center;
}
}
<link rel="stylesheet" media="screen and (max-width: 850px)"
href="~/Content/themes/base/mobile.css" type="text/css" />
Les templates MVC et vues spécifiques aux mobiles
• Les modes disponibles par défault :� Mobile : [view].mobile.cshtml
� WP7 : [view].wp7.cshtml
• La possibilité de créer des modes
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• La possibilité de créer des modes
DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iPhone") {
ContextCondition = (context => context.Request.UserAgent.IndexOf
("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});
Les autres possibilités
• JQuery Mobile
� Installation à travers NuGet : JQuery.Mobile.MVC
� BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
• Bootstrap
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Bootstrap
� Installation à travers NuGet :Twitter.Bootstrap.MVC4
� Pour avoir un exemple : twitter.bootstrap.mvc4.sample
Ce qu’on a couvert
• Les Media Queries
• Vues spécifiques en fonction du périphérique
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Utilisation d'ajax et des mises à jour de page partielle
Concevoir des pages réactives dans les applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
à jour de page partielle
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Rappel du principe de la mise à jour partielle
• Utilisation d’Ajax en MVC4
• Utilisation de l’helper : Ajax.ActionLink
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Rappel du principe de la mise à jour partielle
• Mise à jour partielle de la page
• Allège le chargement d’une page
Requête HTTP
Demande une page ASP.NET MVC
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
HTTP
PAGE HTML
Section à mettre à
jour
Moteur ASP.NET
MVC
Retour une page HTML
Demande de mise à jour d’une section
Retourne le HTML mis à jour
Utilisation d’Ajax en MVC4
• Plusieurs possibilitées :
� Ajax classique : XMLHttpRequest
� JQuery : $.post, $.get ou $.ajax
� Ajax.ActionLink
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Ajax.ActionLink
[HttpGet]
public PartialViewResult ContenuAjax()
{
ViewBag.Message = "Contenu envoyé en ajax";
return PartialView();
}
Utilisation de l’helper : Ajax.ActionLink
• Utilisation des PartialViewResult
• Le helper permet :
� D’obtenir le HTML mis à jour depuis la view partielle
� De mettre à jour la section de destination
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Le tout en une ligne de code côté Razor
@Ajax.ActionLink("Mettre à jour", "ContenuAjax",
new AjaxOptions{
HttpMethod = "GET",
UpdateTargetId = "divMessage",
InsertionMode = InsertionMode.Replace
}
)
Ce qu’on a couvert
• La possibilité de mettre à jour de façon partielle une interface
• Ajax.ActionLink
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Mettre en place une stratégie de cache
Concevoir des pages réactives dans les applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
de cache
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Pourquoi utiliser un système de cache ?
• Le cache de rendu (Output cache)
• Les données en cache (Data cache)
• Le cache HTTP
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Le cache HTTP
Pourquoi utiliser un système de cache ?
• Mettre en cache permet :
� D’améliorer les performances de réponse d’un site Web en réduisant le temps nécessaire à la génération d’une page
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Décharge la charge du serveur en renvoyant un contenu présent en mémoire
Le cache de rendu (Output cache)
• L’Output cache permet de retour le rendu d’une page depuis un cache
[OutputCache(Duration=600)]
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• VaryByParam : [OutputCache(Duration=600, VaryByParam="id"))]
• VaryByCustom : [OutputCache(Duration=600, VaryByCustom=« browser"))]
}
Les données en cache (Data cache)
• Vous pouvez utiliser MemoryCache pour sauvegarder les données en mémoire
• Utilisation de la fonction « AddOrGetExisting »
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
List<Todo> todos =
System.Runtime.Caching.MemoryCache.Default
.AddOrGetExisting("ToDosData", repo.getAll(),
System.DateTime.Now.AddHours(1));
Le cache HTTP
• Le cache du navigateur
• Un proxy pour gérer le cache
• Contrôler le cache côté client en utilisant : HttpCachePolicy.SetCacheability
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
HttpCachePolicy.SetCacheability� Valeur par default, permet d’indiquer que seul le navigateur peut mettre en cache :
� Pas de cache :
Response.Cache.SetCacheability(HttpCacheability.Private);
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Ce qu’on a couvert
• Les différents types de cache
• La possibilitée de contrôler le cache
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Utilisation et exécution du JavaScript
Utilisation de JavaScript et de jQuery pour des applications Web réactives MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
JavaScript
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Ajouter du JavaScript à une page
• Rappel de base
• Les librairies
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Ajouter du JavaScript à une page
• En utilisant la balise « <script>#CONTENU</script> » ( il faut ajouter l’attribut « type=« text/javascript », si le site n’est pas en HTML5
• Peut se mettre dans l’entête (balise : head) ou dans le corps de la page (balise : body)
• Il est possible d’externaliser le code JavaScript dans un fichier externe (local ou distant) en utilisant l’attribut « src »
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
(local ou distant) en utilisant l’attribut « src »
<script>
function HelloWorld() {
// Mon code JS ici !
}
</script>
<script src="~/Scripts/jquery-1.8.2.js"></script>
Rappel de base
• Le JavaScript est :
� Un langage de programmation de scripts (Web ou côté serveur)
� Un langage orienté objet à prototype
� Le Typage ? ☺ <script>
var monInt = 10;
monInt = "10";
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
monInt = "10";
if (monInt == 10)
alert("ok");
else
alert("pas ok !");
</script>
Les librairies
• L’utilisation de librairies extérieures :
� Aide à réduire le code à écrire
� Aide à réduire le temps de Debug (?)
� Aide à rendre l’application plus interactive
• Exemples :
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Exemples :
� Jquery
� Prototype
� Mootools
� YUI
Ce qu’on a couvert
• La gestion du JavaScript par MVC
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Utilisation de JQuery et JQueryUI
Utilisation de JavaScript et de jQuery pour des applications Web réactives MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
JQueryUI
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Présentation de JQuery
• Un peu de syntaxe
• Présentation de Jquery UI
• Démo
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Démo
Présentation de JQuery
• Caractéristiques de JQuery :
� Cross-browser : il gère la compatibilité inter-navigateur
� Système d’extension (JQuery UI, JQuery Mobile, Modules …)
• Plusieurs façons de l’ajouter à nos projets :
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Plusieurs façons de l’ajouter à nos projets :
� Balise script dans sa version originale ou minifiée
� Via les bundles
Un peu de syntaxe 1/2
• Les accesseurs (nom de l’élément, id ou classe)
<script>
$("p").html("salut :)");
$("#monID").html("salut :)");
$(".maClassCSS").html("salut :)");
</script>
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• L’utilisation de document.ready et les événements
</script>
$(document).ready(function () {
console.log("ready!");
});
Un peu de syntaxe 1/2
• Les fonctions incluses dans JQuery :
� La fonction « val », permet de modifier les valeurs HTML d’un élément
� La fonction « css », permet de modifier les styles css
� La fonction « addclass », permet d’ajouter une classe à un élément
� Les fonctions Ajax (.get, .post, .ajax)
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Les fonctions Ajax (.get, .post, .ajax)
• Permet de gérer facilement :
� JSON, XML
� Les événements
Présentation de JQuery UI
• JQuery UI est une librairie qui repose sur JQuery, elle contient :
� Jquery Widgets
Des contrôleurs utilisateurs (Ex. : Auto-complete boxes, date-pickers)
� JQuery Effects
Divers effets de transition, des animations ou encore des effets de slide
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Divers effets de transition, des animations ou encore des effets de slide down/up.
� JQuery Utilities
Permet d’aligner le contenu HTML
Démo
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Démo
Ce qu’on a couvert
• JQuery et JQueryUI dans un projet MVC
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Mettre en place un système d'authentification et
Gestion des droits d'accès aux applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
d'authentification et d'autorisation
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Les différents providers locaux
• L’attribute Authorize et AllowAnonymous
• Connexion depuis Google!, Twitter, FaceBook …
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Les différents providers locaux
• ActiveDirectoryMembershipProvider:
Permet d’utiliser le domaine sur lequel l’application est déployée.
• SqlMembershipProvider:
Utilise un schéma défini et générer à l’aide de l’outil “aspnet_regdb.exe”
• SimpleMembershipProvider:
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• SimpleMembershipProvider:
Provider le plus utilisé en MVC4, il permet de créer un système simple et robuste. Il n’a besoin que de 2 clés, l’id et le nom d’utilisateur. Il s’intègre à n’importe quel schéma de base de données.
• UniversalProviders:
Utilise Entity Framework.
L’attribute Authorize et AllowAnonymous
•Authorize• Permet de restreindre l’accès de l’utilisateur à certaines pages
• Gère les redirections en cas de non autorisation
•AllowAnonymous
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
•AllowAnonymous• Permet d’indiquer qu’une page (controlleur ou action) est accessible de façon anonyme,
sans autorisation.
Connexion depuis Google!, Twitter…
• Modifier la classe static AuthConfig
• Rien de plus !
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Ce qu’on a couvert
• Les memberships
• Les attributs de gestion des droits
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Gestion des rôles et des Membership
Gestion des droits d'accès aux applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Membership
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Les providers
• L’attribute Authorize
• Construire un Custom Role Provider
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Les providers• ActiveDirectoryRoleProvider:
Permet d’utiliser l’Active Directory pour manager les rôles
• SqlRoleProvider:
Identitique à SqlMemberShipProvider, il utilise “aspnet_regdb.exe” pour générer le schéma de base de données
• WindowsTokenRoleprovider:
Utilise l’authentification Windows
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Utilise l’authentification Windows
• SimpleRoleProvider:
Le plus utilisé, fonctionne avec plusieurs types de base de données
• UniversalProviders:
Utilise EntityFramework, mais avec un schéma créé par Microsoft.
L’attribute Authorize
• Les rôles
Les rôles pour lesquels l’action peut être exécutée
• Les utilisateurs
Les utilisateurs pour lesquels l’action peut être exécutée
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Les utilisateurs pour lesquels l’action peut être exécutée
La fonction User.IsInRole()
Construire un Custom Role Provider
• Hériter de la classe « RoleProvider »
• Implémenter les fonctions « GetRolesForUser », « CreateRole »…
• Modifier le fichier « Web.config »
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Ce qu’on a couvert
• La gestion des rôles
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Développer un site sécurisé
Concevoir des applications Web robustes ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Cross-Site Scripting XSS
• Autres préventions
• SSL
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Cross-Site Scripting XSS• Le XSS implique :
� L’insertion du code malveillant dans la session d'un utilisateur
� L’affichage de l'information à d'autres sites Web, à l'insu des utilisateurs concernés
• Vous pouvez empêcher le cross-site scripting en:
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Utilisant la fonction @Ajax.JavaScriptStringEncode
� Utilisant la bibliothèque AntiXSS
@using Microsoft.Security.Application
<div class="messages">@Encoder.JavaScriptEncode(ViewBag.Msg)<div>
<div id="message”
class="messages">@Ajax.JavaScriptStringEncode(ViewBag.Msg)</div>
Autres préventions
• Cross-Site Request Forgery
� Utilisation de @Html.AnfiForgeryToken()
• SQL Injection Attack
Pour empêcher ce genre d’attaques :
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Pour empêcher ce genre d’attaques :
� Valider les données utilisateurs
� Utiliser les procédures pour les données sensibles
� S’assurer que l’application n’accède pas à l’application avec les droits administrateurs
SSL
• Secure Sockets Layer :
� Chiffre contenu en utilisant une clé publique (PKI)
� Protège (crypte) le contenu qui est transmis entre le serveur et le client
� Empêche l'accès de contenu lors de la transmission
� Consiste à utiliser « RequireHttps » pour rediriger les utilisateurs vers une
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Consiste à utiliser « RequireHttps » pour rediriger les utilisateurs vers une liaison SSL (HTTPS)
Ce qu’on a couvert
• La prevention contre les attaques
• Mais cela ne suffit pas …
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Gestion des sessions
Concevoir des applications Web robustes ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Le mot-clé SESSION
• Les différents mécanismes
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Le mot clé SESSION
• Mettre une valeur dans le gestionnaire de session
Session["maSession"] = "Un test !";
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Récupérer la valeur d’une session
<span>Voici le contenu de votre session :
@Session["maSession"]</span>
Les différents mécanismes
• Les différentes méthodes de gestion des sessions :
� Le mode InProc, utilisé par défaut
� Le mode StateServer
� Le mode SQLServer
� Le mode Custom
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Le mode Custom
� Le mode Off
• Configuration dans le fichier web.config
<system.web>
<sessionState mode="InProc" timeout="5" />
</system.web>
Ce qu’on a couvert
• La gestion des sessions
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Introduction à Windows Azure
Utilisation des Web Services Windows Azure dans les applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Azure
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Qu’est ce que Windows Azure ?
• Démo
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Qu’est ce que Windows Azure ?
• La plateforme cloud de Microsoft :
� Création de machine Virtuelle
� Création de Site Web
� Création de Service
� CDN
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� CDN
� Stockage
� Base de données
� Services de média
Ce qu’on a couvert
• Windows Azure
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Créer des services Windows Azure
Utilisation des Web Services Windows Azure dans les applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Azure
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Windows Azure SDK pour .NET
• Création d’un service WCF Web Role Project
• Cycle de vie du service WCF
• Configuration du service WCF
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Configuration du service WCF
• Debug du service WCF
• Utilisation du service WCF
Windows Azure SDK pour .NET• Le SDK Windows Azure facilite :
� La création de projet fondé sur les rôles
� La définition et la configuration des services
• Les « Web Role Project », fournissent des modèles pour les rôles Web suivants:
� ASP.NET Web Forms
� ASP.NET MVC4
� ASP.NET MVC3
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� ASP.NET MVC3
� ASP.NET MVC2
� Service WCF
� Silverlight Business Application
• Le type Projet de « Worker Role », permet la création de projet destiné à s’exécuter en tâche de fond
Création d’un service WCF Web Role Project
• Création du Service WCF
• Renommer l’interface et la classe du Template en IToDo et ToDo
• Définir une méthode permettant de renvoyer une liste de ToDo
• Définir une méthode permettant d’ajouter une ToDo
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Implémenter le service
• Tester le service
Cycle de vie du service WCF
La classe « RoleEntryPoint », permet de définir les différentes actions à effectuer par l’host Azure en fonction du cycle de vie de l’application :
� OnStart
� OnStop
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� OnStop
� Run
Configuration du du service WCF
Deux fichiers permettent la configuration du service WCF :
� ServiceDefinir.csdef :
• Permet de définir les rôles de l’application
� ServiceConfiguration.cscfg :
• Permet de définir le nombre d’instance assigné à votre application
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Permet de définir le nombre d’instance assigné à votre application
• Permet de définir l’environnement sur lequel l’application sera hébergée
Debug du service WCF
Vous pouvez débugger votre application Azure en :
� Les logs de diagnostics
(Il est possible d’utiliser une API)
� IntelliTrace
(Permet l’accès aux logs d’événements et permet le debug de l’application)
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
(Permet l’accès aux logs d’événements et permet le debug de l’application)
� Remote Desktop
� (Accès complet aux logs Windows et accès direct)
Utilisation du service WCF
Appeler le service dans une application:
� Ajouter la reference du service à votre application
� L’url de votre service
http://<urlname>.cloudapp.net/<servicename>.svc
• Ajouter la référence de service à votre application
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Ajouter la référence de service à votre application http://<urlname>.cloudapp.net/<servicename>.svc
• Utiliser la classe proxy générée
• L’appeler en utilisant jQuery
Ce qu’on a couvert
• Le SDK Azure
• L’utilisation des rôles
• Le déploiement d’application Azure
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Mettre en place les Web Api
Implémentation d'API Web dans les applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Qu’est ce que les "Web Api"
• Routage des "Web Api“
• Démonstration
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Qu’est ce que les "Web Api"• WEB Api :
� Permet de créer des Apis de style REST
� Permet de rendre accessible une partie de votre logique métier à des systèmes extérieurs
� Utilise le protocole HTTP (corps et entête)
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Retourne du XML ou JSON
• Les services Restful
� Utilisent les urls pour sélectionner l’action
� Utilisent les entêtes pour passer les paramètres
� Utilisent les entêtes pour retourner le bon format de réponse
Routage des "Web Api"
• Deux possibilités pour le routage :
� Les conventions de nommage du contrôleur Web API
• GET, POST, DELETE, PUT
� L’utilisation du mapping, en utilisant les attributs suivants :
• HttpGET, HttpPut, HttpPost ou HttpDelete
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• HttpGET, HttpPut, HttpPost ou HttpDelete
• L’attribut AcceptVerbs
• L’attribut ActionName
Démonstration
• Ajouter un contrôleur de type Web Api à une application ASP.NET MVC
• Créer des actions
• Appeler l’API depuis un navigateur
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Ce qu’on a couvert
• Les API WEB
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Consommer les Web Api depuis un mobile et une
Implémentation d'API Web dans les applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
depuis un mobile et une application Web
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Trois démonstrations :
� Appel de l’api depuis une application Web côté serveur
� Appel de l’api depuis une page classique en utilisant jQuery
� Appel de l’api depuis une application Windows Phone
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
� Appel de l’api depuis une application Windows Phone
Ce qu’on a couvert
• Consommer les api web
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Utilisation des modules HTTP et des HTTP Handlers
Gestion des requêtes dans les applications Web ASP.NET MVC 4
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
et des HTTP Handlers
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Qu’est ce qu’un Module HTTP ?
• Qu’est ce qu’un Handler HTTP ?
• Création d’un Module et d’un Handler HTTP
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Qu’est ce qu’un Module HTTP ?
• Les modules HTTP agissent sur les différents événements du cycle de vie de toutes les demandes HTTP
• Ils peuvent être utilisé pour gérer la sécurité, les statistiques (logging), modifier les en-têtes ou pieds de page.
Requête
IIS
Aspnet_isapi.dll
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
modifier les en-têtes ou pieds de page.
HttpApplication
HttpHandler
HttpModule
Qu’est ce qu’un Handler HTTP ?
• Répond à des requêtes spécifiques
• Comme les pages ASP.NET (*.aspx), Web Service (*.asmx) etc…
Requête
IIS
Aspnet_isapi.dll
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
HttpApplication
HttpHandler
HttpModule
Création d’un Module et d’un Handler
• Créer un HTTP Module :
� Ajouter la classe « CustomModule »
� Implémenter l’interface « IHttpModule »
� Dans la class CustomModule, implémenter la propriété ModuleName et la fonction Init
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
fonction Init
� Modifier le fichier web.config
Ce qu’on a couvert
• Les modules et les handlers HTTP
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Exercice
Bonus
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Djamel BOUCHOUCHAConsultant .NET et FormateurFormateur WUITS
Contact : [email protected]
Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum
Plan
• Création d’une application
• Publication de l’application
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Création d’une application
• Créer un projet ASP.NET MVC4 de type « internet »
• Ajouter une classe ToDo (contenant au minimum Id, Titre, Description et User)
• Utiliser EntityFramework pour la couche de persistance (ToDo, CodeFirst)
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Ajouter le controller « ToDo » et générées les vues à l’aide VisualStudio
• Ajouter l’api RestFul et activer Odata
Publication de l’application
• Créer un compte sur Windows Azure
• Créer un serveur pour la base de données
• Associé une base de données au serveur
• Créer un site Web
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
• Ajouter la ressource SQL à ce site Web
• Récupérer le fichier de publication
• Publier à l’aide des outils disponibles dans Visual Studio
Ce qu’on a couvert
• Un exercice complet
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©