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

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™©

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

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/

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

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

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

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

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

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/

Bonne formation ☺

Introduction à ASP.NET MVC 4
Introduction aux
technologies Web de
Djamel BOUCHOUCHA
Formateur WUITS
Contact : djamel.b@wuits.fr
Microsoft

Plan
• Présentation des principaux outils web Microsoft
• Côté serveur
• Côté client
• Windows Azure

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 ..

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

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

Ce qu’on a couvert
• Les outils de développement
• IIS
• Windows Azure
• L’utilisation des standards

Introduction à
ASP.NET 4.5
Djamel BOUCHOUCHA
Formateur WUITS

Plan
•Applications web :
Web pages
Web Forms
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)

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)

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

•Applications web :
Web pages
Web Forms
MVC

Introduction à ASP.NET
MVC 4
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• MVC : Models, Views, et Controllers
• MVC dans le Framework .NET

MVC : Models, Views, and Controllers

MVC dans le Framework .NET

• MVC : Models, Views, et Controllers
• MVC dans le Framework .NET

Conception d'application Web ASP.NET
MVC 4
Préparer les phases
de conception
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• La gestion de projet
• Les données
• La couche service

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 ..

Les données
• Choix du serveur de base de données :
SQL SERVER
Oracle
MySql
• Object-relational mapping (ORM)
Entity Framework
Nhibernate

La couche service
• Choix du fournisseur de service :
Web Services
WCF
RestFul (WebApi)

• 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

Conception d'application Web ASP.NET
MVC 4
Conception des Modèles,
Contrôleurs et Vues
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• La conception de la couche Modèle
• La conception de la couche Contrôleur
• La conception de la couche Vue

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

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é

La conception de la couche Vue
• Deux moteurs de rendues :
Razor
ASPX
• Plusieurs types de vues :
Complète
Template
Partiel

• La conception des couches MVC
• Entity Framework
• La génération automatique des vues

Développement de Modèles ASP.NET MVC 4
Création
des modèles MVC
Djamel BOUCHOUCHA
Formateur WUITS

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

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 Subject { get; set; }
public string Body { 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
{
};
…
• 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(.+@.+..+)]
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 virtual ICollectionComment Comments { 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;
}
public override Boolean IsValid(Object value)
{
var valueToCompare = (int)value;
if (valueToCompare MinimumValue) { return true; }
else { return false; }
}
}

• 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éveloppement de Modèles ASP.NET MVC 4
Travailler
avec les données
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Connexion à une base de données
• Définir un context pour Entity Framework
• Utiliser LINQ to Entities
• 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
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
• 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 DbSetToDo ToDos { get; set; }
public DbSetComment 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
select 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 »

• La configuration de l’accès à une base de données en passant par le
fichier web.conf
• Linq

Développement de Contrôleurs ASP.NET MVC 4
Créer des contrôleurs
et leurs actions
Djamel BOUCHOUCHA
Formateur WUITS

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

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();
}
}

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 );
}

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é

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é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 »

• La création de contrôleur et d’action
• Le passage de paramètre (ViewBag)
• Controller Factory

Développement de Contrôleurs ASP.NET MVC 4
Utiliser les filtres
Djamel BOUCHOUCHA
Formateur WUITS

Plan
•Qu’est ce qu’un filtre ?
•Créer et utiliser les filtres d’actions

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

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);
}
}

• Les types de filtre
•Créer et utiliser les filtres

Développement de Vues ASP.NET MVC 4
Créer des vues avec
Razor
Djamel BOUCHOUCHA
Formateur WUITS

Plan
•Présentation de Razor
• Les méthodes Helpers
• Les vues partielles

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) {}

Razor 2/2 - Binding
• @model : paramètre dans le helper View (model)
• ViewBag
• TempData
• 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
• @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
erreurs de saisie
• @Url.ValidationMessageFor() Permet d’afficher l’erreur
lié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 classe
mère
• @Html.Action() Si on utilise un modèle indépendant
• @ViewBag et ViewData accessible

• La syntaxe Razor
• Les méthodes permettant de générer :
Des liens
Des Formulaires
Des Messages d’erreurs
• La réutilisation du code

Tests et débogage d'application Web ASP.NET
MVC 4
Les tests unitaires dans
une application MVC
Djamel BOUCHOUCHA
Formateur WUITS

Plan
•Ecrire des tests unitaires avec Visual Studio
•Définir un contexte
•Nuget : Gestionnaire de Package
• 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é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)

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

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);

Mock : Moq
•Permet de créer de faux objets pour simuler
l’application
•Permet de tester le comportement d’autres objets
Démo
☺

• Les test unitaires
• Assert
• Nuget
• IoC
•Mock

Tests et débogage d'application Web ASP.NET
MVC 4
Mettre en place une stratégie
de gestion des exceptions
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Interception des exceptions
• Enregistrer les exceptions
• Health Monitoring et ELMAH

Interception des exceptions
• Try; Catch; Finnaly
• Rédéfinition de la méthode OnException
• Utilisation de l’annotation [HandleError]
customErrors mode=On defaultRedirect=Error /

Enregistrer les exceptions
• Utilisation des filtres et d’un système de persistance
• Observateur d'événements Windows
• Log4net

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.

