Vous êtes sur la page 1sur 31

ASP.

NET MVC
Abderrahim.Benabbou@gmail.com
Introduction
Model-View-Controller (MVC) est un modèle d'architecture
logicielle largement utilisé pour les applications web
Il a été créé dans le cadre du langage Smalltalk à la fin des
années 70 par Trygve Reenskaug
Objectif: meilleure réutilisabilité du code et séparation des
aspects
Initialement développé pour les applications bureau, il a été
ensuite adapté pour les applications web
Introduction
Le pattern MVC confère à l’application une architecture
logicielle sous forme de parties découplées, ce qui permet :
• De faciliter le développement de l’application, en répartissant les
tâches de conception et de développement de l’application entre
les différentes personnes d’une équipe de développement.
• De bien structurer l’application, afin de faciliter son
développement, ainsi que sa maintenance.
• De faciliter les tests de l’application, afin de mieux réaliser les
tests unitaires, fonctionnels et de non-régression.
Modèle
Ensemble de classes qui décrivent les données manipulées
par l’application
Etablit les règles pour la façon dont les données peuvent être
modifiées et manipulées
Peut contenir des règles de validation de données
Encapsule souvent, les données stockées dans une base de
données ainsi que le code utilisé pour manipuler les données
Représente en quelque sorte une couche d'accès aux
données
Vue
Définit comment sera l’interface utilisateur des pages web de
l'application
Peut prendre en charge la mise en page des vues à travers
une vue principale (layout)
Peut prendre en charge les sous-vues (partial view ou
controls)
C’est une sorte de template pour générer dynamiquement du
code HTML
Contrôleur
C’est le composant MVC principal, il contient la logique de
l’application
Permet de traiter les requêtes utilisateur en utilisant les vues
et les modèles
Un ensemble de classes qui gèrent:
La communication avec l'utilisateur
La totalité des flux de l'application
La logique spécifique de l'application
Chaque contrôleur possède une ou plusieurs actions
Schéma d’exécution
Schéma d’exécution
Les requêtes entrantes de l’utilisateur sont acheminées vers le
contrôleur (requête HTTP)
Le contrôleur traite la demande et crée le modèle des données
Le contrôleur sélectionne également la vue appropriée qui
présentera le résultat à l’utilisateur
Le modèle est transmis à la vue
La vue transforme le modèle en format de sortie approprié
(code HTML)
La réponse est transmise à l’utilisateur (réponse HTTP)
ASP.Net MVC
 Concurrence les WebForms: API stable et mature, soutenue par
plusieurs contrôles et d'outils tiers
 Première version de MVC en 2008 (ASP.Net 3.5)

Presentation

ASP.NET
Caching .NET Globalization
Pages OWIN Web API Runtime
Profile Roles Identity
Routes Handlers Etc...
MVC en ASP.Net
Technologies utilisées
C#
ASP.NET
HTML(5) et CSS
JavaScript (jQuery, Bootstrap, AngularJS, etc.)
AJAX
Databases (Microsoft SQL Server)
ORM (Entity Framework and LINQ)
HTTP
Exemple
Routage
Le routage consiste à aiguiller les requêtes dans une
application ASP. NET MVC
Le Front Controller permet de traiter les requêtes de
l'application Web par l'intermédiaire du routage et d'un
contrôleur
L’URL est interpretée comme une ”route” par le Front
Controller qui la transmet au contrôleur concerné
« Convention plutôt que configuration »
L’URL doit avoir la forme {controller}/{action}/{id}
Exemple : Home/Index/user1
Routage
 Concrètement c’est la fonction RegisterRoute qui s’occupe du routage
 Elle se trouve dans le fichier RouteConfig.cs, se trouvant dans le
répertoire App_Start, est appelée par le global.asax.cs, point d’entrée
d’une application ASP.NET
public static void RegisterRoutes(RouteCollection routes){
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } );
}
Routage
 L’appel à la méthode IgnoreRoute permet d’ignorer les requêtes qui
demandent des ressources directement
 L’appel suivant définit la route nommée «Default» qui réagit aux requêtes
(url) de la forme /xxx/yyy/zzz
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional });
 Ces requêtes vont instancier le contrôleur xxxController , et appeler la
