Vous êtes sur la page 1sur 430

Apprenez ASP.

NET MVC
1
Table de matières
• Introduction au développement web avec ASP.NET.

• Les bases d'ASP.NET MVC.

• ASP.NET MVC en profondeur.

• Les vues et les contrôleurs.

• Annexes

2
Partie 1
Introduction au développement web avec ASP.NET MVC

3
Partie 1: Introduction au développement web
avec ASP.NET MVC
• Chapitre 1 : Introduction à ASP.NET MVC

• Chapitre 2 : Qu’est-ce qu’un site web ?

• Chapitre 3 : Introduction au HTML

4
Chapitre 1
Introduction à ASP.NET MVC

5
Chapitre 1: Introduction à ASP.NET MVC
• Introduction à ASP.NET MVC

• Qu'est-ce qu'ASP.NET ?

• MVC et WebForms

• Pourquoi utiliser ASP.NET MVC ?

6
Introduction à ASP.NET MVC
• Alors, ASP.NET MVC c’est quoi ?

• C’est un Framework de développement web créé par Microsoft.

• Permettant de réaliser des sites web complexes grâce au modèle


“MVC” (Model View Controller).

• Mais tout d’abord, qu'est-ce qu'ASP.NET ?

7
Qu'est-ce qu'ASP.NET ?
• La plateforme de développement de Microsoft permettant la
réalisation d'applications web.

• Ce qu’on appelle « plateforme » ici est un ensemble de composants


permettant de construire une application web.

• Ex: Quand nous construisons une maison, nous avons besoin d’un
terrain, d’un chef de chantier, de matériaux de construction, d’un plan
de construction, d’outils, et de savoir-faire.

8
Qu'est-ce qu'ASP.NET ?
• Et bien pour réaliser une application web, c’est un peu le même
principe, nous avons besoin :

▪ D’un outil de développement (Visual Studio).

▪ D’une boîte à fonctionnalités pour développer (Framework .NET).

▪ D’une logique de développement (WebForms et MVC).

▪ D’un langage de programmation (C#).

9
MVC et WebForms
• On peut dire grosso modo qu’ASP.NET se décompose en deux grandes
parties (les fameuses logiques!), à savoir :
▪ ASP.NET WebForms
▪ ASP.NET MVC

• ASP.NET c’est le socle de la plateforme de développement de


Microsoft pour réaliser des applications web. WebForms et MVC sont
deux logiques différentes de développement s’inscrivant au-dessus
du socle d’ASP.NET.

10
WebForms
• ASP.NET WebForms a été créé en 2002.

• ASP.NET WebForms a été créé par Microsoft afin que les


développeurs d'applications Windows puissent facilement créer des
applications web.

• Les applications ASP.NET WebForms se rapprochent d'un modèle


événementiel, c'est-à-dire que chaque composant d'une page est
capable de réagir à une action de l'utilisateur.

11
WebForms
• ASP.NET WebForms fournit également beaucoup de contrôles
serveurs permettant de générer du HTML (Balises ASP).

• Par exemple en quelques lignes de codes nous pouvons générer une


grille complète affichant des données, gérant les pages multiples, les
tris, etc.

• Mais tout ceci a un coût : cycle de vie de la page complexe, moins de


maîtrise du HTML généré.

12
MVC
• ASP.NET MVC est plus récent et a fait son apparition en 2009.

• Cette façon de penser la réalisation des applications web s’appuie sur


un patron de conception très célèbre, MVC, qui existe depuis 1979.

• Le patron d'architecture Modèle-Vue-Contrôleur (MVC) sépare une


application en trois composants principaux : le modèle, la vue et le
contrôleur.

13
Pourquoi utiliser ASP.NET MVC
• ASP.NET MVC vous offre une maîtrise totale du modèle HTTP ainsi
que du code HTML généré.

• La maîtrise du HTML généré est également un élément déterminant si


vous comptez faire un site qui fonctionne sur des PC mais également
sur des tablettes ou des smartphones.

• Le « responsive design », qui consiste à adapter un site web au


dispositif de support, implique d’avoir un bon contrôle sur le HTML
généré, ce qui est plus compliqué à faire avec ASP.NET WebForms.

14
En résumé
• ASP.NET est la plateforme de développement d’applications web de
Microsoft

• ASP.NET offre deux logiques de développement : WebForms et MVC. Dans


cette formation, nous étudierons la logique MVC version 5 grâce au
langage C#

• ASP.NET WebForms offre une couche d'abstraction permettant de réaliser


des applications web comme si nous réalisions des applications Windows

• ASP.NET MVC propose un cadre de développement et plus de maîtrise sur


le HTML final des pages

15
Chapitre 2
Qu’est-ce qu’un site web ?

16
Chapitre 2: Qu’est-ce qu’un site web ?

• Comment fonctionne un site web

• Sites statiques, sites dynamiques

• Les requêtes GET et POST

17
Comment fonctionne un site web
• Un site web est un ensemble de fichiers qui sont hébergés sur un
serveur, consultés par un navigateur Internet et mis en forme par un
serveur web.

18
Sites statiques, sites dynamiques
• Il existe des sites web plus ou moins compliqués, mais on peut les classer
grosso modo en deux grandes catégories : les sites statiques et les sites
dynamiques.

• On entend par page statique, non pas une page sans mouvements ou sans
animations, mais une page visible telle qu'elle a été conçue.

• Ces pages peuvent présenter toute forme de contenu, animations flash,


images, musique, vidéo etc... mais elles sont toujours présentées de la
même façon. Elles ne changent pas et c'est en ce sens qu'elles sont
statiques.

19
Sites statiques, sites dynamiques
• En opposition aux pages statiques, les pages dynamiques permettent de
présenter les informations de différentes manières selon l'interaction avec
le visiteur.

• Le contenu est issu d'une base de données en fonction de critères établis


par l'internaute puis mis en page en temps réel.

• C'est le cas par exemple d'un site e-commerce: présentation des articles
par thèmes, couleurs, prix etc...

• C'est également le cas des blogs et des forums où les visiteurs peuvent
participer au contenu du site.

20
Les requêtes GET et POST
• Lorsque l'on parle d'application web, il s'agit d'un site dynamique.

• Lorsqu’on accède à un site web et qu’on lui demande de nous


renvoyer le contenu d’une page, on fait ce qu’on appelle une «
requête HTTP » sur le site web.

21
Les requêtes GET et POST
• Un serveur web est capable d’interpréter plusieurs types de requêtes.
Celles qui vont nous servir ici sont les requêtes du type GET et du type
POST.

• Une requête du type GET correspond à une demande qui va nous


permettre d’obtenir une ressource du site web en lecture seule.

• Il est possible de passer des paramètres à une requête GET, pour cela on
utilise une construction particulière de l’URL.

• À noter qu’une requête GET correspond à une consultation, elle ne doit pas
modifier le contenu d’une page et doit pouvoir être réexécutée à l’infini.

22
Les requêtes GET et POST
• La requête du type POST (que l’on peut traduire par « envoyer »)
soumet des données à une ressource d'un site web.

• Ces données doivent être envoyées au serveur web afin qu’il puisse
réaliser votre inscription et vous envoyer un email de bienvenue.

• Une requête POST modifie des données, elle ne doit normalement


pas pouvoir être exécutée à l’infini. Par exemple ici, je ne dois pas
pouvoir inscrire deux fois le même utilisateur.

23
En résumé
• Un site web est constitué d'un ensemble de pages HTML.

• Un site web peut être soit statique, soit dynamique.

• Pour accéder à la page d’un site web sur notre navigateur Internet, on
effectue ce qu’on appelle une « requête http » auprès du serveur web
hébergeant le site.

• On peut effectuer plusieurs types de requêtes sur un serveur web, et


notamment les requêtes GET et POST qui permettent respectivement de
consulter des informations et d'envoyer des informations.
24
Chapitre 3
Introduction au HTML

25
Chapitre 3: Introduction au HTML
• Les balises

• Les liens entre pages

• Les formulaires

• Un peu de style avec le CSS

• Le JavaScript

26
Introduction au HTML
• Comme son nom l’indique, le HTML, ou « HyperText Markup
Language », est un langage permettant d’écrire de l’hypertexte pour
afficher des pages web.

• Tout site web a besoin de HTML pour s’afficher.

• Lorsque l’on crée un site web avec ASP.NET MVC, nous allons avoir
besoin d'utiliser du HTML.

27
Les balises
• Le langage HTML est un langage structuré qui décrit un document
grâce à des balises, un peu comme le XML.

• Les balises sont des valeurs entourées de deux caractères, < et >, qui
décrivent le contenu sémantique de la donnée. Par exemple :

28
Les balises
• Une balise peut contenir des attributs permettant de donner des
informations sur la donnée.

• Les attributs sont entourés de guillemets " et " et font partie de la


balise. Par exemple :

29
Les balises
• Sauf qu’on ne met pas n’importe quoi dans ces balises. On a inventé les
balises <nom>, <client>, <age> juste pour vous faire comprendre le
principe de fonctionnement d’une balise.

• Mais en réalité HTML possède une série de balises pré-définies pour


décrire la structure d’un document.

• Par exemple, la balise <h1> correspond à un titre de niveau 1. Il existe de


nombreuses autres balises qui permettent de décrire le contenu de la
page, comme une balise permettant d’afficher un paragraphe <p>, un saut
de ligne <br/>, etc.

30
Les balises
• Pour comprendre le HTML, le plus simple est de le pratiquer.

• Et nous allons utiliser Visual Studio pour cela. Allez dans le menu
Fichier et choisissez Nouveau fichier, nous pouvons créer un nouveau
fichier HTML :

31
Les balises

32
Les balises
• Un fichier est généré contenant la structure de base du fichier HTML :

• La balise <html> est le nœud racine du document. Tout ce qui fait


partie du document devra se trouver à l’intérieur de cette balise.

33
Les balises
• Dans la balise <head> nous devrons mettre tout ce qui est en rapport
avec l’entête du document, notamment le titre grâce à la balise
<title>

• Dans la balise <body>, nous pourrons mettre le contenu du


document. Mettons-y par exemple un titre de niveau 1, avec :

34
Les balises
• Enregistrez le fichier et donnez-lui un nom, par exemple «hello.html».
Et maintenant, affichons notre page HTML dans le navigateur.

• Pour cela, vous pouvez ouvrir votre navigateur et aller chercher le


fichier HTML enregistré ou bien l’ouvrir avec le navigateur.

35
Les balises
• Il existe plein d’autres balises et nous allons en voir plusieurs dans ce
chapitre, mais pas toutes.

36
Les balises
• Comme nous l'avons vu un peu plus tôt, Il est possible de définir des
attributs dans les balises. Cela permet par exemple d’ajouter du style.

• Par exemple, pour avoir un titre de niveau 2 de couleur rouge et


centré, nous pourrons écrire le code HTML suivant :

37
Les liens entre pages
• Une des grandes forces du HTML est qu'il permet naviguer entre des
pages web. Cela est possible grâce à la balise <a>:

38
Les liens entre pages
• Puis créez une nouvelle page que vous appellerai, page2.html qui
contiendra par exemple:

39
Les formulaires

40
Les formulaires
• Un formulaire est une balise <form> qui contient une méthode pour
envoyer les paramètres (méthode GET ou POST) et l’adresse d’un
script (ou d’une action) qui sera appelé avec ces paramètres et vers
lequel sera redirigé l’utilisateur.

• Un script est un bout de code dans un langage (par exemple C# pour


ASP.NET) qui est exécuté par le serveur web, fait des actions, et
renvoie du HTML pour être interprété par les navigateurs Internet.
C’est la base des sites dynamiques.

41
Les formulaires
• Voici donc le balisage permettant de créer un formulaire :

• Ici dans l’action, j’ai mis le nom de la page 2 que nous avons créée un
peu plus haut, mais en général il s’agira d’un script, sauf que nous ne
savons pas encore comment faire.

42
Les formulaires
• Un formulaire doit être soumis, sinon il ne sert à rien. Pour ce faire,
nous allons rajouter un bouton dont le rôle sera justement de
s’occuper de soumettre le formulaire à l’action renseignée suivant la
méthode fournie.

• Pour créer un tel bouton, on utilise la balise <input> dont le type sera
submit :

43
Les formulaires
• Voici par exemple du HTML pour un formulaire classique :

44
Les formulaires : Solution

45
Les formulaires
• Une zone de texte grâce à la balise <input> de type "text "

• Une liste déroulante, avec la balise <select> et ses sous-balises <option>

• Une zone de texte avec les caractères masqués, avec la balise <input> de
type "password "

• Une case à cocher grâce à la balise <input> de type "checkbox "

• Une zone de texte longue avec la balise <textarea>


46
Un peu de style avec le CSS
• Le style c’est ce qui permet de mettre en forme notre HTML. Nous en
avons déjà aperçu un bout plus haut lorsque nous avons coloré un
titre en rouge :

• Il y a beaucoup d’éléments de style possibles. Ici, je donne au titre la


couleur en rouge en attribuant à « color » la valeur « red ». De
même, pour centrer le texte, il suffit d'attribuer la valeur « center » à
l’élément de style « text-align ».

47
Un peu de style avec le CSS
• Positionner les styles de cette façon est un peu contraignant, surtout
si on veut changer le style de plusieurs éléments d'un formulaire à la
fois, comme la police de texte par exemple. Vous vous voyez écrire
tout ça dans notre précédent formulaire ?

• La solution : le CSS.

48
Un peu de style avec le CSS
• CSS veut dire Cascading Style Sheet et est un langage permettant de
décrire le style d’une page HTML. On le traduit en français par «
feuilles de style en cascade ».
• Et si je vous disais qu’on peut remplacer tout ce qu’on a écrit plus
haut par :

49
Un peu de style avec le CSS
• Pour cela, on utilise donc l'attribut class que l’on lie à un style, que j’ai
nommé styleformulaire . Ce style se définit dans la balise <head> de
notre page :

• Quoi ? On peut encore faire plus court ?


50
Un peu de style avec le CSS
• Dans notre cas, oui ! En effet, nous avons appliqué ce style à toutes
les balises <label>

51
Le JavaScript
• C’est un langage de programmation qui s’utilise dans une page HTML
et qui est exécuté par le navigateur.

• Il peut nous servir à ajouter de l’interactivité à nos pages. Un des


exemples classiques consiste à valider les données d'un formulaire
avant de l'envoyer.

• Dans notre formulaire d’inscription, il est inutile de soumettre le


formulaire au serveur s’il manque un des champs obligatoires.

52
Le JavaScript
• Pour déclarer du JavaScript, on utilise la balise <script> de type
text/javascript . On pourra y créer des méthodes (dites « function ») :

53
Le JavaScript
• Cette méthode JavaScript pourra être appelée lorsque le visiteur
clique sur le bouton de soumission :

• Ainsi, s'il n'a pas précisé son prénom, un message s'affichera et le


formulaire ne sera pas envoyé.

54
En résumé
• Le HTML est un langage utilisant des balises permettant de décrire la
structure d’une page web et de l’afficher.

• Le HTML possède de nombreux contrôles qui sont notamment utilisés


pour la saisie de données dans des formulaires.

• En plus du langage HTML, les pages web que nous allons créer dans
ce cours contiendront du CSS, langage permettant de modifier le style
des pages, et du JavaScript, langage permettant d’ajouter de
l’interactivité à ces pages.

55
Quiz 1
Qu'est-ce qu'ASP.NET ?

• une plateforme de développement d'applications web?

• un site web pour apprendre à créer des sites web?

• un langage de développement?

56
Quiz 1
Quelle est la différence entre ASP.NET MVC et ASP.NET WebForms ?

• Aucune différence, c'est la même chose

• Ce sont deux logiques différentes de développement, basées sur le


même socle ASP.NET

• ASP.NET WebForms permet de réaliser des applications clientes


lourdes alors qu'ASP.NET MVC permet de réaliser des applications
web
57
Quiz 1
Que veut dire MVC ?

• Model View Controller

• Mieux Vaut Coder

• Modéliser Visuellement son Code

58
Quiz 1
Quels sont les bénéfices de MVC ?

• Pouvoir créer du code événementiel qui ressemble à du code pour


client lourd en faisant abstraction du modèle web

• Avoir des vues complètement indépendantes du modèle

• Avoir une grande maîtrise du code HTML, qui facilite la maintenance


et les tests
59
Quiz 1
Qu'est-ce que le HTML ?

• un outil de développement web

• un langage informatique permettant de décrire les informations d'une


page web afin de l'afficher sur un navigateur internet

• une balise permettant de naviguer de page en page

60
Quiz 1
Que sont CSS et JavaScript ?

• des compagnons du langage HTML qui permettent de modifier la


présentation d'un site web et d'y ajouter de l'interactivité

• des outils d'ASP.NET qui peuvent être utilisés avec le langage C#

• des balises HTML qui permettent de mettre en forme du texte

61
Quiz 1
À quoi sert une requête HTTP de type POST ?

• à obtenir de l'information d'une page web

• à récupérer des paramètres dans une URL

• à envoyer des informations d'une page à un serveur web

62
Quiz 1
Est-il possible de passer des paramètres à une requête de type GET ?

• Non, ce n'est possible qu'avec des requêtes de type POST, grâce aux
formulaires HTML

• Oui, c'est possible en utilisant le point d'interrogation à la fin d'une


URL et en séparant les paramètres de leurs valeurs par un signe égal

• Oui, c'est possible grâce à un lien hypertexte


63
Quiz 1
À quoi sert la balise <h1> ?

• à définir un titre de niveau 1

• à définir le titre d'une page (la balise <h1> doit apparaître sous la
balise <head>)

