Présentation de la formation 
Développez des applications 
Web avec ASP.NET MVC 4 
Djamel BOUCHOUCHA 
Consultant .NET et F...
Plan 
• Présentation de votre formateur 
• Présentation de la formation 
• Le plan de la formation 
• Outils nécessaires 
...
Votre formateur 
• Djamel BOUCHOUCHA 
• djamel.bouchoucha@wuits.fr 
• Consultant .NET et formateur 
• Compétences : 
 Web ...
Présentation de la formation 
• Objectif principal : Préparation à la certification 70-486 
• Prérequis : 
 Avoir une prem...
Le plan de la formation 
Module 1 : Introduction à ASP.NET MVC 4 
Module 2 : Conception d'application Web ASP.NET MVC 4 
M...
Le plan de la formation 
Module 9 : Concevoir des pages réactives dans les applications Web ASP.NET MVC 4 
Module 10 : Uti...
Outils nécessaires 
• Un Système d’exploitation Microsoft 
 Windows 7 SP1 
 Windows 8 et 8.1 
 Windows Server 2008 R2 SP1 ...
Liens utilies  références 
• Microsoft ASP.NET MVC 
 http://www.asp.net/mvc 
• Microsoft .NET: 
 www.microsoft.com/net 
• ...
La certification 
• Développez des applications Web avec ASP.NET MVC 4 (70-486) 
 http://www.microsoft.com/learning/en-us/...
Bonne formation ☺ 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Introduction à ASP.NET MVC 4 
Introduction aux 
technologies Web de 
Djamel BOUCHOUCHA 
Consultant .NET et Formateur 
Form...
Plan 
• Présentation des principaux outils web Microsoft 
• Côté serveur 
• Côté client 
• Windows Azure 
Développez des a...
Présentation des différents outils Web MS 
• Développement : 
 Visual Studio 
 WebMatrix 
 MonoDevelop 
• Hosting : 
 Inte...
Côté serveur 
• IIS : Internet Information Services 
 Serveur HTTP (comparable à Apache) 
 Rôle dans Windows Serveur 
 Per...