méthode yyy() en lui passant en paramètre la valeur zzz
Routage
 Ainsi, une requête /Home/Index/user1 permettra d’appeler la méthode
Index de la classe HomeController avec user1 comme valeur pour le
paramètre id :
public class HomeController : Controller
{
public string Index(string id)
{
return "Hello " + id;
}
}
Ce qui affichera le message: « Hello user1 »
Démo
 Test du routage
Application
Réaliser un projet web ASP.Net MVC permettant de gérer le Master et les
inscriptions.
 Partie 1
L’application offre aux étudiants la possibilité de s’inscrire afin de visualiser
une description de la formation Master avec une description des modules
par semestre. Un étudiant doit aussi pouvoir modifier et récupérer son
compte en cas d’oublie.
Le compte administrateur doit permettre de créer le contenu du Master et le
modifier. De plus, il doit aussi pouvoir gérer les comptes des utilisateurs.
La persistance des données sera assurée en utilisant ADO.NET avec une
base de données sous le serveur SQL Server (ou autre).
Application
 Partie2
Nous allons ajouter un service de messagerie interne aux étudiants du
Master (sans utiliser d’API de messagerie) à l’aide duquel les utilisateurs
inscrits peuvent :
envoyer des messages à leurs contacts (parmi les inscrits),
créer et gérer les groupes de contacts,
recevoir et consulter des notifications des messages entrants,
gérer les messages (recherche et suppression)
TP
 Développer une application Web ASP.Net MVC permettant de gérer une
maison concessionnaire de voitures d’occasion.

 L’administrateur doit pouvoir gérer les inscriptions des clients ainsi que
les offres de vente/achat de voitures.

 Les clients doivent pouvoir s’inscrire, consulter les offres, ajouter des
offres à leur liste favoris ou proposer une offre de vente/achat de voiture.
Migration de la base de données
avec EntityFramework

 Pour pouvoir faire migrer la base de données en fonction des


changements sur les modèles on peut :
• Soit supprimer la base de données à chaque changement
• Soit demander la migration de la base de données
Pour appliquer la deuxième manière:
 Aller à Outils->Gestionnaire de packages Nuget->Console du packages
Manager
 Ajouter les commandes suivantes dans l’ordre indiquée
PM> enable-migrations -EnableAutomaticMigrations:$true
PM> add-migration "UniDB Schema"
PM> Update-Database -Verbose
Validation côté client au niveau du model
Utilisation des annotations dans le model
 [Required] : Rend une propriété requise.
 [StringLength] : qu'une propriété de chaîne a au maximum la longueur maximale
indiquée.
 [EmailAddress] : valide la propriété a un format de courrier électronique.
 [Phone] : Valide que la propriété dispose d'un format téléphonique.
 [CreditCard] : Valide que la propriété a un format de carte de crédit.
 [Url] : valide la propriété a un format d'URL.
 [Compare] : valide la comparaison de deux propriétés dans un modèle.
 [Range] : valide la valeur de la propriété dans la plage donnée.
 [RegularExpression] : Valide que les données par un expression régulière
 [DataType(DataType.type)] : Valide que les données correspondent au type indiqué

NB: Nécessite des bibliothèques de script supplémentaires pour la validation (jquery)