• à sauter une ligne

64
Quiz 1
Peut-on faire un lien entre deux pages ?

• Oui, mais ce n'est possible qu'avec la dernière version de HTML


(HTML5)

• Oui, avec la balise <p>

• Oui, avec la balise <a>

65
Partie 2
Les bases d'ASP.NET MVC

66
Partie 2: Les bases d'ASP.NET MVC

• Chapitre 4 : Le Pattern MVC

• Chapitre 5 : Hello World MVC

• Chapitre 6 : Convention plutôt que configuration

67
Chapitre 4
Le Pattern MVC

68
Chapitre 4: Le Pattern MVC
• Qu’est-ce que MVC et pourquoi l’utiliser ?

• M comme Modèle

• V comme Vue

• C comme contrôleur

• Schéma récapitulatif

69
Qu’est-ce que MVC et pourquoi l’utiliser ?
• MVC est un patron de conception (design pattern en anglais) très
répandu pour réaliser des sites web.

• Ce patron de conception est une solution éprouvée et reconnue


permettant de séparer l’affichage des informations, les actions de
l’utilisateur et l’accès aux données.

• MVC signifie Modèle-Vue-Contrôleur.

70
Qu’est-ce que MVC et pourquoi l’utiliser ?
• C’est un modèle qui a été conçu au départ pour des applications dites
« client lourd », c’est-à-dire dont la majorité des données sont
traitées sur le poste client (par exemple : un traitement de texte
comme Word).

• MVC était tellement puissant pour ces applications « client lourd »,


qu’il a été massivement adopté comme modèle pour la création
d’applications web (dites « client léger »).

71
Qu’est-ce que MVC et pourquoi l’utiliser ?
• Vous aurez compris que MVC n’est pas associé à un langage de
programmation et qu'il peut être utilisé avec énormément de
langages. MVC est beaucoup utilisé avec PHP par exemple ou même
JAVA.

• MVC permet également de concevoir des applications de manière


claire et efficace grâce à la séparation des responsabilités.

• Les opérations de maintenance et de mises à jour sont fortement


simplifiées

72
Qu’est-ce que MVC et pourquoi l’utiliser ?
• Par exemple, il est très fréquent que l’affichage d’un site web change
beaucoup plus régulièrement que les données que nous souhaitons
afficher. Avec une bonne séparation, nous n’aurons qu’à modifier une
toute petite partie de code sans toucher au reste qui fonctionne très
bien.

• De même, si une règle métier change - par exemple imaginons qu’un


site d’e-commerce souhaite changer ses modalités de livraison - nul
besoin de toucher l’interface, les risques d’impacts sont limités.

73
Qu’est-ce que MVC et pourquoi l’utiliser ?
• MVC permet également de répartir plus facilement les tâches entre
développeurs.

• Rares sont les personnes qui sont capables de transformer des règles
métiers complexes en code efficace tout en étant expertes en design
web.

74
M comme modèle
• Le M de MVC signifie Modèle.

• Il s’agit des données et de l’état de votre application web (par


exemple votre panier de courses sur un site d'e-commerce, ou la liste
des produits à acheter,...).

• En général, ces données sont représentées par un ensemble de


classes qui permettent d’accéder à une base de données.

75
M comme modèle
• Reprenons par exemple un site d’e-commerce, vous aurez sans doute
une classe Client, une classe Commande, une classe Produit, etc.

• Il y aura des méthodes pour obtenir le détail d'un client précis,


retrouver une commande, récupérer les produits par ordre de prix
croissant, etc.

• Toutes ces informations seront stockées dans une base de données,


et vous pourrez utiliser pourquoi pas un ORM comme Entity
Framework pour faciliter cet accès aux données.

76
M comme modèle
• Dans cette formation, nous utiliserons dans un premier temps un
modèle de classes très simple avec des données en dur.

• Puis, plus loin, nous utiliserons l'ORM Entity Framework afin de


pousser le modèle dans ses retranchements...

• À noter que le modèle ne connaît ni la vue, ni le contrôleur. Sa seule


finalité est d’être consulté ou modifié par ces derniers.

77
V comme Vue
• Le V de MVC signifie la Vue et traite de ce qu’on voit à l’écran dans le
navigateur web.

• Il s’agira globalement de code HTML et de CSS.

• Le but de la vue est de présenter les données issues du modèle mais


sans les modifier, sans en interpréter le contenu.

78
V comme Vue
• Dans un site web, il y a en général plusieurs vues et une vue
correspond bien souvent à une unique page.

• Dans notre site d’e-commerce par exemple, une vue permettra


d’afficher les caractéristiques d’un produit, une autre affichera la page
d’accueil, une autre encore permettra de visualiser sa commande,
etc.

79
V comme Vue
• Vous verrez que la vue, c’est le plus simple à maîtriser, surtout si vous
connaissez déjà un peu le HTML.

• En plus, ASP.NET MVC nous offre toute l’aide qu’il nous faut pour être
pleinement efficaces dans la réalisation de nos vues.

80
C comme contrôleur
• Le C de MVC signifie Contrôleur. Il fait le lien entre la vue et le
modèle.

• Le contrôleur gère les interactions avec l’utilisateur et détermine


quels traitements doivent être effectués pour une action donnée.

• D’une manière générale, il va utiliser les données du modèle, les


traiter en fonction de l’action de l’utilisateur, et les envoyer à la vue
afin qu’elle les affiche.

81
C comme contrôleur
• Nous verrons que le contrôleur est au cœur du système, il interprète
et « contrôle » les données venant de l’utilisateur, comme des
données venant d’un formulaire ou bien simplement une action faite
via une URL.

• Une bonne pratique est de faire en sorte que le contrôleur fasse le


moins de choses possible. Il doit traiter l’action et choisir la bonne
vue.

82
Schéma récapitulatif

83
En résumé
• MVC est un patron de conception particulièrement adapté pour
réaliser une application web.

• MVC est l’acronyme de Modèle-Vue-Contrôleur : le Modèle contient les


données de l’application, la Vue (ou les Vues) contient le code pour afficher
les pages de l’application, et le Contrôleur gère les interactions de
l’utilisateur en faisant le lien avec le Modèle et la Vue.

• MVC permet une séparation claire des responsabilités et optimise la


création d’une application web ou d’un site, sa maintenance et ses tests
automatisés.

84
Chapitre 5
Hello World MVC

85
Chapitre 5: Hello World MVC
• Création du projet avec Visual Studio

• Le contrôleur

• La route

• La vue

• Le modèle

• Le résultat

86
Création du projet avec Visual Studio
• La première chose à faire est de créer un nouveau projet ASP.NET
MVC.

87
Création du projet avec Visual Studio
• Visual Studio vous propose de sélectionner un modèle pour votre
projet.

88
Création du projet avec Visual Studio
• Un projet par défaut se crée, contenant déjà quelques dossiers et
fichiers :

89
Création du projet avec Visual Studio
• Visual Studio nous a créé le squelette par défaut d'une application MVC.

• Le répertoire App_Data est un répertoire où nous pourrons stocker des


données ou fichiers binaires (En général il est peu utilisé dans une vraie
application mais qu’il peut bien dépanner dans notre apprentissage).

• Le répertoire App_Start contient en général la logique de configuration.

• Le répertoire Controller contiendra en toute logique les contrôleurs qui


servent à gérer les actions.

90
Création du projet avec Visual Studio
• Le répertoire Models, où nous mettrons tout ce qui a rapport avec notre
modèle, c’est-à-dire les classes qui interagissent avec les données et qui
gèrent les règles spécifiques de notre application.

• Le répertoire Views contiendra toutes les vues de notre application, grosso


modo ce qui permettra le rendu de nos pages à base de HTML.

• Un fichier Global.asax, qui est exécuté au tout début du lancement de


l’application et qui nous permettra entre autre de configurer l’application.

• Un autre fichier Web.config bien connu des développeurs ASP.NET


WebForms.

91
Création du projet avec Visual Studio
• Démarrons l’application par défaut générée en appuyant sur F5.

• Votre navigateur par défaut démarre et ouvre une page dont l’adresse
ressemble à http://localhost:54585/ avec une belle page d’erreur :