• L’interception des excetpions
• La nécessité d’enregistrer les exceptions
• Health Monitoring et Elmah

Structurer des applications Web ASP.NET MVC 4
Configurer des chemins
d'accès (ROUTAGE)
Djamel BOUCHOUCHA
Formateur WUITS

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

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

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 });

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 });

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]);
}

• 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
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Qu’est ce qu’un Layout ?
• Utiliser un Layout
• Utiliser les CSS
• 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
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
•@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

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

• La création de l’utilisation des Layouts
• RenderSection
• Les Bundles

Appliquer des styles aux applications Web
ASP.NET MVC 4
Créer une interface en
fonction du périphérique
Djamel BOUCHOUCHA
Formateur WUITS

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 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 /

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)
});

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

• Les Media Queries
• Vues spécifiques en fonction du périphérique

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
Formateur WUITS

Plan
• Rappel du principe de la mise à jour partielle
• Utilisation d’Ajax en MVC4
• Utilisation de l’helper : Ajax.ActionLink

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

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();
}

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
}
)

• La possibilité de mettre à jour de façon partielle une
interface
• Ajax.ActionLink

Concevoir des pages réactives dans les
applications Web ASP.NET MVC 4
Mettre en place une stratégie
de cache
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Pourquoi utiliser un système de cache ?
• Le cache de rendu (Output cache)
• Les données en cache (Data cache)
• 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é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();
}
• 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 »
ListTodo 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
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);

• Les différents types de cache
• La possibilitée de contrôler le cache

Utilisation de JavaScript et de jQuery pour des
applications Web réactives MVC 4
Utilisation et exécution du
JavaScript
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Ajouter du JavaScript à une page
• Rappel de base
• Les librairies

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

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

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

• La gestion du JavaScript par MVC

Utilisation de JavaScript et de jQuery pour des
applications Web réactives MVC 4
Utilisation de JQuery et
JQueryUI
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Présentation de JQuery
• Un peu de syntaxe
• Présentation de Jquery UI
• 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 :
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
• L’utilisation de document.ready et les événements
$(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)
• 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
down/up.
JQuery Utilities
Permet d’aligner le contenu HTML

Démo

• JQuery et JQueryUI dans un projet MVC

Gestion des droits d'accès aux applications Web
ASP.NET MVC 4
Mettre en place un système
d'authentification et
Djamel BOUCHOUCHA
Formateur WUITS
d'autorisation

Plan
• Les différents providers locaux
• L’attribute Authorize et AllowAnonymous
• Connexion depuis Google!, Twitter, FaceBook …

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.

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.

Connexion depuis Google!, Twitter…
• Modifier la classe static AuthConfig
• Rien de plus !

• Les memberships
• Les attributs de gestion des droits

Gestion des droits d'accès aux applications Web
ASP.NET MVC 4
Gestion des rôles et des
Membership
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Les providers
• L’attribute Authorize
• Construire un Custom Role Provider

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.

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()

Construire un Custom Role Provider
• Hériter de la classe « RoleProvider »
• Implémenter les fonctions « GetRolesForUser », « CreateRole »…
• Modifier le fichier « Web.config »

• La gestion des rôles

Concevoir des applications Web robustes
ASP.NET MVC 4
Développer un site sécurisé
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Cross-Site Scripting XSS
• Autres préventions
• SSL

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

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

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)

• La prevention contre les attaques
•Mais cela ne suffit pas …

Concevoir des applications Web robustes
ASP.NET MVC 4
Gestion des sessions
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Le mot-clé SESSION
• Les différents mécanismes

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

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

• La gestion des sessions

Utilisation des Web Services Windows Azure
dans les applications Web ASP.NET MVC 4
Introduction à Windows
Azure
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Qu’est ce que Windows Azure ?
• Démo

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

•Windows Azure

Utilisation des Web Services Windows Azure
dans les applications Web ASP.NET MVC 4
Créer des services Windows
Azure
Djamel BOUCHOUCHA
Formateur WUITS

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

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

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

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

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

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)

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

• Le SDK Azure
• L’utilisation des rôles
• Le déploiement d’application Azure

Implémentation d'API Web dans les applications
Web ASP.NET MVC 4
Mettre en place les Web Api
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Qu’est ce que les Web Api
• Routage des Web Api“
• Démonstration

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

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émonstration
• Ajouter un contrôleur de type Web Api à une application ASP.NET MVC
• Créer des actions
• Appeler l’API depuis un navigateur

• Les API WEB

Implémentation d'API Web dans les applications
Web ASP.NET MVC 4
Consommer les Web Api
depuis un mobile et une
Djamel BOUCHOUCHA
Formateur WUITS
application Web

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

• Consommer les api web

Gestion des requêtes dans les applications Web
ASP.NET MVC 4
Utilisation des modules HTTP
et des HTTP Handlers
Djamel BOUCHOUCHA
Formateur WUITS

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

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

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

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

• Les modules et les handlers HTTP

Bonus
Exercice
Djamel BOUCHOUCHA
Formateur WUITS

Plan
• Création d’une application
• Publication de l’application

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

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

• Un exercice complet

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

Contenu connexe

Tendances (20)

En vedette (20)

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

Plus de Alphorm (20)

Dernier (7)

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