Validation au niveau du model
Exemple 1
public class Movie{
public int ID { get; set; }

[StringLength(60, MinimumLength = 3)]


public string Title { get; set; }

[Display(Name = "Release Date")]


[DataType(DataType.Date)]
[DisplayFormat(DataFormatString="{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime ReleaseDate { get; set; }

[Range(1, 100)] [DataType(DataType.Currency)]


public decimal Price { get; set; }
}
Validation au niveau du model
Exemple 2
public class Compte
{
[EmailAddress]
public string Email { get; set; }

[Required]
public string Login{ get; set; }

[Required]
[DataType(DataType.Password)]
[Display(Name = "mot de passe")]
public string Password { get; set; }

[DataType(DataType.Password)]
[Display(Name = "Confirmer le mot de passe")]
[Compare("Password", ErrorMessage = "Le mot de passe de confirmation ne correspond pas.")]
public string ConfirmPassword { get; set; }
Validation au niveau du model
Attribut de validation personnalisé
public class OddNumberAttribute : ValidationAttribute
{
protected override ValidationResult IsValid(object value, ValidationContext
validationContext)
{
var number = (int) value;
if (number % 2 == 1)
return ValidationResult.Success;
else
return new ValidationResult("Only odd numbers are valid.");
}
}
Classe de modèle
[OddNumber]
public int Number { get; set; }
Authentification par formulaire
 Elle fonctionne grâce à des cookies cryptés stockés chez le client
 Lorsque un utilisateur s’authentifie, ASP.NET génère un cookie
 Lorsqu’un client tente d’accéder à une ressource sécurisée, ASP.NET
vérifie la présence de son cookie d’authentification
 Si l’utilisateur n’est pas authentifié, il sera redirigé vers l’action
d’authentification d’un contrôleur dédié
 Puisque les ressources sont demandées à travers le contrôleur, il suffit
d’ajouter l’attribut [Authorize] au contrôleur ou à ses méthodes pour les
rendre sécurisées
 L’attribut [AllowAnonymous] permet d’autoriser l’accès anonyme
Authentification par formulaire
 Dans le fichier web.config, on ajoutera à la section <system.web>, la
clause suivante:
<authentication mode="Forms">
<forms loginUrl="~/NomController/NomActionAuth"></forms>
</authentication>
 La classe FormsAuthentication
 La méthode statique SetAuthCookie(id, false) génère le cookie d’authentification à
partir de l’identifiant de l’utilisateur
 La méthode statique SignOut() déconnecte l’utilisateur
 La classe User.Identity
 La propriété User.Identity.IsAuthenticated vérifie si l’utilisateur est authentifié
 La propriété User.Identity.Name retourne l’identifiant de cet utilisateur
Gestion des rôles
public class MyRoleProvider : RoleProvider
{
public override string[] GetAllRoles()
{
return MvcApplication.mld.listeRoles.Select(item=>item.NomRole).ToArray();
}
public override string[] GetRolesForUser(string username)
{
User u = MvcApplication.mld.listeUsers.FirstOrDefault(item => item.Nom == username);
return u.Roles.Select(item=>item.NomRole).ToArray();
}
public override bool IsUserInRole(string username, string roleName)
{
User u= MvcApplication.mld.listeUsers.FirstOrDefault(item => item.Nom == username);
return u.Roles.Exists(item => item.NomRole == roleName);
}}
Gestion des rôles
<system.web>
<roleManager enabled="true" defaultProvider=“MyRoleProvider">
<providers>
<clear/>
<add name="MyRoleProvider" type="WebApplication.MyRoleProvider "/>
</providers>
</roleManager>
</system.web>
Personnaliser les autorisations
public class MyAuth : AuthorizeAttribute
{
public override void OnAuthorization(AuthorizationContext filterContext)
{
base.OnAuthorization(filterContext);
if (filterContext.Result != null)
{
if (filterContext.Result.GetType() == typeof(HttpUnauthorizedResult))
{
//Do the logic for the unathorized requests
filterContext.Result = new ContentResult { Content = "<script> alert('Au
revoir')</script>" };
}
} } }
Gestion des autorisations
Gestion de scolarité à l’école
Réaliser une application web MVC qui propose:
 un front office qui doit permettre aux étudiants de s’inscrire avec le profil étudiant. Après
validation de leur compte par les administratifs, les étudiants peuvent gérer leur profil et
consulter leurs relevés de notes.
 Le back office doit permettre :
• Aux enseignants de s’inscrire avec le profil enseignant, et de saisir les notes des étudiants
pour chacune de leurs matières enseignées
• Aux administratifs de s’inscrire avec le profil administratif, de gérer les inscriptions des
étudiants
• Au directeur de gérer les étudiants les répartir en section, gérer les administratifs et les
enseignants, ainsi que l’affectation des sections et matières aux enseignants
TAF: Business Process  Agile Scrum: User Stories du Product BackLog  Estimation des user
stories  Sprint1  diagramme de classes correspondant  développement du sprint1 
tests et livraison  Sprint2  diagramme de classes correspondant...
Outils: Git ou Github Desktop, Github, Scumwise

Vous aimerez peut-être aussi