92
Le contrôleur
• Alors cette page d’erreur ? Il nous a dit que la ressource « / » était
introuvable. Et oui, il n’y a rien dans notre application web, elle ne
sait pas traiter l’action associée à la route demandée.

• Je reviendrai sur cette notion importante de route juste après, mais


pour l’instant, nous allons ajouter un contrôleur afin de pouvoir
traiter la demande d'affichage.

93
Le contrôleur
• Cliquez droit sur le répertoire Controllers et ajoutez un nouveau
contrôleur :

94
Le contrôleur
• Sur la fenêtre, il y a plusieurs choix avec différents modèles.
Choisissez le modèle " Contrôleur MVC 5 - Vide " :

95
Le contrôleur
• Puis nommez-le Home Controller:

96
Le contrôleur
• Le code suivant se génère pour nous :

• Nous allons modifier la méthode Index générée pour avoir:

97
La route
• Que s’est-il passé ?

• Pour le comprendre, saisissez la nouvelle URL suivante :


http://localhost:54585/Home/Index.

• Nous obtenons exactement la même chose. Regardez la fin de l'URL :


/Home/Index.

98
La route
• Avec cette deuxième URL, nous avons en fait demandé au Framework
MVC de nous exécuter la méthode Index du contrôleur
HomeController.

• Pourquoi la méthode de cette classe a-t-elle été appelée ?

99
La route
• Pour le comprendre, ouvrez le fichier RouteConfig.cs qui se trouve
dans le répertoire App_Start. Nous pouvons notamment voir la ligne
suivante :

100
La route
• Cela veut dire que lorsqu’on demande d’afficher l’URL
http://localhost: 54585/Home/Index, le framework MVC interprète
cette URL et la transforme en action.

• Suivant le schéma défini dans la route par défaut, à savoir


{controller}/{action}/{id}, il transforme l’URL en :
- controlleur = Home
- action = Index
- id = null

101
La route
• Si vous changez l’URL et que vous changez Index par Index2 par
exemple, alors vous aurez à nouveau une page d’erreur.

• et oui, pas de méthode Index2 dans notre contrôleur !

• On peut ajouter une méthode Index2 dans notre contrôleur.

102
La route
• Bon, cet id alors qu’il y a à la fin de la route alors ? C’est quoi donc ?

• Et bien il s’agit de la possibilité de passer des paramètres à notre


action. Remplacez donc la méthode Index par :

103
La route
• Maintenant, vous allez pouvoir naviguer sur l’URL suivante
http://localhost:49926/Home/Index?id=2 et obtenir :

• Remarquez que cette URL http://localhost:49926/Home/Index/2


donne exactement la même chose.

104
La route
• L’Id devient obligatoire, Si vous naviguez à nouveau sur l’URL
http://localhost:49926/Home/Index vous aurez une exception car le
paramètre est requis dans la méthode Index de notre contrôleur.

• Pour que le paramètre soit facultatif, il faudra utiliser un entier de


type « nullable »

105
La route
• Remarquez que vous pouvez également passer une chaîne de
caractères en modifiant la méthode :

• Et vous pouvez naviguer sur


http://localhost:49926/Home/Index/VotrePrenom

106
La route
• Bien sûr, on pourrait imaginer renvoyer de l’HTML depuis notre méthode,
du genre :

• Mais là, bonjour l’horreur ! Tout est mélangé… niveau séparation des
responsabilités, on repassera !

107
La Vue
• C’est là qu’intervient la vue. La vue, c’est ce qu’on voit. En l’occurrence, ça
sera de l’HTML.

• Revenons sur la toute première version de notre contrôleur, générée par


Visual Studio, qui était :

• Ici, l’action renvoie un objet ActionResult en appelant la méthode View() ,


héritée de la classe Controller du framework MVC.

108
La Vue
• Créons ensuite un répertoire sous le répertoire Views qui s’appelle
Home. Et dedans, nous allons y mettre une vue que nous appellerons
Index.cshtml, de manière à avoir Views\Home\Index.cshtml

109
La Vue
• Et voilà, nous nous retrouvons avec un fichier Index.cshtml qui
contient du HTML que nous pouvons modifier pour y ajouter un petit
message :

110
La Vue
• Remarquez que dans l’action du contrôleur ci-dessus, appeler la méthode
View() équivaut à appeler la méthode View en lui passant le nom de la vue
en paramètre :

• En fait, automatiquement la méthode View() va chercher la vue qui est


placée dans le répertoire Views, dans le sous répertoire du même nom que
le contrôleur et qui s’appelle comme la méthode de l’action appelée.
111
La Vue : Exemple
• Gérer le cas où un id est null ou vide, en choisissant d'afficher une
vue d'erreur dédiée. Remplacez donc la méthode Index par :

112
La Vue : Solution
• Créez un répertoire Shared sous le répertoire Views. Maintenant,
ajoutez une vue que vous appelez Error, comme nous l'avons fait
précédemment et mettez-y le HTML suivant :

113
La Vue : Solution
• Il faut savoir que par défaut, ASP.NET MVC va chercher la vue dans le
sous-répertoire du même nom que le contrôleur, mais que si elle
n’existe pas, il ira voir ensuite dans le sous-répertoire Shared. Ce qu’il
a fait ici.

• Bon, c’est bien beau ça, mais comment nous pouvons faire en sorte
d’afficher le prénom de la personne dans notre vue ?

114
La Vue
• En fait, il est très facile de faire passer des valeurs entre le contrôleur et la
vue grâce à un dictionnaire de clé/valeur : le ViewData.

• Avec ce code, je positionne la valeur de la chaîne id dans le dictionnaire et


que cette valeur sera accessible via la clé « Nom ».

115
La Vue
• Puis dans la vue, je pourrais récupérer et afficher cette valeur en
utilisant ce même dictionnaire :

• D'ailleurs, avec l'extension du fichier .cshtml nous pourrons à la fois


mettre du C# et du HTML. On utilise le caractère @ pour utiliser du
code C# directement dans ma vue.

116
La Vue
• Remarquez que vous pouvez également utiliser l’objet ViewBag.

• Et dans la vue:

117
Le Modèle
• Reste le M, mais dans cette introduction à MVC je ne vais pas du tout
m’étendre sur ce fameux modèle, nous y reviendrons un peu plus
loin.

• Car modèle rime souvent avec base de données, même si ce n’est pas
une obligation.

• Ici pour l’instant, notre modèle va rimer avec données en dur dans le
code.

118
Le Modèle
• Créons donc une classe qui va nous permettre de simuler le
chargement d’une liste de clients.

119
Le Modèle
• Ajoutez également une classe Clients qui simulera un chargement :

120
Le Modèle : Exemple
• Ce modèle est à instancier dans le contrôleur. Créons par exemple
deux actions dans le contrôleur :

- ListeClients: qui affiche la liste des clients (Nom et Age).

- ChercheClient: qui cherche un client avec son Nom. S’il le


trouve, affiche son nom et son âge. Sinon, afficher un message qui
indique que le client n’a pas été trouvé.

121
Le Modèle
• Ce modèle est à instancier dans le contrôleur. Créons par exemple
deux actions dans le contrôleur :

122
Le Modèle
Puis vous l’aurez deviné, il va nous falloir trois vues :

• ListeClients.cshtml

• Trouve.cshtml

• NonTrouve.cshtml

123
Le Modèle : Solution
• Commençons par la vue Trouve.cshtml, qui doit se trouver dans le
sous-répertoire du même nom que le contrôleur. Elle contiendra du
HTML indiquant que le client a été trouvé, puis son âge :

124
Le Modèle : Solution
• Pour la vue NonTrouve.cshtml, le principe est le même :

125
Le Modèle : Solution
• Enfin pour la vue ListeClients, vous avez compris le principe, nous
allons pouvoir afficher la liste de tous les clients avec cette vue :

126
Le Modèle : Résultat
• http://localhost:49926/Home/ChercheClient/Nicolas

127
Le Modèle : Résultat
• http://localhost:49926/Home/ChercheClient/Marine

128
Le Modèle : Résultat
• http://localhost:49926/Home/ListeClients.

129
En résumé
• Une URL est transformée en action via le mécanisme de routing d’ASP.NET.

• Le contrôleur est une classe qui dérive de la classe de base Controller et


dont les méthodes reflètent les actions faites par l’utilisateur.

• La vue peut combiner facilement des balises HTML et du code C#, pour par
exemple afficher des informations remontées par le contrôleur grâce à
l’objet ViewData.

• Le modèle est exploité par le contrôleur et transmis à la vue pour être


affiché.
130
Chapitre 6
Convention plutôt que configuration

131
Chapitre 6: Convention plutôt que
configuration
• Le concept

• Application du concept à ASP.NET MVC

• En résumé

132
Convention plutôt que configuration
• Vous ne vous en rendez sûrement pas compte, mais le framework
MVC nous a simplifié énormément de choses.

• Sans avoir rien à faire de spécial, il a été capable de correctement


instancier nos contrôleurs.

• Aussi, il a été capable de trouver nos vues dans les bons répertoires.

133
Le concept
• La force d’ASP.NET MVC réside dans un concept qui se résume par «
Convention plutôt que configuration ».

• Le principe est de simplifier et d’accélérer la construction d’une


application en se basant sur des conventions plutôt que sur de la
configuration.

134
Application du concept à ASP.NET MVC
• Nous n’avons pas eu besoin d’écrire dans le fichier de configuration :
«tiens Monsieur le framework, c’est dans ce répertoire que tu vas
trouver mes vues et dans celui-ci que tu vas trouver mes
contrôleurs».

• Il sait que par défaut les contrôleurs se trouvent dans le répertoire


Controller, c’est une convention.

• Le but de ce concept est de limiter les fichiers de configuration d’une


application en se basant sur des standards du milieu.

135
Application du concept à ASP.NET MVC
• Dans les conventions par défaut, nous retrouvons aussi le fait qu’un
contrôleur est une classe qui est suffixée par le mot Controller, comme
notre classe HomeController.

• Le framework MVC sait que le contrôleur Home est forcément (par


convention) la classe HomeController présente dans le répertoire
Controller.

• Vous aurez également compris que les vues en rapport avec un contrôleur
se trouvent dans le répertoire Views, dans un sous-répertoire du même
nom que le contrôleur.

136
En résumé
• ASP.NET MVC dispose d’un certain nombre de conventions pour simplifier
et accélérer vos développements.

• Ces conventions portent souvent sur des emplacements. Par exemple, les
contrôleurs sont dans le répertoire Controllers, les vues dans le répertoire
Views, etc…

• Une classe contrôleur doit être suffixée par le mot Controller.

• Ces conventions permettent de réduire la taille des fichiers de


configuration : on appelle ce concept « convention plutôt que
configuration ».

137
Quiz 2
Dans le pattern MVC, qu'est-ce que le modèle ?

• un site web que l'on utilise comme modèle pour ne pas avoir à
recréer un site depuis zéro

• un ensemble de classes fournissant l'accès aux données de notre


application

• un mapping objet-relationnel (ORM), comme Entity Framework


138
Quiz 2
Qu'est-ce que la vue MVC ?

• un bout de code pour éviter le syndrome du plat de spaghettis

• un fichier composé de HTML et de CSS et que l'on verra à l'écran

139
Quiz 2
Dans le pattern MVC, à quoi sert le contrôleur ?

• à vérifier que l'on a bien payé la licence de Visual Studio

• à gérer les interactions avec l'utilisateur et à faire le lien entre la vue


et le modèle

• à être certain que les données saisies dans un formulaire sont bien
valides
140
Quiz 2
Que se passe-t-il lorsque je vais sur la page
http://localhost:49926/Home/Index ?

• Le framework MVC affiche le contenu du fichier Index qui se trouve dans le


répertoire Home

• Le framework MVC exécute la méthode Index du contrôleur


HomeController et affiche le résultat de cette méthode

• Le framework MVC affiche la vue Index du contrôleur Home

141
Quiz 2
Que fait la méthode View() héritée de la classe de base Controller

• Elle affiche la vue possédant le même nom que l'action invoquée du


contrôleur

• Elle affiche la vue Index

• Elle affiche la vue Error

142
Quiz 2
Est-ce que je peux mélanger du C# et du HTML ?

• Non, c'est impossible, il faut utiliser le contrôleur

• Oui, avec le caractère spécial @

• Oui, grâce à l'objet ViewData

143
Quiz 2
Avec cette méthode Index du contrôleur Home :
public string Index(int id)
{
return "Hello" + id;
}

... qu'affiche l'URL /Home/Index/Nicolas ?


• Hello Nicolas
• Hello
• une erreur

144
Partie 3
ASP.NET MVC en profondeur

145
Partie 3: ASP.NET MVC en profondeur
• Chapitre 7 : Les routes

• Chapitre 8 : Les test automatiques

• Chapitre 9 : Le modèle

• Chapitre 10 : TP : Compléter le modèle