Côté client 
• Les standards du web : HTML, CSS et JavaScript 
• Les templates ASP.NET, mettent en avant l’utilisation de ...
Ce qu’on a couvert 
• Les outils de développement 
• IIS 
• Windows Azure 
• L’utilisation des standards 
Développez des a...
Introduction à ASP.NET MVC 4 
Introduction à 
ASP.NET 4.5 
Djamel BOUCHOUCHA 
Consultant .NET et Formateur 
Formateur WUIT...
Plan 
•Applications web : 
Web pages 
Web Forms 
MVC 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm....
Web Pages 
•WebMatrix, Visual Studio, Bloc-notes.. 
• Uniquement avec le moteur de vue Razor 
• Le code HTML et le code mé...
Web Forms 
• Visual Studio, MonoDevelop 
• Moteur de vue ASPX 
• Création d’UI à l’aide des boites à outils 
• Binding des...
MVC 
• Visual Studio, MonoDevelop 
• Moteur de vue ASPX ou Razor 
• Pas de boites à outils, uniquement les contrôles HTML ...
Ce qu’on a couvert 
•Applications web : 
Web pages 
Web Forms 
MVC 
Développez des applications Web avec ASP.NET MVC 4 (70...
Introduction à ASP.NET MVC 4 
Introduction à ASP.NET 
MVC 4 
Djamel BOUCHOUCHA 
Consultant .NET et Formateur 
Formateur WU...
Plan 
• MVC : Models, Views, et Controllers 
• MVC dans le Framework .NET 
Développez des applications Web avec ASP.NET MV...
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 a...
Conception d'application Web ASP.NET 
MVC 4 
Préparer les phases 
de conception 
Djamel BOUCHOUCHA 
Consultant .NET et For...
Plan 
• La gestion de projet 
• Les données 
• La couche service 
Développez des applications Web avec ASP.NET MVC 4 (70-4...
La gestion de projet 
• Méthodes : 
 Agile 
 Extreme Programming (XP) 
 Test Driven Development (TDD - développement pilot...
Les données 
• Choix du serveur de base de données : 
 SQL SERVER 
 Oracle 
 MySql 
• Object-relational mapping (ORM) 
 En...
La couche service 
• Choix du fournisseur de service : 
 Web Services 
 WCF 
 RestFul (WebApi) 
Développez des application...
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...
Conception d'application Web ASP.NET 
MVC 4 
Conception des Modèles, 
Contrôleurs et Vues 
Djamel BOUCHOUCHA 
Consultant ....
Plan 
• La conception de la couche Modèle 
• La conception de la couche Contrôleur 
• La conception de la couche Vue 
Déve...
La conception de la couche Modèle 
• Les entités : 
 Simple classe C# 
 Configurer à l’aide d’annotation 
• La persistance...
La conception de la couche Contrôleur 
• Une classe qui hérite de « Controller » 
• Qu’est ce qu’une Action ? 
• POST et G...
La conception de la couche Vue 
• Deux moteurs de rendues : 
 Razor 
 ASPX 
• Plusieurs types de vues : 
Complète 
  Templ...
Ce qu’on a couvert 
• La conception des couches MVC 
• Entity Framework 
• La génération automatique des vues 
Développez ...
Développement de Modèles ASP.NET MVC 4 
Création 
des modèles MVC 
Djamel BOUCHOUCHA 
Consultant .NET et Formateur 
Format...
Plan 
• Création des modèles 
• Liaison de données (Model Binder) 
• Utilisation des annotations pour l’affichage et la va...
Création des modèles 
ToDo 
ToDoID : int 
Ti tle : string 
UserName : string 
Description : string 
Etat : boolean 
Create...
Liaison de données (Model Binder) 
Sans le Model Binder MVC 
public string Index() 
{ 
var todo= new ToDo() { 
Name = Requ...
Utilisation des annotations pour l’affichage et la validation des données 
public class ToDo 
{ 
public int ToDoID { get; ...
Créer son propre système de validation des données 
[AttributeUsage(AttributeTargets.Field)] 
public class LargerThanValid...
Ce qu’on a couvert 
• La création de modèle à l’aides annotations 
• Le binding du model avec le contrôleur 
• La possibil...
Développement de Modèles ASP.NET MVC 4 
Travailler 
avec les données 
Djamel BOUCHOUCHA 
Consultant .NET et Formateur 
For...
Plan 
• Connexion à une base de données 
• Entity Framework 
• Définir un context pour Entity Framework 
• Utiliser LINQ t...
Connexion à une base de données 
• Pour configurer l’accès à une base de données il y a deux étapes : 
 Ajouter la DLL Sys...
Entity Framework 
• Trois configurations possibles pour EF 
 Database First 
 Model First 
 Code First 
• Pour Model First...
Définir un context pour Entity Framework 
• Le contexte EF est juste une classe qui détermine les entités manipulés 
• Il ...
Utiliser LINQ to Entities 
• LINQ to Entities est une version de LINQ qui fonctionne avec EF 
• Sample LINQ Query: 
var to...
Démo 
• Nous allons : 
 Ajouter une connexion à une base de donnée dans le fichier web.conf 
 Installer et configurer Enti...
Ce qu’on a couvert 
• La configuration de l’accès à une base de données en passant par le 
fichier web.conf 
• Entity Fram...
Développement de Contrôleurs ASP.NET MVC 4 
Créer des contrôleurs 
et leurs actions 
Djamel BOUCHOUCHA 
Consultant .NET et...
Plan 
• Répondre aux requêtes utilisateurs à l’aide des Actions 
• Passer des paramètres aux « Vues » 
• Qu’est-ce que le ...
Répondre aux requêtes utilisateur à l’aide des Actions 
• Création d’un contrôleur et de ses actions: 
 Création d’une act...
Les paramètres d’actions 
Le DefaultModelBinder permet d’obtenir le titre passé en paramètre de la query 
string et le tra...
Passé des paramètres aux vues 
• Pour transmettre des paramètres aux vues vous avez trois possibilités : 
 “View()“ méthod...
Qu’est-ce le « Controller Factory » 
 Permet d’implémenter son propre gestionnaire de 
contrôleur (DefaultControllerFactor...
Démo 
 En utilisant le projet ToDo nous allons : 
• Créer un Controller Factory 
• Créer les 4 méthodes CRUD (Create, Read...
Ce qu’on a couvert 
• La création de contrôleur et d’action 
• Le passage de paramètre (ViewBag) 
• Controller Factory 
Dé...
Développement de Contrôleurs ASP.NET MVC 4 
Utiliser les filtres 
Djamel BOUCHOUCHA 
Consultant .NET et Formateur 
Formate...
Plan 
•Qu’est ce qu’un filtre ? 
•Créer et utiliser les filtres d’actions 
Développez des applications Web avec ASP.NET MV...
Qu’est ce qu’un filtre ? 
 Certaines actions doivent être exécutée à des moments spécifiques : 
• Les autorisations 
• Les...
Créer et utiliser les filtres 
• Pour les filtres de type : 
• Autorisation : AuthorizeAttribute 
• Action et Result : Act...
Ce qu’on a couvert 
• Les types de filtre 
•Créer et utiliser les filtres 
Développez des applications Web avec ASP.NET MV...
Développement de Vues ASP.NET MVC 4 
Créer des vues avec 
Razor 
Djamel BOUCHOUCHA 
Consultant .NET et Formateur 
Formateu...
Plan 
•Présentation de Razor 
• Les méthodes Helpers 
• Les vues partielles 
Développez des applications Web avec ASP.NET ...
Razor 1/2 – La syntaxe 
• Excution côté serveur 
• @ ou @{ } 
• Pour écrire un @ : @@ 
• Détection automatique du HTML (ou...
Razor 2/2 - Binding 
• @model : paramètre dans le helper View (model) 
• ViewBag 
• TempData 
• Session[“keyName”] 
Dévelo...
Les méthodes Helpers 1/2 – L’affichage 
• @Html.ActionLink Permet de créer un lien 
•@Html.DisplayNameFor()  Affiche le no...
Les méthodes Helpers 2/2 – Les formulaires 
• @Html.BeginForm()  Permet de créer un formulaire 
•@Html.LabelFor()  Créer u...
Les vues partielles 
• Par convention : _NomDeLaVuePartielle 
• Action avec un retour PartielViewResult 
• @Html.Partial()...
Ce qu’on a couvert 
• La syntaxe Razor 
• Les méthodes permettant de générer : 
Des liens 
Des Formulaires 
Des Messages d...
Tests et débogage d'application Web ASP.NET 
MVC 4 
Les tests unitaires dans 
une application MVC 
Djamel BOUCHOUCHA 
Cons...
Plan 
•Ecrire des tests unitaires avec Visual Studio 
•Définir un contexte 
•Nuget : Gestionnaire de Package 
• IoC : Ninj...
Ecrire des tests unitaires avec Visual Studio 
• Créer un nouveau projet TEST 
• Ajouter la référence au projet de TEST 
•...
Définir un contexte 
• Créer un contexte pour les tests 
• Définir un contexte EF différent 
• Utilisation du constructeur...
Nuget : Gestionnaire de Package 
• NuGet est un gestionnaire de paquets libres et open 
source pour le Framework .NET 
• N...
IoC : Ninject 
• IoC : Inversion of Control 
•Faible couplage (facilite les tests) 
•Facilite le changement 
•IDepencyReso...
Mock : Moq 
•Permet de créer de faux objets pour simuler 
l’application 
•Permet de tester le comportement d’autres objets...
Ce qu’on a couvert 
• Les test unitaires 
• Assert 
• Nuget 
• IoC 
•Mock 
Développez des applications Web avec ASP.NET MV...
Tests et débogage d'application Web ASP.NET 
MVC 4 
Mettre en place une stratégie 
de gestion des exceptions 
Djamel BOUCH...
Plan 
• Interception des exceptions 
• Enregistrer les exceptions 
• Health Monitoring et ELMAH 
Développez des applicatio...
Interception des exceptions 
• Try; Catch; Finnaly 
• Rédéfinition de la méthode OnException 
• Utilisation de l’annotatio...
Enregistrer les exceptions 
• Utilisation des filtres et d’un système de persistance 
• Observateur d'événements Windows 
...
Health Monitoring et ELMAH 
• Health Monitoring 
 ASP.Net Health monitoring est une méchanisme permettant de créer et 
con...
Ce qu’on a couvert 
• L’interception des excetpions 
• La nécessité d’enregistrer les exceptions 
• Health Monitoring et E...
Structurer des applications Web ASP.NET MVC 4 
Configurer des chemins 
d'accès (ROUTAGE) 
Djamel BOUCHOUCHA 
Consultant .N...
Plan 
• Le moteur de routage ASP.NET MVC 
• Configuration du routage 
• Passer des paramètres en utilisant le routage 
• T...
Le moteur de routage ASP.NET MVC 
• Le routage par default : 
http://www.alphorm.com/todo/details/1 
Default Route 
Contro...
Configuration du routage 
• La configuration par défault : 
routes.MapRoute( name: Default, url: {controller}/{action}/{id...
Passer des paramètres en utilisant le routage 
• Deux choix pour retrouver les données passées en 
paramètre : 
 Binding 
...
Test unitaire sur les règles de routage 
[TestMethod] 
public void Test_Route_Controller() 
{ 
//Arrange 
var context = ne...
Ce qu’on a couvert 
• Le moteur de routage ASP.NET MVC 
• Ajouter des routes 
• Récupérer les valeurs passes en paramètre ...
Appliquer des styles aux applications Web 
ASP.NET MVC 4 
Utiliser les Layouts et les CSS 
dans une application MVC 
Djame...
Plan 
• Qu’est ce qu’un Layout ? 
• Utiliser un Layout 
• Utiliser les CSS 
• Bundle : Minification CSS et JavaScript 
Dév...
Qu’est ce qu’un Layout ? 
• Un Layout c’est la possibilité de partager du contenu entre 
plusieurs vues. (Création d’un st...
Utiliser un Layout 
• _ViewStart.cshtml  Défini le Layout par défault des vues 
•@{Layout = null;}  Défini une vue sans La...
Utiliser les CSS 
• Utilisation classique HTML 
• Import classique d’un fichier CSS à l’aide de la balise Link avec «~» 
•...
Bundle : Minification CSS et JavaScript 
• BundleConfig, deux modes : 
 Debug : CSS et JavaScript non minifier 
 Release :...
Ce qu’on a couvert 
• La création de l’utilisation des Layouts 
• RenderSection 
• Les Bundles 
Développez des application...
Appliquer des styles aux applications Web 
ASP.NET MVC 4 
Créer une interface en 
fonction du périphérique 
Djamel BOUCHOU...
Plan 
• Utilisation des CSS Media Queries 
• Les templates MVC et vues spécifiques aux mobiles 
• Les autres possibilités ...
Utilisation des CSS Media Queries 
• Responsive Design : CSS3 
• Les opérateurs logiques : and, only et not 
• Les fonctio...
Les templates MVC et vues spécifiques aux mobiles 
• Les modes disponibles par défault : 
 Mobile : [view].mobile.cshtml 
...
Les autres possibilités 
• JQuery Mobile 
 Installation à travers NuGet : JQuery.Mobile.MVC 
 BundleMobileConfig.RegisterB...
Ce qu’on a couvert 
• Les Media Queries 
• Vues spécifiques en fonction du périphérique 
Développez des applications Web a...
Concevoir des pages réactives dans les 
applications Web ASP.NET MVC 4 
Utilisation d'ajax et des mises 
à jour de page pa...
Plan 
• Rappel du principe de la mise à jour partielle 
• Utilisation d’Ajax en MVC4 
• Utilisation de l’helper : Ajax.Act...
Rappel du principe de la mise à jour partielle 
•Mise à jour partielle de la page 
• Allège le chargement d’une page 
Requ...
Utilisation d’Ajax en MVC4 
• Plusieurs possibilitées : 
 Ajax classique : XMLHttpRequest 
 JQuery : $.post, $.get ou $.aj...
Utilisation de l’helper : Ajax.ActionLink 
• Utilisation des PartialViewResult 
• Le helper permet : 
 D’obtenir le HTML m...
Ce qu’on a couvert 
• La possibilité de mettre à jour de façon partielle une 
interface 
• Ajax.ActionLink 
Développez des...
Concevoir des pages réactives dans les 
applications Web ASP.NET MVC 4 
Mettre en place une stratégie 
de cache 
Djamel BO...
Plan 
• Pourquoi utiliser un système de cache ? 
• Le cache de rendu (Output cache) 
• Les données en cache (Data cache) 
...
Pourquoi utiliser un système de cache ? 
•Mettre en cache permet : 
 D’améliorer les performances de réponse d’un site Web...
Le cache de rendu (Output cache) 
• L’Output cache permet de retour le rendu d’une page 
depuis un cache 
[OutputCache(Dur...
Les données en cache (Data cache) 
• Vous pouvez utiliser MemoryCache pour sauvegarder les 
données en mémoire 
• Utilisat...
Le cache HTTP 
• Le cache du navigateur 
• Un proxy pour gérer le cache 
• Contrôler le cache côté client en utilisant : 
...
Ce qu’on a couvert 
• Les différents types de cache 
• La possibilitée de contrôler le cache 
Développez des applications ...
Utilisation de JavaScript et de jQuery pour des 
applications Web réactives MVC 4 
Utilisation et exécution du 
JavaScript...
Plan 
• Ajouter du JavaScript à une page 
• Rappel de base 
• Les librairies 
Développez des applications Web avec ASP.NET...
Ajouter du JavaScript à une page 
• En utilisant la balise « script#CONTENU/script » ( il faut ajouter 
l’attribut « type=...
Rappel de base 
• Le JavaScript est : 
 Un langage de programmation de scripts (Web ou côté serveur) 
 Un langage orienté ...
Les librairies 
• L’utilisation de librairies extérieures : 
 Aide à réduire le code à écrire 
 Aide à réduire le temps de...
Ce qu’on a couvert 
• La gestion du JavaScript par MVC 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphor...
Utilisation de JavaScript et de jQuery pour des 
applications Web réactives MVC 4 
Utilisation de JQuery et 
JQueryUI 
Dja...
Plan 
• Présentation de JQuery 
• Un peu de syntaxe 
• Présentation de Jquery UI 
• Démo 
Développez des applications Web ...
Présentation de JQuery 
• Caractéristiques de JQuery : 
 Cross-browser : il gère la compatibilité inter-navigateur 
 Systè...
Un peu de syntaxe 1/2 
• Les accesseurs (nom de l’élément, id ou classe) 
script 
$(p).html(salut :)); 
$(#monID).html(sal...
Un peu de syntaxe 1/2 
• Les fonctions incluses dans JQuery : 
 La fonction « val », permet de modifier les valeurs HTML d...
Présentation de JQuery UI 
• JQuery UI est une librairie qui repose sur JQuery, elle contient : 
 Jquery Widgets 
Des cont...
Démo 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Ce qu’on a couvert 
• JQuery et JQueryUI dans un projet MVC 
Développez des applications Web avec ASP.NET MVC 4 (70-486) a...
Gestion des droits d'accès aux applications Web 
ASP.NET MVC 4 
Mettre en place un système 
d'authentification et 
Djamel ...
Plan 
• Les différents providers locaux 
• L’attribute Authorize et AllowAnonymous 
• Connexion depuis Google!, Twitter, F...
Les différents providers locaux 
• ActiveDirectoryMembershipProvider: 
Permet d’utiliser le domaine sur lequel l’applicati...
L’attribute Authorize et AllowAnonymous 
•Authorize 
• Permet de restreindre l’accès de l’utilisateur à certaines pages 
•...
Connexion depuis Google!, Twitter… 
• Modifier la classe static AuthConfig 
• Rien de plus ! 
Développez des applications ...
Ce qu’on a couvert 
• Les memberships 
• Les attributs de gestion des droits 
Développez des applications Web avec ASP.NET...
Gestion des droits d'accès aux applications Web 
ASP.NET MVC 4 
Gestion des rôles et des 
Membership 
Djamel BOUCHOUCHA 
C...
Plan 
• Les providers 
• L’attribute Authorize 
• Construire un Custom Role Provider 
Développez des applications Web avec...
Les providers 
• ActiveDirectoryRoleProvider: 
Permet d’utiliser l’Active Directory pour manager les rôles 
• SqlRoleProvi...
L’attribute Authorize 
• Les rôles 
Les rôles pour lesquels l’action peut être exécutée 
• Les utilisateurs 
Les utilisate...
Construire un Custom Role Provider 
• Hériter de la classe « RoleProvider » 
• Implémenter les fonctions « GetRolesForUser...
Ce qu’on a couvert 
• La gestion des rôles 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Concevoir des applications Web robustes 
ASP.NET MVC 4 
Développer un site sécurisé 
Djamel BOUCHOUCHA 
Consultant .NET et...
Plan 
• Cross-Site Scripting XSS 
• Autres préventions 
• SSL 
Développez des applications Web avec ASP.NET MVC 4 (70-486)...
Cross-Site Scripting XSS 
• Le XSS implique : 
 L’insertion du code malveillant dans la session d'un utilisateur 
 L’affic...
Autres préventions 
• Cross-Site Request Forgery 
 Utilisation de @Html.AnfiForgeryToken() 
• SQL Injection Attack 
• Pour...
SSL 
• Secure Sockets Layer : 
 Chiffre contenu en utilisant une clé publique (PKI) 
 Protège (crypte) le contenu qui est ...
Ce qu’on a couvert 
• La prevention contre les attaques 
•Mais cela ne suffit pas … 
Développez des applications Web avec ...
Concevoir des applications Web robustes 
ASP.NET MVC 4 
Gestion des sessions 
Djamel BOUCHOUCHA 
Consultant .NET et Format...
Plan 
• Le mot-clé SESSION 
• Les différents mécanismes 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alpho...
Le mot clé SESSION 
• Mettre une valeur dans le gestionnaire de session 
Session[maSession] = Un test !; 
• Récupérer la v...
Les différents mécanismes 
• Les différentes méthodes de gestion des sessions : 
 Le mode InProc, utilisé par défaut 
 Le ...
Ce qu’on a couvert 
• La gestion des sessions 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Utilisation des Web Services Windows Azure 
dans les applications Web ASP.NET MVC 4 
Introduction à Windows 
Azure 
Djamel...
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 queWindows Azure ? 
• La plateforme cloud de Microsoft : 
 Création de machine Virtuelle 
 Création de Site Web ...
Ce qu’on a couvert 
•Windows Azure 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Utilisation des Web Services Windows Azure 
dans les applications Web ASP.NET MVC 4 
Créer des services Windows 
Azure 
Dj...
Plan 
•Windows Azure SDK pour .NET 
• Création d’un service WCF Web Role Project 
• Cycle de vie du service WCF 
• Configu...
Windows Azure SDK pour .NET 
• Le SDK Windows Azure facilite : 
 La création de projet fondé sur les rôles 
 La définition...
Création d’un service WCF Web Role Project 
• Création du Service WCF 
• Renommer l’interface et la classe du Template en ...
Cycle de vie du service WCF 
La classe « RoleEntryPoint », permet de définir les différentes 
actions à effectuer par l’ho...
Configuration du du service WCF 
Deux fichiers permettent la configuration du service WCF : 
 ServiceDefinir.csdef : 
• Pe...
Debug du service WCF 
Vous pouvez débugger votre application Azure en : 
 Les logs de diagnostics 
(Il est possible d’util...
Utilisation du service WCF 
Appeler le service dans une application: 
 Ajouter la reference du service à votre application...
Ce qu’on a couvert 
• Le SDK Azure 
• L’utilisation des rôles 
• Le déploiement d’application Azure 
Développez des applic...
Implémentation d'API Web dans les applications 
Web ASP.NET MVC 4 
Mettre en place les Web Api 
Djamel BOUCHOUCHA 
Consult...
Plan 
• Qu’est ce que les Web Api 
• Routage des Web Api“ 
• Démonstration 
Développez des applications Web avec ASP.NET M...
Qu’est ce que les Web Api 
• WEB Api : 
 Permet de créer des Apis de style REST 
 Permet de rendre accessible une partie d...
Routage des Web Api 
• Deux possibilités pour le routage : 
 Les conventions de nommage du contrôleur Web API 
• GET, POST...
Démonstration 
• Ajouter un contrôleur de type Web Api à une application ASP.NET MVC 
• Créer des actions 
• Appeler l’API...
Ce qu’on a couvert 
• Les API WEB 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Implémentation d'API Web dans les applications 
Web ASP.NET MVC 4 
Consommer les Web Api 
depuis un mobile et une 
Djamel ...
Plan 
• Trois démonstrations : 
 Appel de l’api depuis une application Web côté serveur 
 Appel de l’api depuis une page c...
Ce qu’on a couvert 
• Consommer les api web 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Gestion des requêtes dans les applications Web 
ASP.NET MVC 4 
Utilisation des modules HTTP 
et des HTTP Handlers 
Djamel ...
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éve...
Qu’est ce qu’unModule HTTP ? 
• Les modules HTTP agissent sur les 
différents événements du cycle de vie de 
toutes les de...
Qu’est ce qu’un Handler HTTP ? 
• Répond à des requêtes spécifiques 
• Comme les pages ASP.NET (*.aspx), Web 
Service (*.a...
Création d’un Module et d’un Handler 
• Créer un HTTP Module : 
 Ajouter la classe « CustomModule » 
 Implémenter l’interf...
Ce qu’on a couvert 
• Les modules et les handlers HTTP 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphor...
Bonus 
Exercice 
Djamel BOUCHOUCHA 
Consultant .NET et Formateur 
Formateur WUITS 
Contact : djamel.b@wuits.fr 
Site : htt...
Plan 
• Création d’une application 
• Publication de l’application 
Développez des applications Web avec ASP.NET MVC 4 (70...
Création d’une application 
• Créer un projet ASP.NET MVC4 de type « internet » 
• Ajouter une classe ToDo (contenant au m...
Publication de l’application 
• Créer un compte sur Windows Azure 
• Créer un serveur pour la base de données 
• Associé u...
Ce qu’on a couvert 
• Un exercice complet 
Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
Prochain SlideShare
Chargement dans…5
×

alphorm.com - Formation Développez des applications Web avec ASP.NET MVC 4(70-486)

18 055 vues

Publié le

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 "

Publié dans : Technologie
0 commentaire
11 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
18 055
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11 843
Actions
Partages
0
Téléchargements
289
Commentaires
0
J’aime
11
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

alphorm.com - Formation Développez des applications Web avec ASP.NET MVC 4(70-486)

  1. 1. Présentation de la formation Développez des applications Web avec ASP.NET MVC 4 Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.bouchoucha@wuits.fr (70-486) Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  2. 2. Plan • Présentation de votre formateur • Présentation de la formation • Le plan de la formation • Outils nécessaires • Liens utiles & références • La certification Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  3. 3. Votre formateur • Djamel BOUCHOUCHA • djamel.bouchoucha@wuits.fr • Consultant .NET et formateur • Compétences : 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/ Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  4. 4. 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) • 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 Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  5. 5. 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 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 Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  6. 6. Le plan de la formation Module 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 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 Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  7. 7. 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) • Le framework .NET 4.5 • Visual Studio 2012 • Optionnel : un compte Windows Azure Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  8. 8. 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 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 Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  9. 9. 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 certification.• Second Shot http://bsf01.com/Microsoft_Vouchers/SecondShot.aspx • Prometric http://www.register.prometric.com/ Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  10. 10. Bonne formation ☺ Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  11. 11. Introduction à ASP.NET MVC 4 Introduction aux technologies Web de Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Microsoft Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  12. 12. 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™©
  13. 13. Présentation des différents outils Web MS • Développement : Visual Studio WebMatrix MonoDevelop • Hosting : Internet Information Services Windows Azure • Exécution côté serveur : ASP.NET • Exécution côté client : JavaScript, JQuery .. Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  14. 14. 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 Cloud Microsoft Sites Web, Services, Base de données … • Le framework .NET Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  15. 15. Côté client • 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 L’adaptation des sites sur Mobile • Silverlight Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  16. 16. 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™©
  17. 17. Introduction à ASP.NET MVC 4 Introduction à ASP.NET 4.5 Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  18. 18. Plan •Applications web : Web pages Web Forms MVC Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  19. 19. 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™©
  20. 20. Web Forms • Visual Studio, MonoDevelop • Moteur de vue ASPX • Création d’UI à l’aide des boites à outils • Binding des contrôles • Le code HTML et le code métier sont dans deux fichiers séparés (.aspx et aspx.cs) Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  21. 21. 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 • La couche vue génère les interfaces utilisateurs Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  22. 22. 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™©
  23. 23. Introduction à ASP.NET MVC 4 Introduction à ASP.NET MVC 4 Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  24. 24. 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™©
  25. 25. MVC : Models, Views, and Controllers Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  26. 26. MVC dans le Framework .NET Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  27. 27. 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™©
  28. 28. Conception d'application Web ASP.NET MVC 4 Préparer les phases de conception Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  29. 29. 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™©
  30. 30. La gestion de projet • Méthodes : Agile Extreme Programming (XP) Test Driven Development (TDD - développement piloté par les tests) • 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 .. Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  31. 31. Les données • Choix du serveur de base de données : SQL SERVER Oracle MySql • Object-relational mapping (ORM) Entity Framework Nhibernate Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  32. 32. 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™©
  33. 33. 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™©
  34. 34. Conception d'application Web ASP.NET MVC 4 Conception des Modèles, Contrôleurs et Vues Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  35. 35. 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™©
  36. 36. La conception de la couche Modèle • Les entités : Simple classe C# Configurer à l’aide d’annotation • La persistance : ADO.NET ORM (Entity Framework, NHibernate…) • Entity Framework : Génération automatique des vues et des entités Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  37. 37. 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 • Sécurité Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  38. 38. La conception de la couche Vue • Deux moteurs de rendues : Razor ASPX • Plusieurs types de vues : Complète Template Partiel Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  39. 39. 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™©
  40. 40. Développement de Modèles ASP.NET MVC 4 Création des modèles MVC Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  41. 41. 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™©
  42. 42. Création des modèles ToDo ToDoID : int Ti tle : string UserName : string Description : string Etat : boolean CreatedDate : object UpdatedDate : object public class ToDo { Comment CommentID : int UserName : string Subject : string Body : string CreatedDate : object UpdatedDate : object 1 0..* 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 ICollectionComment 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; } } Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  43. 43. 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 { }; … • 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 }; Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  44. 44. 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(.+@.+..+)] public string Description { get; set; } [DataType(DataType.DateTime)] [DisplayName(Created Date)] public string EmailAddress { get; set; } } [DisplayFormat(DataFormatString = {0:yyyy/MM/dd}, ApplyFormatInEditMode = true)] public DateTime CreatedDate { get; set; } public string UserName { get; set; } public virtual ICollectionComment Comments { get; set; } } Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  45. 45. 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; } public override Boolean IsValid(Object value) { var valueToCompare = (int)value; if (valueToCompare MinimumValue) { return true; } else { return false; } } } Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  46. 46. 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™©
  47. 47. Développement de Modèles ASP.NET MVC 4 Travailler avec les données Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  48. 48. Plan • Connexion à une base de données • Entity Framework • Définir un context pour Entity Framework • Utiliser LINQ to Entities • Démo Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  49. 49. 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 Source=.SQLEXPRESS;Initial Catalog=DoToDB;Integrated Security=SSPI providerName=System.Data.SqlClient/ /connectionStrings Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  50. 50. Entity Framework • Trois configurations possibles pour EF Database First Model First Code First • 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éveloppez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  51. 51. 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 DbSetToDo ToDos { get; set; } public DbSetComment Comments { get; set; } } Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  52. 52. 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 select t).Take(number).ToList(); Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  53. 53. 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™©
  54. 54. 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™©
  55. 55. Développement de Contrôleurs ASP.NET MVC 4 Créer des contrôleurs et leurs actions Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  56. 56. 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™©
  57. 57. 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 public ActionResult First () { ToDo firstToDo= context.ToDos.ToList()[0]; if (firstToDo != null) { return View(Details, firstToDo); } else { return HttpNotFound(); } } Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  58. 58. Les paramètres d’actions Le DefaultModelBinder permet d’obtenir le titre passé en paramètre de la query string et le transmetre automatiquement à la méthode GetToDoByTitle http://www.alphorm.com/ToDo/gettodobytitle?title=myfirsttodo DefaultModelBinder 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 ); } Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  59. 59. 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 ViewBag depuis MVC3, elle reste utilisable pour assurer la rétrocompatibilité Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  60. 60. Qu’est-ce le « Controller Factory » Permet d’implémenter son propre gestionnaire de contrôleur (DefaultControllerFactory) Le gestionnaire doit hériter de IControllerFactory La classe doit être instancié dans le fichier Global.asax Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  61. 61. 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™©
  62. 62. 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™©
  63. 63. Développement de Contrôleurs ASP.NET MVC 4 Utiliser les filtres Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  64. 64. 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™©
  65. 65. 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 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 Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  66. 66. Créer et utiliser les filtres • Pour les filtres de type : • Autorisation : AuthorizeAttribute • Action et Result : ActionFilterAttribute • Exception : HandleErrorAttribute 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); } } Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  67. 67. 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™©
  68. 68. Développement de Vues ASP.NET MVC 4 Créer des vues avec Razor Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  69. 69. 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™©
  70. 70. Razor 1/2 – La syntaxe • Excution côté serveur • @ ou @{ } • Pour écrire un @ : @@ • Détection automatique du HTML (outext/text) • @varName ou @ViewBag.VarName • @if() {}, @foreach(var item in items) {} Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  71. 71. 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™©
  72. 72. 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 • @Html.Raw() Affiche du texte sans les balises HTML • @Url.Action() Méthode d’action Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  73. 73. 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 erreurs de saisie • @Url.ValidationMessageFor() Permet d’afficher l’erreur liée à un champs spécifique Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  74. 74. Les vues partielles • Par convention : _NomDeLaVuePartielle • Action avec un retour PartielViewResult • @Html.Partial() Si on utilise le même modèle que la classe mère • @Html.Action() Si on utilise un modèle indépendant • @ViewBag et ViewData accessible Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  75. 75. Ce qu’on a couvert • La syntaxe Razor • Les méthodes permettant de générer : Des liens Des Formulaires Des Messages d’erreurs • La réutilisation du code Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  76. 76. Tests et débogage d'application Web ASP.NET MVC 4 Les tests unitaires dans une application MVC Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  77. 77. Plan •Ecrire des tests unitaires avec Visual Studio •Définir un contexte •Nuget : Gestionnaire de Package • IoC : Ninject •MOCK : Moq Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  78. 78. 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™©
  79. 79. 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 • Utilisation de IoC (Ninject) Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  80. 80. 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™©
  81. 81. IoC : Ninject • IoC : Inversion of Control •Faible couplage (facilite les tests) •Facilite le changement •IDepencyResolver IKernel ninjectKernel = new StandardKernel(); ninjectKernel.BindIRepository().ToRepository() .WithConstructorArgument(, ); var rep = ninjectKernel.GetIRepository(); rep.Add(maTodo); Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  82. 82. Mock : Moq •Permet de créer de faux objets pour simuler l’application •Permet de tester le comportement d’autres objets Démo ☺ Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  83. 83. Ce qu’on a couvert • Les test unitaires • Assert • Nuget • IoC •Mock Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  84. 84. Tests et débogage d'application Web ASP.NET MVC 4 Mettre en place une stratégie de gestion des exceptions Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  85. 85. 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™©
  86. 86. Interception des exceptions • Try; Catch; Finnaly • Rédéfinition de la méthode OnException • Utilisation de l’annotation [HandleError] customErrors mode=On defaultRedirect=Error / Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  87. 87. 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™©
  88. 88. 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étaillé des différents erreurs levees par votre l’application. Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  89. 89. 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™©
  90. 90. Structurer des applications Web ASP.NET MVC 4 Configurer des chemins d'accès (ROUTAGE) Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  91. 91. 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™©
  92. 92. Le moteur de routage ASP.NET MVC • Le routage par default : http://www.alphorm.com/todo/details/1 Default Route Controller Action ID • Custom routes • Controller factories Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  93. 93. Configuration du routage • 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 : routes.MapRoute( name: tâche détail, url: tache/{id}, defaults: new { controller = ToDo, action = Details }); Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  94. 94. Passer des paramètres en utilisant le routage • Deux choix pour retrouver les données passées en paramètre : Binding RouteData.Values routes.MapRoute( name: recherche, url: tache/{recherche}, defaults: new { controller = ToDo, action = Filtre, recherche = UrlParameter.Optional }); Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  95. 95. 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); // 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]); } Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  96. 96. 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™©
  97. 97. Appliquer des styles aux applications Web ASP.NET MVC 4 Utiliser les Layouts et les CSS dans une application MVC Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  98. 98. 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™©
  99. 99. 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 Accueil ToDo Create Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  100. 100. 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 •@RenderSection(featured, required: false) • Convention : un « _ » juste avant le nom du Layout et le mettre dans le dossier Shared. Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  101. 101. 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™©
  102. 102. Bundle : Minification CSS et JavaScript • BundleConfig, deux modes : Debug : CSS et JavaScript non minifier Release : CSS et JavaScript minifier •ScriptBundle Pour les scripts javascript •StyleBundle Pour les styles css Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  103. 103. 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™©
  104. 104. Appliquer des styles aux applications Web ASP.NET MVC 4 Créer une interface en fonction du périphérique Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  105. 105. 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™©
  106. 106. 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… @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 / Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  107. 107. 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 DisplayModes.Modes.Insert(0, new DefaultDisplayMode(iPhone) { ContextCondition = (context = context.Request.UserAgent.IndexOf (iPhone, StringComparison.OrdinalIgnoreCase) = 0) }); Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  108. 108. Les autres possibilités • JQuery Mobile Installation à travers NuGet : JQuery.Mobile.MVC BundleMobileConfig.RegisterBundles(BundleTable.Bundles); • Bootstrap Installation à travers NuGet :Twitter.Bootstrap.MVC4 Pour avoir un exemple : twitter.bootstrap.mvc4.sample Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  109. 109. 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™©
  110. 110. Concevoir des pages réactives dans les applications Web ASP.NET MVC 4 Utilisation d'ajax et des mises à jour de page partielle Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  111. 111. 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™©
  112. 112. 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 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 Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  113. 113. Utilisation d’Ajax en MVC4 • Plusieurs possibilitées : Ajax classique : XMLHttpRequest JQuery : $.post, $.get ou $.ajax Ajax.ActionLink [HttpGet] public PartialViewResult ContenuAjax() { ViewBag.Message = Contenu envoyé en ajax; return PartialView(); } Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  114. 114. 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 Le tout en une ligne de code côté Razor @Ajax.ActionLink(Mettre à jour, ContenuAjax, new AjaxOptions{ HttpMethod = GET, UpdateTargetId = divMessage, InsertionMode = InsertionMode.Replace } ) Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  115. 115. 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™©
  116. 116. Concevoir des pages réactives dans les applications Web ASP.NET MVC 4 Mettre en place une stratégie de cache Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  117. 117. 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™©
  118. 118. 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écharge la charge du serveur en renvoyant un contenu présent en mémoire Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  119. 119. 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(); } • VaryByParam : [OutputCache(Duration=600, VaryByParam=id))] • VaryByCustom : [OutputCache(Duration=600, VaryByCustom=« browser))] Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  120. 120. Les données en cache (Data cache) • Vous pouvez utiliser MemoryCache pour sauvegarder les données en mémoire • Utilisation de la fonction « AddOrGetExisting » ListTodo todos = System.Runtime.Caching.MemoryCache.Default .AddOrGetExisting(ToDosData, repo.getAll(), System.DateTime.Now.AddHours(1)); Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  121. 121. 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 Valeur par default, permet d’indiquer que seul le navigateur peut mettre en cache : Response.Cache.SetCacheability(HttpCacheability.Private); Pas de cache : Response.Cache.SetCacheability(HttpCacheability.NoCache); Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  122. 122. 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™©
  123. 123. Utilisation de JavaScript et de jQuery pour des applications Web réactives MVC 4 Utilisation et exécution du JavaScript Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  124. 124. 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™©
  125. 125. 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 » script function HelloWorld() { // Mon code JS ici ! } /script script src=~/Scripts/jquery-1.8.2.js/script Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  126. 126. 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; if (monInt == 10) alert(ok); else alert(pas ok !); /script Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  127. 127. 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 : Jquery Prototype Mootools YUI Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  128. 128. 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™©
  129. 129. Utilisation de JavaScript et de jQuery pour des applications Web réactives MVC 4 Utilisation de JQuery et JQueryUI Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  130. 130. 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™©
  131. 131. 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 : Balise script dans sa version originale ou minifiée Via les bundles Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  132. 132. 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 • L’utilisation de document.ready et les événements $(document).ready(function () { console.log(ready!); }); Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  133. 133. 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) • Permet de gérer facilement : JSON, XML Les événements Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  134. 134. 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 down/up. JQuery Utilities Permet d’aligner le contenu HTML Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  135. 135. Démo Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  136. 136. 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™©
  137. 137. Gestion des droits d'accès aux applications Web ASP.NET MVC 4 Mettre en place un système d'authentification et Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr d'autorisation Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  138. 138. 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™©
  139. 139. 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: 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. Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  140. 140. 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 • Permet d’indiquer qu’une page (controlleur ou action) est accessible de façon anonyme, sans autorisation. Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  141. 141. 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™©
  142. 142. 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™©
  143. 143. Gestion des droits d'accès aux applications Web ASP.NET MVC 4 Gestion des rôles et des Membership Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  144. 144. 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™©
  145. 145. 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 • SimpleRoleProvider: Le plus utilisé, fonctionne avec plusieurs types de base de données • UniversalProviders: Utilise EntityFramework, mais avec un schéma créé par Microsoft. Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  146. 146. 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 La fonction User.IsInRole() Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  147. 147. 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™©
  148. 148. Ce qu’on a couvert • La gestion des rôles Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  149. 149. Concevoir des applications Web robustes ASP.NET MVC 4 Développer un site sécurisé Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  150. 150. Plan • Cross-Site Scripting XSS • Autres préventions • SSL Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  151. 151. 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: Utilisant la fonction @Ajax.JavaScriptStringEncode div id=message” class=messages@Ajax.JavaScriptStringEncode(ViewBag.Msg)/div Utilisant la bibliothèque AntiXSS @using Microsoft.Security.Application div class=messages@Encoder.JavaScriptEncode(ViewBag.Msg)div Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  152. 152. Autres préventions • Cross-Site Request Forgery Utilisation de @Html.AnfiForgeryToken() • SQL Injection Attack • 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 Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  153. 153. 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 liaison SSL (HTTPS) Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  154. 154. 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™©
  155. 155. Concevoir des applications Web robustes ASP.NET MVC 4 Gestion des sessions Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  156. 156. Plan • Le mot-clé SESSION • Les différents mécanismes Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  157. 157. Le mot clé SESSION • Mettre une valeur dans le gestionnaire de session Session[maSession] = Un test !; • Récupérer la valeur d’une session spanVoici le contenu de votre session : @Session[maSession]/span Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  158. 158. 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 Le mode Off • Configuration dans le fichier web.config system.web sessionState mode=InProc timeout=5 / /system.web Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  159. 159. Ce qu’on a couvert • La gestion des sessions Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  160. 160. Utilisation des Web Services Windows Azure dans les applications Web ASP.NET MVC 4 Introduction à Windows Azure Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  161. 161. Plan • Qu’est ce que Windows Azure ? • Démo Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  162. 162. Qu’est ce queWindows Azure ? • La plateforme cloud de Microsoft : Création de machine Virtuelle Création de Site Web Création de Service CDN Stockage Base de données Services de média Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  163. 163. Ce qu’on a couvert •Windows Azure Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  164. 164. Utilisation des Web Services Windows Azure dans les applications Web ASP.NET MVC 4 Créer des services Windows Azure Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  165. 165. 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 • Debug du service WCF • Utilisation du service WCF Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  166. 166. 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 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 Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  167. 167. 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 • Implémenter le service • Tester le service Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  168. 168. 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 Run Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  169. 169. 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 • Permet de définir l’environnement sur lequel l’application sera hébergée Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  170. 170. 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) Remote Desktop (Accès complet aux logs Windows et accès direct) Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  171. 171. 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 http://urlname.cloudapp.net/servicename.svc • Utiliser la classe proxy générée • L’appeler en utilisant jQuery Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  172. 172. 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™©
  173. 173. Implémentation d'API Web dans les applications Web ASP.NET MVC 4 Mettre en place les Web Api Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  174. 174. 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™©
  175. 175. 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) 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 Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  176. 176. 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 • L’attribut AcceptVerbs • L’attribut ActionName Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  177. 177. 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™©
  178. 178. Ce qu’on a couvert • Les API WEB Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  179. 179. Implémentation d'API Web dans les applications Web ASP.NET MVC 4 Consommer les Web Api depuis un mobile et une Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr application Web Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  180. 180. 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™©
  181. 181. Ce qu’on a couvert • Consommer les api web Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  182. 182. Gestion des requêtes dans les applications Web ASP.NET MVC 4 Utilisation des modules HTTP et des HTTP Handlers Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  183. 183. 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™©
  184. 184. Qu’est ce qu’unModule 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 HttpApplication HttpHandler HttpModule Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  185. 185. 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 HttpApplication HttpHandler HttpModule Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  186. 186. 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 Modifier le fichier web.config Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  187. 187. 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™©
  188. 188. Bonus Exercice Djamel BOUCHOUCHA Consultant .NET et Formateur Formateur WUITS Contact : djamel.b@wuits.fr Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  189. 189. Plan • Création d’une application • Publication de l’application Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  190. 190. 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) • Ajouter le controller « ToDo » et générées les vues à l’aide VisualStudio • Ajouter l’api RestFul et activer Odata Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  191. 191. 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 • Ajouter la ressource SQL à ce site Web • Récupérer le fichier de publication • Publier à l’aide des outils disponibles dans Visual Studio Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©
  192. 192. Ce qu’on a couvert • Un exercice complet Développez des applications Web avec ASP.NET MVC 4 (70-486) alphorm.com™©

×