• Chapitre 11 : Activité

146
Chapitre 7
Les routes

147
Chapitre 7: Les routes
• Le routing

• Créer des routes

148
Le routing
• C’est un mot anglais qu’on peut le traduire par « routage ».

• Il consiste à aiguiller les requêtes des visiteurs dans notre application


ASP. NET MVC.

• Nous avons vu la forme de routage la plus simple, qui a été ajoutée


par défaut par ASP.NET MVC.

149
Le routing

• Comme nous l’avons déjà vu, cette route, nommée «Default »,


permet de réagir à des requêtes de type /xxx/yyy/zzz.

• Ces requêtes vont instancier le contrôleur xxxController, et appeler la


méthode yyy() en lui passant en paramètre la valeur zzz .

150
Le routing
• Ainsi, une requête /Home/Index/123 permettra d’appeler la méthode
suivante :

151
Le routing
• Vous avez vu également qu’il est possible d’avoir des valeurs par
défaut, grâce à la propriété defaults qui, si la valeur du contrôleur est
absente la remplacera par Home ; de même pour action qui par
défaut vaudra Index.

• Ainsi, /Home/Index est équivalent à /Home et est également


équivalent à /.

• Que fera donc la route suivante : /Index ?

152
Le routing
• Elle appellera la méthode Index du contrôleur IndexController… qui
n’existe pas !

• Index est équivalent à /Index/Index . Le paramètre controller vaut


Index, l’action n’existe pas, donc le paramètre action est affecté à sa
valeur par défaut

153
Créer des routes
• Bien sûr ASP.NET MVC nous autorise à créer nos propres routes, voire
à modifier la route par défaut si elle ne nous plaît pas.

• Imaginons que je souhaite passer plus qu’un paramètre à ma


méthode par exemple: /Home/Index/Nicolas/Delphine.

• Le routage d’ASP.NET MVC sera incapable de vous trouver le bon


aiguillage et vous renverra une erreur 404, qui correspond à l’erreur
indiquant l’absence de ressource à l’emplacement demandé.

154
Créer des routes: Exemple
• Par exemple, imaginons que nous souhaitions nous servir de notre
application web comme d’une calculatrice et que l’URL suivante
/Ajouter/5/11 nous affiche le résultat de 16.

155
Créer des routes: Solution
• Bien sûr, vous aurez besoin de créer le contrôleur
CalculateurController et la méthode Ajouter suivante :

• Et que va renvoyer la route / ?

156
Créer des routes: Solution
• 0 bien sûr, vous avez bien suivi !Action prend la valeur par défaut
Ajouter ,valeur1 et valeur2 prennent tous les deux la valeur 0. Et
0+0, ça fait bien zéro.

• Naviguez sur /Ajouter/5/11 et vous aurez le résultat 16.

• Allez, rajoutons une petite soustraction dans notre contrôleur.

157
Chapitre 8
Les tests automatiques

158
Chapitre 8: Les tests automatiques
• Qu’est-ce qu’un test unitaire et que tester ?

• Créer un projet de test

• Un premier test

159
Les tests automatiques
• En général, tester une application est plutôt compliqué. C'est une
pratique souvent mise de côté.

• Un des gros avantages de MVC est qu’avec ce découpage, il devient


très facile de tester unitairement le modèle et les contrôleurs.

• Par contre, les vues c’est toujours compliqué !

160
Qu’est-ce qu’un test unitaire et que tester ?
• Un test constitue une façon de vérifier qu’un système informatique
fonctionne. Tester son application est une bonne pratique. Il faut
absolument le faire.

• Il y a plusieurs façons de faire des tests. Celle qui semble la plus


naturelle est celle qui se fait manuellement.

• On lance son application web, on clique partout, on regarde si elle


fonctionne.

161
Qu’est-ce qu’un test unitaire et que tester ?
• Avec ces tests automatisés, nous allons pouvoir tester le modèle et le
contrôleur.

• Nous ne pourrons pas tester la vue, car c’est un élément que nous
pouvons difficilement automatiser et qui nécessite d'interagir
directement avec le visuel.

• Un test est donc un bout de code qui permet de tester un autre code.

162
Créer un projet de test
• Il y a deux solutions pour créer un projet de test.
• La première est de le faire au moment de la création d’un projet :

163
Créer un projet de test
• La seconde solution pour ajouter un projet de test à une application
existante est de passer par l’ajout d’un projet de test.

164
Un premier test
• Nous pouvons voir que Visual Studio nous a créé un fichier de test par
défaut, dont le nommage UnitTest1.cs.

• Ici, pour notre exemple je vais tester des méthodes de math basiques,
donc je vais renommer ma classe en MathTests.

165
Un premier test
• Vous remarquerez que le contenu du fichier généré est le suivant :

• L’attribut TestClass permet d’indiquer cette classe contient des


méthodes de test. Aussi, la méthode de test est décorée de l’attribut
TestMethod.
166
Un premier test
• Nous allons créer une méthode permettant de calculer une factorielle
et nous allons la tester.

• Créez donc une classe MathHelper dans votre projet web.

167
Un premier test : Exemple
• Puis modifiez votre classe de tests pour avoir les trois tests suivants,
nous permettant de vérifier que la méthode de calcul de factorielle
est valide :
- Factorielle avec valeur 0 retourne 1.

- Factorielle avec valeur 3 retourne 6.

- Factorielle avec valeur15 retourne 1307674368000.

168
Un premier test : Solution
• La solution du premier exemple est :

169
Chapitre 9
Le Modèle

170
Chapitre 9: Le Modèle
• TP : Présentation de l’application

• Entity Framework pour le modèle

• Modéliser ses données et créer une base

• Accéder au modèle

• Tester le modèle

171
Chapitre 9: Le Modèle
• Où sont mes données ?

• Réinitialiser la base de données

• Les annotations

• Modifier les données

172
Le Modèle
• Je vous rappelle donc que le modèle correspond au M de MVC.

• Il s’agit des données et de l’état de votre application web, en général


un ensemble de classes permettant d’accéder à vos données.

173
TP: Présentation de l’application
• Pour que cela soit un maximum concret, nous allons réaliser une
petite application jusqu'à la fin de cette formation.

• Cette application est plutôt utile pour un besoin précis, à savoir


m’aider, moi et mes collègues de travail, à choisir dans quel restaurant
nous allions manger les vendredis midis.

174
TP: Présentation de l’application
• Le principe est simple. Il y a une liste de restaurants disponibles,
sachant que cette liste peut être enrichie par tout le monde. Chaque
personne peut voter pour un ou plusieurs restaurants.

• Bien sûr, le restaurant choisi est celui qui récoltera le plus de vote. Le
vote est aveugle, c’est-à-dire qu’on ne connait pas les votes des autres
tant qu’on n’a pas voté. Une fois voté, il est impossible de changer son
choix.

175
Entity Framework pour le modèle
• Le modèle c’est donc toutes les classes qui vont nous permettre de «
modéliser » notre application, ainsi que la couche permettant de faire
persister les informations.

• l y a plusieurs solutions pour faire persister des données, mais je vais


présenter ici comment nous pouvons enregistrer ces données en base de
données.

• Pour cet accès aux données, nous allons utiliser une base de données SQL
Server locale, ce qui nous évitera plein de configurations de serveurs.

176
Entity Framework pour le modèle
• Il y a plusieurs solutions pour accéder à une base de données.

• Ici nous allons par exemple utiliser un ORM comme Entity Framework
pour faciliter cet accès aux données.

177
Modéliser ses données et créer une base
• Nous allons commencer par créer un nouveau projet pour notre
application, une application MVC bien sûr !

• Nous pouvons l’appeler ChoixResto par exemple, ou n’importe quel


nom qui vous fait plaisir ; ce sera bien sûr un projet « Empty ».

• N’hésitez pas à cocher la case permettant de créer un projet de test


unitaire, nous en aurons besoin.

178
Modéliser ses données et créer une base
• D’une manière générale, il y a plusieurs façons de créer sa couche
d’accès aux données avec Entity Framework :

- Database First: En générant un modèle à partir d’une base de données.

- Model First: En créant un modèle à partir du concepteur de Visual Studio.

- Code First: En codant directement les classes de nos entités.

• On va travailler avec Code First.


179
Modéliser ses données et créer une base
• La première chose à faire est de référencer Entity Framework. Le plus
simple est d’utiliser NuGet et d’aller chercher directement le package
Entity Framework.

180
Modéliser ses données et créer une base
• Vous pourrez alors rechercher et installer le package grâce au mot clé
EntityFramework :

181
Modéliser ses données et créer une base
• Notre application doit gérer plusieurs objets, nous allons les créer
dans le répertoire Models.

• Mais tout d’abord, quels sont ces classes?

182
Modéliser ses données et créer une base
Les classes à créer sont:

• Utilisateur
• Resto
• Vote
• Sondage

Et les propriétés de chaque classe?

183
Modéliser ses données et créer une base
• Ajoutez dans un premier temps une classe Utilisateur .

• Chaque utilisateur doit posséder un identifiant technique et un


prénom :

184
Modéliser ses données et créer une base
• Nous avons besoin de manipuler des restaurants.

• Créez la classe suivante où chaque restaurant possède également un


identifiant technique, un nom et un numéro de téléphone :

185
Modéliser ses données et créer une base
• Un vote, c’est un utilisateur qui choisit un restaurant, nous aurons
donc la classe suivante :

• Remarquez que certaines propriétés sont précédées du mot clé


virtual , cela permet d’activer le chargement paresseux (lazy loading)
de la propriété par Entity Framework.

186
Modéliser ses données et créer une base
• Et enfin, un sondage, c’est une liste de votes pour une date donnée :

187
Modéliser ses données et créer une base
• Nous avons désormais besoin d’un contexte permettant d’accéder à
ces données et qui permet également que toute la magie d’Entity
Framework opère.

• Il s’agit d’une nouvelle classe qui dérive de la classe DbContext ,


appelons là BddContext.

188
Modéliser ses données et créer une base
• Le point d’entrée de ce contexte est la liste des sondages. Pour cela,
nous utiliserons la classe DbSet générique avec notre type Sondage .

• Nous avons également ajouté un autre point d’entrée, la liste des


restaurants.

• Et voilà, c’est terminé pour la première version de notre modèle.

189
Accéder au Modèle
• Nous allons désormais pouvoir accéder au modèle et indirectement à
la base de données.

• Pour cela, nous allons pouvoir utiliser notre point d’entrée


BddContext .

• En général, une bonne pratique consiste à encapsuler les différentes


opérations que nous pouvons réaliser sur ce modèle.

190
Accéder au Modèle
• Nous allons donc ici créer une couche d’accès aux données, souvent
abréviée en DAL (pour Data Access Layer en anglais).

• Première chose à faire, définir le contrat de cette DAL. Qui dit contrat,
dit interface.

191
Accéder au Modèle
• Puis nous avons besoin de créer une classe qui implémente cette
interface et qui va s’occuper de lister les différents restaurants
enregistrés en base.

• Appelons là DAL. Que sera t il le corps de cette classe?

192
Accéder au Modèle

193
Accéder au Modèle
• On utilise la classe BddContext pour accéder aux différents éléments
de la base de données.

• Nous instancions cet objet dans le constructeur de la DAL.

• Et nous le supprimons proprement en appelant sa méthode Dispose.

• Ajoutons à présent une méthode pour créer un nouveau restaurant.

194
Accéder au Modèle
• Ajoutons à présent une méthode pour créer un nouveau restaurant,
dans notre interface premièrement, puis son implémentation dans la
DAL :

195
Accéder au Modèle
• Pour créer un nouveau restaurant, il suffit de créer un objet Resto et
de l’ajouter à la liste des Restos :

196
Tester le modèle
• Alors, comment vérifier que tout cela fonctionne ?

• Vous avez deviné : les tests automatiques.

• Créons donc une nouvelle classe de tests : DalTests .

• Nous allons développer un test qui permet de créer un restaurant et


de vérifier qu’il existe bien en récupérant tous les restaurants.

197
Tester le modèle

198
Tester le modèle
• Il faudra également ajouter la référence à Entity Framework comme
nous l'avons déjà fait pour l'application web, grâce à NuGet.

• Modifiez le fichier app.config de votre projet de test pour y mettre :

199
Tester le modèle

200
Où sont mes données ?
• Alors, OK, on parle d’une base de données depuis tout à l’heure, mais
elle est où ?

• En fait, c’est Entity Framework qui l’a créée pour nous.

• Par convention, lorsque nous utilisons l’approche Code First comme


nous venons de le faire, Entity Framework se charge de créer la base
de données.

201
Où sont mes données ?
• Il essaie dans un premier temps de se connecter à un Sql Server
Express.

• S’il y arrive, alors il y crée la base. S’il n’y arrive pas, alors il essaie de
se connecter à la base locale (LocalDb) pour y créer la base.

• Comme nous avons installé Visual Studio 2013 (ou 2012), nous
disposons par défaut de la base locale (LocalDb).

202
Où sont mes données ?
• Allez dans l’explorateur de serveurs et cliquez sur Connexion à la base
de données :

203
Où sont mes données ?
• Saisissez l’adresse du serveur ainsi que la base de données.

204
Où sont mes données ?
• Remarquez que la base de données s’appelle du même nom que
notre classe de contexte, préfixée par le nom du projet.

205
Réinitialiser la base de données
• Et si nous réexécutions notre test ?

206
Réinitialiser la base de données
• Et si nous réexécutions notre test ?

• Pourquoi le test est rouge?

• Echec de Assert.AreEqual. Attendu 1 et en fait on a 2. Et c’est sur la


ligne :

207
Réinitialiser la base de données
• Il faut donc faire en sorte de réinitialiser la base de données. Pour
cela, on utilise la commande magique suivante :

• Cette commande magique permet d’indiquer que nous souhaitons


réinitialiser notre base de données en la supprimant (Drop) puis en la
recréant à chaque fois (CreateDatabaseAlways).

208
Réinitialiser la base de données

209
Réinitialiser la base de données
• Si toutes vos méthodes de test ont besoin d’appeler cette méthode,
alors on peut utiliser le framework de test pour le faire à notre place,
en décorant une méthode de l’attribut TestInitialize.

• À noter que l'équivalent pour avoir une méthode appelée après


chaque test est l'attribut TestCleanup.
210
Les annotations
• Vous vous rappelez de notre table Restoes?

• En fait, Entity Framework a essayé de pluraliser le nom de la table,


sauf qu'il l'a fait en anglais.

• Mais rassurez-vous, il est possible d’influer sur la génération


automatique d’Entity Framework, afin qu’il utilise ce que nous
voulons, plutôt que ses conventions.

211
Les annotations
• Par exemple, pour le forcer à appeler ma table Restos, je peux
décorer ma classe de l’attribut Table:

212
Les annotations
• Il existe également l’annotation [Required], qui va permettre de
rendre une propriété obligatoire.

• Par exemple sur un restaurant, il sera obligatoire d’avoir un nom, par


contre on peut se passer d’un numéro de téléphone si jamais celui-ci
n’accepte pas de réservation.

213
Les annotations
• D’ailleurs, nous allons faire de même avec le prénom de l’utilisateur.

• Notez également les attributs MaxLength et MinLength qui


permettent de limiter la taille d’un champ.

214
Modifier les données
• Nous allons pour ce faire enrichir notre DAL pour permettre la
modification d’un restaurant.

215
Modifier les données
• Pour l’implémentation, c’est en fait très facile. Il suffit dans un
premier temps de rechercher le restaurant possédant cet identifiant,
de le modifier et d’appliquer les changements :

216
Modifier les données
• Reste à écrire un petit test pour vérifier que tout fonctionne :

217
En résumé
• Le modèle consiste en des classes qui permettent d’accéder aux
données de notre application.
• Nous pouvons utiliser Entity Framework pour établir notre modèle et
gérer sa persistance en base de données.
• Avec Visual Studio 2012 et 2013, nous pouvons créer et utiliser
facilement une base de données locale.
• Il est possible d’agir sur la génération automatique de la base de
données grâce à des annotations, qui prennent la forme d’attributs
décorant le modèle.

218
Chapitre 10
Compléter le Modèle

219
Chapitre 10: Compléter le Modèle
• Instructions pour réaliser le TP

• Quelques précisions complémentaires

• Correction

220
TP: Compléter le Modèle
• Nous avons commencé à implémenter notre modèle mais il n’est pas
tout à fait fini.

• Bon, vous avez compris le principe. On va compléter notre modèle et


notre DAL.

• Voici ce que nous avons jusqu’à présent :

221
TP: Compléter le Modèle
• Côté Utilisateur:

• Côté Resto:

222
TP: Compléter le Modèle
• Pour les Votes:

• Et pour les Sondages:

223
TP: Compléter le Modèle
• La classe de contexte est :

• Et pour l’instant, l’interface de la DAL est :

224
TP: Compléter le Modèle
• Une fois n’est pas coutume, pour la réalisation de ce TP, vous allez
faire du TDD (Test Driven Development).

• Je vous ai écrit les tests que je souhaite voir passer avec plusieurs cas
nominaux.

• Copiez-les dans votre solution et faites en sorte qu’ils passent tous.

225
Quelques précisions complémentaires
• Une des premières choses que vous verrez, c’est que j’ai fait plusieurs
modifications dans le modèle.

• J’ai par exemple rajouté un mot de passe dans la classe utilisateur,


celui-ci devant être obligatoire.

226
Quelques précisions complémentaires
• J’ai aussi ajouté une classe de résultats.

• Même si vous pouvez deviner son contenu en regardant les tests, je


vous la rajoute ici afin que vous l’ajoutiez dans le modèle :

227
Quelques précisions complémentaires
• La classe IDal est :

228
Quelques précisions complémentaires
• Vous n’allez évidemment pas stocker le mot de passe en clair et vous
allez utiliser un système de salage MD5 pour enregistrer le mot de
passe.

• Voici une méthode qui permet de réaliser un encodage en MD5 :

229
TP: Correction

230
Chapitre 11
Activité

231
Activité
• Pour cette activité, vous allez créer une petite application web qui va
permettre de gérer une e-bibliothèque.

• L'objectif est de mettre en pratique ce que vous avez appris dans les
trois premières parties de la formation.

• Vous allez donc commencer en douceur et améliorerez votre


application au fur et à mesure des activités de cette formation.

232
Activité
Voici ce que vous devrez réaliser dans cette activité :

• Créer un modèle très simple d’application pour gérer une e-blibliothèque


et y inclure un échantillon de livres, d’auteurs et de clients.

• Ajouter des fonctionnalités à l’application pour afficher la liste de tous les


livres, la liste de tous les auteurs et la liste de tous les livres d’un auteur.
Il vous faudra également permettre d’afficher le détail d’un livre.

• Ajouter une fonctionnalité pour pouvoir rechercher des livres.

233
Créer le modèle pour gérer sa e-bibliothèque
• 1 auteur possède un identifiant et un nom

• 1 livre possède un identifiant, un titre, une date de parution, et un


seul auteur

• 1 client possède un nom et un email. L’email est unique et identifie le


client

• 1 client peut emprunter un livre et un livre ne peut être emprunté


que par une seule personne à la fois
234
Créer le modèle pour gérer sa e-bibliothèque
• Il vous faudra ajouter un échantillon de 5 livres de votre choix, avec 3
auteurs différents.

• Puis vous créerez 2 clients.

• En tout, 3 livres doivent être empruntés par 2 clients (donc un client


empruntera 2 livres).

235
Ajouter des fonctionnalités d’affichage
• la liste de tous les livres (titre + auteur) avec l'URL : /Afficher

• la liste de tous les auteurs avec l'URL : /Afficher/Auteurs

• la liste de tous les livres d’un auteur par son identifiant avec l'URL :
/Afficher/Auteur/2

• d’afficher un livre par son identifiant (titre + date de parution +


emprunteur si existant) avec l'URL : /Afficher/Livre/3
236
Ajouter une fonctionnalité de recherche
• Ici vous allez introduire une fonctionnalité de recherche par mot-clé
dans le titre des livres ainsi que dans les noms des auteurs.

• Par exemple, pour rechercher un livre dont le titre ou l’auteur


contient le mot « abc », on utilisera l’URL : /Rechercher/Livre/abc.

• Remarque : on ne tiendra pas compte de la casse (pas de distinction


entre les majuscules et les minuscules).

237
Partie 4
Les vues et les contrôleurs

238
Partie 4: Les vues et les contrôleurs
• Chapitre 12 : Afficher les vues

• Chapitre 13 : Économiser son code avec les helpers et les vues partielles

• Chapitre 14 : Utiliser les contrôleurs

• Chapitre 15 : Valider les données

• Chapitre 16 : Presque prêts pour le resto

• Chapitre 17 : Activité

239
Chapitre 12
Afficher les vues

240
Chapitre 12 : Afficher les vues
• Afficher une vue

• Afficher les données du modèle

• Les vues fortement typées

• Les modèles de vues

• Mixer HTML et C#

241
Afficher une Vue
• Nous avons vu que par convention, les vues se plaçaient dans le
répertoire /Views, plus précisément dans un sous-répertoire
correspondant au nom du contrôleur lié à la vue.

• Pour notre application choix-resto, si nous voulons créer une page


d’accueil accessible par exemple via l’adresse /, nous pouvons utiliser
le routing par défaut et créer un contrôleur nommé HomeController
et créer une méthode Index qui renvoie simplement la vue par
défaut.

242
Afficher une Vue
• Nous allons juste modifier la méthode de définitions des routes pour
remplacer Home par Accueil :

243
Afficher une Vue
• Maintenant, nous allons créer un simple contrôleur de base, Appelez-
le AcceuilController.

• Si nous démarrons le projet, nous aurons:

244
Afficher une Vue
• Et là, c’est à nous de jouer. Nous allons créer la vue Index.

245
Afficher les données du modèle
• Nous avons vu que nous pouvions facilement afficher des
informations dynamiques dans nos vues en les plaçant, depuis le
contrôleur, dans le dictionnaire ViewData.

246
Afficher les données du modèle
• Nous mettons dans ce dictionnaire trois objets différents, une chaîne,
une date et un Resto. Il est ensuite très simple d’exploiter ces
données dans la vue :

247
Afficher les données du modèle
• On peut simplifier ça, par exemple, plutôt que de faire deux casts
pour accéder au resto, nous aurions pu faire:

248
Afficher les données du modèle
• Il est possible de simplifier l’écriture en utilisant un autre objet pour
passer les informations du contrôleur à la vue, qui fonctionne presque
pareil que l’objet ViewData .

• Il s’agit de l’objet ViewBag.

249
Les vues fortement typées
• Quoique… Ce ViewBag… sans complétion automatique. Ce n’est
vraiment pas pratique.

• Heureusement, il y a encore une autre solution. Plutôt que de passer


les données par le ViewBag (ou le ViewData ), on peut utiliser le
modèle lié à la vue.

• Il existe en effet une surcharge de la méthode View() qui permet de


passer le modèle directement à la vue.

250
Les vues fortement typées
• Par exemple, imaginons que la vue Index permette d’afficher le détail
d’un restaurant.

• Il suffit de passer le restaurant en paramètre de la méthode View


pour affecter automatiquement notre modèle à ce restaurant.

251
Les vues fortement typées
• Ici, on passe un restaurant tout fraîchement créé en paramètre de la
méthode View.

• Derrière cela, automatiquement, le moteur du framework affecte la


propriété Model de la vue à celui qui est passé en paramètre.

252
Les vues fortement typées
• Sauf que je connais le type de mon modèle moi ! C’est un Resto ! Et
bien, il suffit de le dire à la vue, et ça se passe tout en haut

253
Les modèles de vues
• OK, ça fonctionne. Mais au tout début de mon exemple, j’affichais les
informations suivantes :

• Un message, une date et un Resto.

254
Les modèles de vues
• Et puis là, pour illustrer les vues fortement typées, le message et la
date ont disparus.

• Il suffit de passer les informations complémentaires dans le ViewData


(ou le ViewBag). On a donc le modèle dans la propriété Model et le
reste dans le ViewBag.

255
Les modèles de vues
• Ce qui donne dans notre contrôleur :

256
Les modèles de vues
• Et dans la vue :

257
Les modèles de vues
• En fait, il y a une solution plus élégante, ce que l’on appelle
« les modèles de vues », souvent utilisés dans leurs traductions
anglaises « view-models ».

• Leur fonction est d’adapter le modèle à la vue.

• En plus, cela nous permet facilement de faire remonter plusieurs


éléments du modèle d’un coup.

258
Les modèles de vues
• Créons alors notre premier view-model. Pour cela, nous allons le
mettre dans un répertoire à la racine, nommé ViewModels :

259
Les modèles de vues
• Puis créons une classe dedans, que nous appelons par exemple
AccueilViewModel :

260
Les modèles de vues
• Et vous aurez compris qu’il n’y a plus qu’à remplacer le modèle par le
view-model dans le contrôleur :

261
Les modèles de vues
• Le code de la vue n’en est que plus clair :

262
Mixer HTML et C#
• Nous avons donc compris que la vue, c’était de l’HTML enrichi.

• Nous avons vu que nous pouvions mettre à peu près n’importe quelle
expression C# dans le code de la vue, grâce à @.

263
Mixer HTML et C#
• Imaginez par exemple que je souhaite afficher une liste de restaurants
dans un tableau HTML.

• Pour l’exemple, je modifie le view-model pour avoir une liste de


restaurants à la place d’un unique restaurant :

264
Mixer HTML et C#
• que j’alimente ainsi dans mon contrôleur :

265
Mixer HTML et C#
• Grâce à une boucle, voici comment afficher ma liste des restaurants
dans une table HTML :

266
Mixer HTML et C#
• J'ai bien sûr ajouté un peu de CSS pour avoir quelques bordures :

• Et pour les contrôles de formulaires ? C’est pareil. On mixe !

267
Mixer HTML et C#
• Revenons à notre ancien view-model où nous avons un unique
restaurant et pas une liste.
• Nous pouvons donc simplement faire une page avec des contrôles de
formulaire :

268
Chapitre 13
Économiser son code avec les helpers et les vues partielles

269
Chapitre 13: Économiser son code avec les
helpers et les vues partielles
• Les helpers HTML

• Les helpers fortement typés

• Les vues partielles

270
Les helpers HTML
• Alors, écrire du HTML comme ça, c’est très bien. Mais reconnaissez
que c’est un peu fastidieux.

• Heureusement, ASP.NET MVC a la solution : les helpers HTML.

• Ils nous permettent d’écrire moins de code tout en gardant un fort


contrôle sur le HTML.

271
Les helpers HTML
• Par exemple, il est très facile de simplifier le code que nous avons vu
juste au-dessus :

• En utilisant les helpers HTML ! Voici par exemple l’équivalent avec ces
fameux Helpers :

272
Les helpers HTML
• Il y a un helper pour à peu près toutes les balises de formulaire. Par
exemple, une case à cocher et une zone de texte non éditable
peuvent être créées avec les helpers suivants :

273
Les helpers HTML
• Passons maintenant à deux helpers particuliers qui vont permettre de
générer des listes de sélections et qui vont en interne générer la
balise HTML <select>.

• Il s’agit des helpers Html.DropDownList et Html.ListBox.

• La particularité de ces helpers est qu’ils doivent être pré-remplis avec


une liste de propositions.

274
Les helpers HTML
• Pour cela, on utilise un objet SelectList que l’on va alimenter avec la
liste des propositions.

• Tout ceci est passé dans le ViewBag et sera utilisé dans la vue avec :

275
Les helpers HTML
• Remarquez qu’il est possible de présélectionner un élément de la liste
si nous le souhaitons car ici, par défaut il s’est positionné sur le
premier.

• Il suffit dans ce cas d’ajouter un nouveau paramètre au constructeur


de la SelectList pour lui passer l’identifiant de l’élément à
sélectionner.

276
Les helpers HTML
• On ne va pas passer en revue tous les helper, mais voyons-en encore
un qui va vous servir : il s’agit du helper qui permet de générer la
balise de formulaire <form>.

• La balise de formulaire, et notamment son attribut action, est


fortement liée à la route où nous souhaitons envoyer les
informations.

277
Les helpers HTML
• Eh bien ASP.NET MVC nous a entendus !

• Il suffit d’utiliser le helper du formulaire et c’est lui qui va se charger


de construire l’URL à partir d’un nom du contrôleur et d’une de ses
méthodes.

278
Les helpers fortement typés
• Ils fonctionnent comme les helpers que nous venons de voir, mais
plutôt que de travailler avec des chaînes de caractères, ils
fonctionnent grâce au pouvoir des expressions lambdas.

• Nous avons par exemple vu un helper juste au-dessus qui permettait


de générer une zone de texte modifiable

• Celui-ci peut également s’écrire :

279
Les helpers fortement typés
• Ils ne produisent cependant pas exactement le même code HTML.
Voici ce que génère le premier :

• Et le second :

280
Les helpers fortement typés
• Il y a des attributs en plus, data-val et data-val-required.

• C’est en fait à cause de notre modèle. Rappelez-vous, la classe Resto


est la suivante :

281
Les helpers

282
Les helpers

283
Les vues partielles
• Si vous avez besoin de réutiliser des morceaux de vues à plusieurs
endroits, alors les vues partielles sont pour vous.

• Imaginons par exemple que nous ayons besoin d’un formulaire de


connexion dans notre site.

• Mais si nous devons poser ce formulaire sur d’autres pages du site,


nous allons devoir refaire à nouveau ce même formulaire.

284
Les vues partielles
• La solution : la vue partielle.

• Les vues partielles viennent avec un helper qui permet de renvoyer


une vue sous la forme d’une chaîne de caractères.

• Cette chaîne peut ainsi être utilisée à l’intérieur d’une autre vue pour
produire du HTML qui se répète.

285
Les vues partielles
• Créons pour l’exemple une nouvelle vue dans le sous-répertoire
Accueil :

286
Les vues partielles
• Visual Studio nous génère une vue mais cette fois-ci elle est vide.

• En tout cas, il n’y a pas les balises de base d’une page HTML. En effet,
il ne s’agit pas d’une page, mais d’un bout de page.

• Du coup, elle ne doit surtout pas contenir les balises <html> ou


encore <body>.

287
Les vues partielles
• Pour l’exemple, nous n’allons pas faire une vue partielle trop
complexe. Elle sera simplement :

288
Les vues partielles
• Et pour l’utiliser ? C'est très facile.

• Il suffit d’utiliser le helper Html.Partial qui renvoie une chaîne de


caractères représentant du HTML. Notre vue Index sera :

• Disons que c’est vrai si la vue partielle est dans le même répertoire,
mais il faudra donner le chemin d’accès si jamais elle se trouve dans
un autre répertoire.
289
En résumé
• Les vues permettent d’afficher le HTML que l’utilisateur verra dans
son navigateur.

• On peut mixer du HTML et du C# dans une vue grâce au caractère @.

• Il est possible de typer une vue afin que sa propriété Model soit
connue et que la vue bénéficie de l’auto-complétion.

290
En résumé
• Il existe un grand nombre de helper HTML qui ont pour objectif de
simplifier pour nous la génération des balises des contrôles HTML

• Les vues peuvent être également partielles afin qu’un bout de page
puisse être affiché dans une autre

291
Chapitre 14
Utiliser les contrôleurs

292
Chapitre 14: Utiliser les contrôleurs
• Rappels et précisions

• Passer des paramètres au contrôleur

• Le binding de modèle

293
Rappels et précisions
• Le contrôleur peut être vu comme le point d’entrée de la requête car
c’est lui qui va manipuler le modèle et qui va choisir la vue à afficher.

• On a vu qu’en fait, il y a un intermédiaire avant que la requête ne soit


traitée par le contrôleur, il s’agit du mécanisme de routing qui permet
de transformer une URL en action de contrôleur.

• Avant de commencer ce chapitre, Nous allons nous intéresser à des


contrôleurs un peu plus complexes histoire de commencer à faire des
choses sympathiques.

294
Rappels et précisions
• Pour cela, nous allons créer un nouveau contrôleur, qui va nous
permettre de gérer les restaurants. Appelons le RestaurantController.

• Nous allons profiter de cette méthode index pour construire une liste
de restaurants et l’afficher sur la vue du même nom.

• Le contrôleur va donc appeler notre modèle via la couche d’accès aux


données que nous avons créé puis renvoyer le modèle à la vue.

295
Rappels et précisions
• Ce qui donnerait :

• C’est bien ça qu’il faut faire. Par contre, pour l’instant nous n’avons
pas de données en base ; pas de restaurants, pas d’utilisateurs, rien !

296
Rappels et précisions
• Pour faciliter notre travail, nous allons temporairement initialiser
notre base de données avec quelques valeurs de départ.

• Un peu comme ce que nous avions fait pour nos tests où nous avions
choisi de remettre à zéro la base de données avant chaque lancement
de test.

• Ici, ce que nous souhaitons faire, c’est qu’à chaque nouveau


démarrage de notre application web, nous ayons quelques données
simples et maîtrisées.

297
Rappels et précisions
• Pour ce faire, il suffit d’écrire une classe qui hérite de
DropCreateDatabaseAlways que nous avons déjà utilisé et de
substituer sa méthode Seed.

298
Rappels et précisions
• Il ne me reste plus qu’à appeler cette classe depuis le Global.asax.cs :

299
Rappels et précisions
• Créons ensuite une vue toute simple qui permet simplement de lister
les restaurants.

• Générer un lien vers l’action Modifier Restaurant, en lui passant en


paramètre l’id du restaurant.

300
Rappels et précisions
• La vue complète sera :

301
Passer des paramètres au contrôleur
• Qu'est ce qu’il fait la navigation sur l’URL
/Restaurant/ModifierRestaurant/1?

• Il va instancier le contrôleur Restaurant, appeler la méthode


ModifierRestaurant et mettre la valeur 1 dans le paramètre nommé
id.

• Bon, forcément, pour l’instant, cela ne peut pas marcher car nous
n’avons pas de méthode ModifierRestaurant. Il suffit de la rajouter.

302
Passer des paramètres au contrôleur
• La méthode ModifierRestaurant sera:

• Et si on veut renvoyer l’utilisateur vers une vue spéciale s’il n’y a pas
de valeur dans le paramètre?

303
Passer des paramètres au contrôleur
• La méthode ModifierRestaurant sera donc :

• La vue Error n'existe pas dans notre solution. Vous pouvez la rajouter.

304
Passer des paramètres au contrôleur
• Mettre l’id du restaurant dans le ViewBag , c’est bien, mais c’est un
peu limité.

• Bien sûr, ici nous aurons intérêt à accéder au modèle pour récupérer
le restaurant à partir de son id.

• Modifier la méthode afin qu’il récupère la restaurant.

305
Passer des paramètres au contrôleur
• La méthode ModifierRestaurant sera:

306
Passer des paramètres au contrôleur
• Une fois ce restaurant obtenu, nous pouvons le passer en tant que
modèle de la vue.

• Mais tout d’abord, il faut créer la vue.

307
Passer des paramètres au contrôleur
• La vue sera :

308
Passer des paramètres au contrôleur
• La première chose à remarquer, c’est qu’avec notre helper
Html.BeginForm nous générons une balise dont l’action pointera vers
l’action ModifierRestaurant de notre contrôleur.

• En effet, le HTML généré est :

309
Passer des paramètres au contrôleur
• Sauf que du coup, nous allons faire exactement la même chose dans
les deux cas, à savoir afficher le restaurant à partir de son id, situé en
paramètre du contrôleur.

• Il nous faut un moyen de déterminer si nous sommes dans le cas d’un


POST afin de pouvoir faire les modifications adéquates.

• Et si nous utilisions l’objet représentant la requête ?

310
Passer des paramètres au contrôleur
• La méthode sera :

311
Passer des paramètres au contrôleur
• Et si je vous disais que nous pouvons simplifier notre méthode du
contrôleur ?

• La première bonne nouvelle, c’est qu’ASP.NET MVC est capable


automatiquement de transformer les valeurs de l’objet Form en
paramètres du contrôleur ayant le même nom.

312
Passer des paramètres au contrôleur
• Nous pouvons donc rajouter deux paramètres dans la signature de
notre action pour avoir :

313
Passer des paramètres au contrôleur
• Mais si je vous disais qu’on peut définir deux méthodes de contrôleur
différentes pour les actions GET et POST ?

314
Passer des paramètres au contrôleur
• Et le POST :

315
Le binding de modèle
• Quoi ? On peut encore simplifier ?

• Regardez cette nouvelle version de l’action en version POST :

316
Chapitre 15
Valider les données

317
Chapitre 15: Valider les données
• Validation de modèle

• Validation coté client

• Validation avancée

• Afficher la bonne vue

• Tester un contrôleur

318
Validation de modèle
• Maintenant que nous savons récupérer un modèle modifié suite à
une soumission de formulaire, il est temps de vérifier que notre
utilisateur n’a pas fait n’importe quoi.

• Et oui, difficile de faire confiance à un utilisateur lambda.

• Qui me dit par exemple qu’il ne va pas oublier de saisir un nom de


restaurant alors que celui-ci est obligatoire ?

319
Validation de modèle
• Eh oui, rappelez-vous, sur notre modèle nous avions dit que le nom
du restaurant devait être obligatoire :

320
Validation de modèle
• Il suffit de regarder le contenu de la propriété IsValid de l’objet
ModelState.

321
Validation de modèle
• Et dans la vue, nous avons au final :

322
Validation de modèle
• Et le résultat :

• Ce message d’erreur est créé automatiquement par le framework de


validation à partir de ce que nous avons dans le modèle.

323
Validation de modèle
• Si nous souhaitons modifier le message d’erreur, nous pouvons
l’indiquer dans l’attribut :

324
Validation de modèle
• Le nom de l’attribut class est celui qui est utilisé par défaut. Il est
possible d’utiliser cet attribut pour rajouter la couleur rouge.

• D’ailleurs, ce style est créé par défaut lorsque vous créez un projet
ASP.NET MVC, il se situe à cet emplacement /Content/Site.css.
Il s’agit d’une feuille de style tout bête créée par Visual Studio.

• Nous pouvons l’ajouter à notre vue, dans la section <head>

325
Validation de modèle
• Si votre message n'est toujours pas rouge ou si le fichier Site.css ne
contient pas le style suivant, ajoutez-le à votre feuille de style :

326
Validation coté client
• Mais il existe une autre validation, celle qui est jolie et qui fait gagner
du temps : la validation côté client.

• Rappelez-vous dans notre introduction au HTML, nous avions parlé de


JavaScript et nous avions notamment montré comment faire une mini
validation côté client.

• Il s’agit en fait d’une méthode JavaScript qui est exécutée par le


navigateur au moment de la soumission du formulaire et qui
empêche cette soumission si jamais nos champs ne sont pas valides.

327
Validation coté client
• Cette validation a un fort intérêt parce qu’elle empêche la page d’être
envoyée au serveur si jamais il y a un problème, ce qui fait gagner du
temps à nos utilisateurs.

• Par contre, elle ne peut suffire d’elle-même car un utilisateur a la


possibilité de désactiver le JavaScript dans son navigateur.

• Il vous suffit d’inclure des scripts déjà prêts à l’emploi et qui en plus,
ont été générés dans notre solution.

328
Validation coté client
• Rajoutez-donc dans la balise <head> de notre vue les scripts suivants :

• Réaffichez la page de modification d’un restaurant pour tenter de


valider notre formulaire sans que le nom ne soit rempli.

• Impossible ! Vous pouvez constater qu’il n’y a aucun aller-retour


serveur et que la page n’est pas postée.
329
Validation coté client
• Notez que ce principe de validation fonctionne avec l’attribut
Required que nous avons utilisé sur le nom du restaurant

• Mais également avec plein d’autres attributs qui permettent de


valider plein de choses différentes.

• Vous pouvez faire des validations encore plus compliquées grâce aux
expressions régulières. Cela pourrait servir par exemple à vérifier
qu’une adresse email est bien formée.

330
Validation coté client
• Notez que ce principe de validation fonctionne avec l’attribut
Required que nous avons utilisé sur le nom du restaurant

• Ex: nous dirons qu’un numéro de téléphone commence par 0 et est


suivi de 9 chiffres (pas d’espaces, pas de / ni de tirets) :

331
Validation coté client
• Bon, OK, le message d’erreur n’est pas vraiment très sympathique…
Mais vous savez comment le changer.

• Il suffit de remplir la propriété ErrorMessage :

332
Validation coté client
• Si nous voulons par exemple qu’un champ ne soit valide que si sa
valeur est comprise entre deux autres, nous pourrons utiliser
l’attribut Range.

• Idéale pour l’âge de notre utilisateur par exemple…

333
Validation avancée
• Si malgré tout cela vous n’arrivez pas à couvrir tous les scénarios
validation que vous souhaitez, il vous reste d’autres options.

• La première, simple, est de faire vos validations côté serveur, dans


votre contrôleur.

• Un peu comme ce que nous avions fait au tout début, avant de


connaître le mécanisme de validation.

334
Validation avancée
• Imaginons par exemple que vous ayez fait un formulaire permettant
de créer un nouveau restaurant.

• Il pourrait être judicieux avant d’ajouter ce nouveau restaurant, de


vérifier qu’il n’existe pas déjà.

• Pour cela, nous pouvons utiliser la méthode dans notre DAL qui va
vérifier si un restaurant existe :

335
Validation avancée
• Ensuite, il nous faut créer deux méthodes dans le contrôleur (GET et
POST) :

336
Validation avancée
• ainsi que la vue associée CreerRestaurant.cshtml :

337
Validation avancée
• Imaginons par exemple que vous ayez un formulaire client où vous devez
offrir la possibilité de saisir un numéro de téléphone fixe ou un numéro de
téléphone portable ou les deux, et qu’il faille au moins un numéro de
téléphone.

• On ne peut pas envisager d’utiliser l’attribut Required sur les champs car le
résultat est conditionné par ce qu’il y a dans les deux champs.

• Si nous devons faire ce test dans l’action qui permet de créer, puis dans
l’action qui permet de modifier, nous allons dupliquer plein de code.

338
Validation avancée
• Il y a plusieurs solutions pour résoudre ce problème. La première est
de faire en sorte que le modèle porte sa propre validation, validation
qui doit être compatible avec le mécanisme de validation du
framework ASP.NET MVC.

• Cette solution c’est l’implémentation de l’interface


IValidatableObject. Elle impose l’implémentation d’une méthode de
validation.

339
Validation avancée

340
Validation avancée
• Il existe une autre solution qui consiste à créer un nouvel attribut, au
même titre que ceux déjà existants comme Required.

• Pour ce faire, il faut créer une nouvelle classe qui va dériver de


ValidationAttribute.

341
Validation avancée

342
Validation avancée
• Ensuite, il n’y a plus qu’à utiliser l’attribut, comme on aurait pu le faire
avec ceux que nous connaissons déjà :

343
Afficher la bonne vue
• Nous avons déjà vu que c’était la méthode View() et la méthode
PartialView() qui étaient responsables du choix de la vue que le
contrôleur allait afficher.

• Sans paramètres, ces vues affichent la vue par défaut, conformément


aux conventions.

• Il est également possible de choisir une autre vue en indiquant son


nom ou son emplacement en paramètre de la vue.

344
Afficher la bonne vue
• Nous avons également aperçu l’utilisation de la méthode
RedirectToAction. Comme son nom le suggère, cette méthode
effectue une redirection et exécute ensuite l’action passée en
paramètre.

• Il est également possible de renvoyer le code HTTP 404, indiquant


que la ressource est introuvable en utilisant la méthode
HttpNotFound .

345
Afficher la bonne vue
• Dans le même genre, nous pouvons également renvoyer du JavaScript
ou du JSON.

• En général, on se sert du JSON pour sérialiser ou désérialiser un objet


afin de le faire transiter entre deux systèmes hétérogènes.

• Par exemple, nous pouvons renvoyer un code HTTP d’erreur 401,


indiquant que l’accès à la ressource est non autorisé, grâce à la
classe HttpUnauthorizedResult.

346
Tester un contrôleur
Alors, qu’est-ce qu’un test de contrôleur doit faire ?

• vérifier que la bonne vue (ou action) est retournée par l’action du
contrôleur ;

• vérifier que le view-model est celui qu’on attend ;

• vérifier que les données passées à la vue sont bien présentes.

347
Tester un contrôleur
• Prenons par exemple notre contrôleur d’accueil qui est tout simple :

• Ce que nous souhaitons vérifier ici c’est qu’en instanciant le


contrôleur et en appelant sa méthode index, alors nous récupérons la
vue par défaut.
348
Tester un contrôleur
• Pour cela, créons une nouvelle classe de test que nous appelons par
exemple AccueilControllerTests.

• Le principe est d’instancier le contrôleur, d’appeler la méthode Index


et de comparer le résultat.

349
Tester un contrôleur
• Nous pouvons également vérifier que les bonnes informations sont
correctement passées à la vue.

• Imaginons que nous ayons une action qui permette d’afficher la date
et qui permette d’afficher un petit message :

350
Tester un contrôleur
• Nous pourrons tester cette action avec le test suivant :

351
Tester un contrôleur
• Bon, pour le contrôleur Accueil, c’est plutôt simple car il n’a aucune
dépendance. Là où ça se corse, c’est pour le contrôleur Restaurant car
celui-ci utilise la base de données.

• Nous ne voulons pas avoir à réécraser la base de données à chaque


fois. Nous devons donc bouchonner la DAL.

• Nous pourrions par exemple écrire une fausse DAL qui


implémenterait la même interface mais qui utiliserait des données en
mémoire plutôt que des données persistées en base.

352
Tester un contrôleur
• Ajoutons donc la classe DalEnDur dans notre projet de test.

353
Tester un contrôleur
• Sauf que… comment utiliser cette DalEnDur sans modifier le code de
notre contrôleur et perturber le fonctionnement de notre application
web?

• Parce que ça serait quand même pas mal si nous pouvions utiliser la
DalEnDur dans nos tests automatisés et que ce soit la DAL normale
qui soit utilisée lorsque l’on navigue sur notre application.

354
Tester un contrôleur
• Or pour l’instant c’est impossible ; regardez le code du contrôleur :

• La DAL est instanciée directement dans le corps de l’action.

355
Tester un contrôleur
• Nous allons donc devoir refactoriser ce code de manière à ce que la
dépendance à la DAL soit moins forte.

• Pour cela, nous pouvons utiliser un principe d’injection de


dépendance ultra simpliste mais qui va nous aider ici à avoir un
couplage faible entre le contrôleur et le modèle.

• Il suffit d’offrir la possibilité d’instancier la DAL en dehors du


contrôleur et de passer cette instance dans le constructeur de notre
contrôleur.

356
Tester un contrôleur
• Le contrôleur sera:

• Ainsi, nous pourrons écrire un test qui va instancier la fausse DAL et la


passer au contrôleur via son constructeur.
357
Tester un contrôleur
• Pour le montrer, créez donc une nouvelle classe de tests, dédiée au
contrôleur Restaurant , que nous pouvons appeler
RestaurantControllerTests

358
Tester un contrôleur
• Vous voyez comme c’est simple ici d’utiliser la DalEnDur pour les
tests.

• Reste un souci. L’application MVC n’est plus fonctionnelle car un


contrôleur a besoin d’avoir un constructeur par défaut.

• Et doit également fournir une implémentation pour la DAL normale.

359
Tester un contrôleur
• Cela peut se résoudre simplement de cette façon :

360
En résumé
• Les contrôleurs servent à traiter les actions des utilisateurs et à
déterminer quelle est la vue à renvoyer au navigateur.

• Il est très facile de passer des paramètres à un contrôleur grâce au


mécanisme qui fait correspondre des éléments de l’URL et des
paramètres de méthodes.

• Le binding de modèle est un élément très puissant qui permet de


transformer des éléments de formulaire HTML soumis au contrôleur
en objets complexes du modèle.

361
En résumé
• Les formulaires soumis au contrôleur peuvent (et doivent !) être
validés avant d’être traités, c’est le rôle du framework de validation
d’ASP.NET MVC.

• Le framework permet également de réaliser une validation côté client


grâce à l’aide de la bibliothèque jQuery.

• Pour tester facilement un contrôleur qui possède des dépendances,


on peut utiliser un mécanisme d’inversion de contrôle pour
bouchonner cette dépendance.

362
Chapitre 16
TP : Presque prêts pour le resto

363
Chapitre 16: Presque prêts pour le resto
• Nettoyage

• Instructions

• Quelques détails supplémentaires

• Correction

364
Nettoyage
• Dans le fichier RouteConfig.cs, nous devons avoir uniquement la route
par défaut, avec le contrôleur Accueil par défaut :

365
Nettoyage
• Dans le répertoire contrôleur, nous devons avoir un contrôleur Accueil
qui ne fait que renvoyer sur la vue d’accueil.

• Puis nous devons également avoir un contrôleur Restaurant, qui


permet de renvoyer la liste de tous les restaurants, puis de créer et de
modifier un restaurant.

366
Nettoyage
• La différence réside dans le Resto qui a des nouveaux attributs et ne
doit pas posséder de propriété Email :

367
Instructions
• Vous allez dans un premier temps améliorer un peu la vue d’accueil,
et lui rajouter un bouton permettant de créer un sondage.

• Puis deux liens pour aller naviguer sur la création d’un restaurant et
pour aller consulter la liste des restaurants dans le but de modifier
ceux existants.

368
Instructions
• La création de sondage redirige vers un contrôleur que j’ai appelé
Vote, et qui a pour but d’afficher la liste des restaurants que
l’utilisateur va pouvoir cocher afin d’indiquer son choix :

369
Instructions
• Note : l’URL doit être unique et porter l’id du sondage (ici, l’id est 1)
afin de pouvoir être communiquée aux autres votants avec qui on
souhaite aller au restaurant.

• Il vous faudra d’ailleurs faire un contrôle pour vérifier si l’utilisateur a


déjà voté afin de l’empêcher de voter deux fois ; si c’est le cas vous
pouvez par exemple le rediriger vers la page de résultats.

• Bien sûr, le fait de valider son choix insère toutes les données en
base.

370
Instructions
• Vous allez devoir forcer l’utilisateur à faire un choix, donc à
sélectionner au moins un restaurant.

371
Instructions
• Je ne vous demande pas (encore) de réaliser un système
d’authentification pour permettre de différencier les utilisateurs.

• Je vous propose donc une petite bidouille temporaire permettant


d’identifier un utilisateur à partir du nom du navigateur.

• Nous pouvons donc écrire une petite méthode temporaire qui nous
crée ou renvoie l’utilisateur à partir du nom du navigateur.

372
Instructions
• Remplacez la méthode ObtenirUtilisateur() par:

373
Instructions
• De même, vous devrez changer la méthode ADejaVote():

374
Instructions
• Il ne reste plus qu’à réaliser le contrôleur et la vue permettant
d’obtenir les résultats du vote, de manière à avoir :

375
Quelques détails supplémentaires
• Dans la page de validation de vote, les cases à cocher sont générées à
partir du helper Html.CheckBox et doivent être liés à un booléen afin
de pouvoir bénéficier du binding de modèle.

• Or, nous, nous avons à notre disposition une liste de restaurants…


donc pas de booléen.

• Le plus simple pour utiliser le binding de modèle est de créer un view-


model.

376
Quelques détails supplémentaires
• Contenant l’identifiant du restaurant, le nom et le numéro de
téléphone du restaurant, ainsi qu’un booléen permettant de savoir s’il
a été coché ou non.

• Lui-même porté par un autre view-model qui sera lié à la vue.

377
Quelques détails supplémentaires
• Pourquoi un autre view-model ? Parce que dans mon cas, j’ai choisi
d’implémenter une validation personnalisée en utilisant l’interface
IValidatableObject.

378
Correction
• Commençons par la vue d’accueil, elle devait afficher simplement un
bouton pour créer un sondage, ainsi qu’un lien vers les deux actions
permettant d’ajouter un restaurant et d’en modifier :

379
Correction
• Le contrôleur Accueil ne fait pas grand-chose :

380
Correction
• Passons alors au contrôleur Vote. La première chose à faire est de
créer les view-models que je vous ai présentés dans le chapitre
précédent :

381
Correction
• Et :

• Et pour le contrôleur?

382
Correction
• Tout d’abord, il faut créer un contrôleur Vote.

• Puis, dans l’action Index, nous construisons donc le view-model à


partir de la liste des restaurants.

• Puis nous vérifions que l’utilisateur n’a pas déjà voté.

• Comme expliqué, on utilise (temporairement) la propriété


Request.Browser.Browser pour identifier un utilisateur de manière
unique.
383
Correction
• L’action Index sera :

384
Correction
• Et la vue sera :

385
Correction
• Ensuite, il y a l’action Index en POST appelée lors de la soumission du
formulaire.

• Nous vérifions bien sûr que le modèle soit bien valide, puis nous
vérifions également que nous récupérons bien un utilisateur.

• Si ce n’est pas le cas, je renvoie une erreur 401.

386
Correction
• L’action Index en POST sera :

387
Correction
• Vous devez ajouter également l’action d’affichage des résultats, qui va
permettre de récupérer les résultats et de les renvoyer à la vue
d’affichage :

388
Correction
• Et la vue d’affichage sera :

389
Chapitre 17
Activité

390
Activité
Pour cette activité vous devrez :

• Typer fortement les vues

• Modifier la vue de recherche pour afficher une zone de texte


permettant de saisir le mot-clé recherché

• Créer une vue permettant d’ajouter un livre

391
Typer fortement les vues
• Fini le ViewBag et le ViewData, vous allez utiliser des modèles, voire
des view-models…

• Faites en sorte que toutes les vues précédemment créées soient


correctement typées.

392
Modifier la vue de recherche
• Vous créerez une interface permettant la saisie d’un mot-clé pour
réaliser la recherche dans les titres de livre et noms des auteurs (que
vous avez réalisée dans l'activité de la partie 3 à l'aide d'une URL
Rechercher/Livre/abc).

• Si la recherche ne renvoie aucun résultat, il faut le préciser. Sinon, il


faut bien sûr afficher les résultats de la recherche.

393
Créer une vue permettant d’ajouter un livre
• Vous devrez créer la vue et le contrôleur permettant de faire l’ajout
d’un nouveau livre avec une URL /Ajouter/Livre.

• Le titre du livre ne devra pas déjà exister en base de données et il ne


doit pas être vide.

• La date de parution doit être une date valide.

394
Créer une vue permettant d’ajouter un livre
• Et l’auteur du livre sera à choisir dans une liste déroulante, remplie
avec les auteurs qui existent déjà en base de données.

• N’oubliez pas la validation serveur.

395
Partie 5
Annexes

396
Partie 5: Annexes
• Chapitre 18 : Gérer l’authentification

• Chapitre 19 : Scaffolding

397
Chapitre 18
Gérer l’authentification

398
Chapitre 18: Gérer l’authentification
• Authentification par formulaire ASP.NET

• Sécuriser un contrôleur

• Écrire le contrôleur permettant de s’authentifier

• Utiliser l’identité

399
Authentification
• La plupart des ressources sur Internet se basent sur le mécanisme de
membership d’ASP.NET pour gérer l’authentification.

• Nous avons déjà plusieurs méthodes dans la DAL pour gérer la création
d’un utilisateur et son authentification.

• Revenons à présent sur des méthodes propres.

400
Authentification par formulaire ASP.NET
• ASP.NET dispose d’un système d’authentification, élaboré à l'époque
des Webforms, qui s’intègre parfaitement avec le framework MVC.

• On l’appelle l’authentification par formulaire. Elle fonctionne grâce à


des cookies.

• Le principe est que lorsqu’un client soumet une requête HTTP pour
accéder à une ressource sécurisée, ASP.NET vérifie la présence d’un
cookie d’authentification.

401
Authentification par formulaire ASP.NET
• Si l’utilisateur n’est pas authentifié, alors il est redirigé vers une page
d’authentification, sinon il peut continuer sa navigation.

• Lorsque l’utilisateur s’authentifie, ASP.NET génère ce cookie afin de lui


autoriser l’accès aux ressources sécurisées.

• Les informations de ce cookie sont cryptées par ASP.NET.

402
Authentification par formulaire ASP.NET
• Tout ce que nous avons besoin de savoir c’est qu’il est possible de
récupérer l’utilisateur courant et s’il est authentifié grâce à des
propriétés de l’objet HttpContext.User.Identity.

• Par exemple, pour savoir si l’utilisateur est authentifié, nous pourrons


utiliser : HttpContext.User.Identity.IsAuthenticated.

• Et pour connaitre l’identifiant de l’utilisateur connecté, nous pourrons


utiliser : HttpContext.User.Identity.Name

403
Authentification par formulaire ASP.NET
• Pour activer cette authentification, il y a un petit paramétrage à effectuer
dans le web.config. Il faut définir la section authentification, sous la
section <system.web> :

• Le mode d’authentification est Forms (= formulaire) et l’URL permettant de


se loguer sera /Login/Index.

404
Authentification par formulaire ASP.NET
• Ainsi, toute requête accédant à une ressource protégée, et où
l’utilisateur n’est pas authentifié, sera redirigée vers la page de login
qui est paramétrée.

• Nous devons donc sécuriser les contrôleurs adéquats, puis écrire un


contrôleur qui va permettre de s’authentifier et qui sera accessible via
l’URL /Login/Index. Allons-y !

405
Sécuriser un contrôleur
• Nous allons sécuriser le contrôleur Vote de manière à ce que seules
les personnes authentifiées puissent y accéder.

• Voilà ce qu’il se passe lorsque je clique sur le bouton créer un


sondage :

406
Sécuriser un contrôleur
• Et voilà, impossible d’accéder au sondage sans être authentifié ; à
chaque tentative nous sommes redirigés vers la page
d’authentification.

• Et comme celle-ci n’existe pas, nous allons devoir la créer pour


permettre à l’utilisateur de s’authentifier correctement.

• Il est également possible de sécuriser des méthodes unitairement, au


lieu de sécuriser un contrôleur en entier.

407
Écrire le contrôleur d’authentification
• Maintenant, nous allons permettre à l’utilisateur de s’authentifier en
écrivant le contrôleur d’authentification.

• L’URL que nous avons définie dans le web.config (/Login/Index) vous


renseigne déjà sur le contrôleur que nous allons écrire.

• Le contrôleur contient les actions suivantes :


- Index, Index en Post
- CreerCompte et CreerCompte en Post
408
Écrire le contrôleur d’authentification
• Dans la méthode Index, il fau vérifier si l’utilisateur est authentifié
grâce à la propriété HttpContext.User.Identity.IsAuthenticated. Si
c’est le cas, alors je récupère cet utilisateur via notre DAL.

409
Écrire le contrôleur d’authentification
• À noter que j’ai créé un view-model pour préparer mes données à
présenter dans la vue :

• Celui-ci me fournit l’utilisateur et également si l’utilisateur est


authentifié.

410
Écrire le contrôleur d’authentification
• En arrivant sur la vue, si l’utilisateur n’est pas authentifié alors nous
lui fournirons un formulaire pour le faire.

411
Écrire le contrôleur d’authentification
• La vue permettant de s’authentifier est très classique :

• OU :

412
Écrire le contrôleur d’authentification

413
Écrire le contrôleur d’authentification
• J’ai également implémenté des actions permettant de créer un compte.

• L’action en GET affiche simplement la vue et celle en POST traite le


formulaire et appelle la DAL pour créer le compte.

• Nous utilisons bien sûr la même méthode ensuite pour créer le cookie.

• J’en ai profité également pour créer une action permettant la déconnexion


de l’utilisateur.

414
Écrire le contrôleur d’authentification

415
Écrire le contrôleur d’authentification
• Pour la vue de création de compte, c’est le même principe :

416
Utiliser l’identité
• Il ne reste plus qu’une chose à faire. Maintenant que nous savons qui
est l’utilisateur, il faut s’en servir dans le contrôleur de Vote,
notamment lorsque nous utilisons la méthode ObtenirUtilisateur :

• Remplacez donc tous les Request.Browser.Browser par


HttpContext.User.Identity.Name

417
En résumé
• L’authentification ASP.NET est simple à mettre en place et permet de
sécuriser des contrôleurs ou des actions de votre application.

• On peut utiliser l’authentification par formulaire combinée à


l’utilisation de l’attribut [Authorize].

• L’authentification par formulaire fonctionne grâce à un cookie crypté.

418
Chapitre 19
Scaffolding

419
Chapitre 19: Scaffolding
• Projet de test

• Scaffolding de contrôleur

• Scaffolding de vues

420
Scaffolding
• Le Scaffolding, c’est la capacité que possèdent Visual Studio et
ASP.NET MVC pour vous générer du code répétitif permettant de
créer, lire, mettre à jour et supprimer des choses dans votre
application.

• En analysant votre modèle, Visual Studio est capable d’en déduire les
champs dont vous allez avoir besoin pour réaliser des formulaires
classiques et pour générer des actions de contrôleur.

421
Projet de test
• On va créer un projet temporaire qu’on appelle DemoScaffold afin
d’illustrer comment tout cela fonctionne. Bien sûr, il s’agira d’une
application Empty où nous aurons coché MVC.

• Première chose à faire, je vais ajouter le modèle que nous avons créé
pour l’application fil rouge dans cette application :
- BddContext.cs, Resto.cs, Sondage.cs, Utilisateur.cs, Vote.cs

422
Scaffolding de contrôleur
• Ensuite, nous allons ajouter un nouveau contrôleur que nous allons
appeler Restaurant, sauf que cette fois-ci, nous n'allons pas créer un
contrôleur MVC 5 vide, mais plutôt un contrôleur avec vues, utilisant
Entity Framework :

423
Scaffolding de contrôleur
• Appelez-le Restaurant, puis sélectionnez la classe Resto en tant que
classe de modèle ainsi que BddContext en tant que classe de
contexte de données

424
Scaffolding de contrôleur
Visual Studio nous génère plein de choses. Le contrôleur
RestaurantController avec plusieurs actions dedans :
• Index, qui permet de lister les restaurants
• Details, qui permet d’afficher les détails d’un restaurant
• Create (GET et POST) pour créer un nouveau restaurant
• Edit (GET et POST) pour modifier un restaurant existant
• Delete (GET) et DeleteConfirmed (POST) pour supprimer un
restaurant

425
Scaffolding de contrôleur
• Il y a également les vues. Visual Studio les a créées dans le répertoire
qui va bien /Views/Restaurant (Create, Delete, Details, Edit et Index).

• Tout ce que vous avez à faire, c’est utiliser ce mécanisme de


scaffolding et vous aurez le gros du travail. Votre boulot à vous sera
juste de customiser ce qui a été généré.

426
Scaffolding de vues
• Alors là, nous avons vu comment générer tout d’un coup, mais vous
n’avez pas forcément besoin de générer le contrôleur ni toutes les
actions CRUD.

• Peut-être n’avez-vous juste besoin que d’une ou deux vues ?

• Et bien c’est parfait, car il est également possible de choisir un modèle


de vue de structure directement depuis la fenêtre d’ajout d’une vue :

427
Scaffolding de vues

428
Scaffolding de vues
• Il suffit d’utiliser la liste déroulante. Vous reconnaîtrez les différentes
possibilités qui s’offrent à nous :
• Create pour générer de quoi créer un restaurant ;

• Delete pour générer de quoi supprimer un restaurant ;

• Details pour générer de quoi voir les détails d’un restaurant ;

• Edit pour générer de quoi modifier un restaurant ;

• List pour générer de quoi voir la liste des restaurants.

429
Apprenez ASP.NET MVC
430