Apprenez ASP.

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

• Les bases d'[Link] MVC.

• [Link] MVC en profondeur.

• Les vues et les contrôleurs.

• Annexes

2
 Partie 1
Introduction au développement web avec [Link] MVC

3
 Partie 1: Introduction au développement web
avec [Link] MVC
• Chapitre 1 : Introduction à [Link] MVC

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

• Chapitre 3 : Introduction au HTML

4
 Chapitre 1
Introduction à [Link] MVC

5
 Chapitre 1: Introduction à [Link] MVC
• Introduction à [Link] MVC

• Qu'est-ce qu'[Link] ?

• MVC et WebForms

• Pourquoi utiliser [Link] MVC ?

6
 Introduction à [Link] MVC
• Alors, [Link] 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'[Link] ?

7
 Qu'est-ce qu'[Link] ?
• 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'[Link] ?
• 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’[Link] se décompose en deux grandes
parties (les fameuses logiques!), à savoir :
▪ [Link] WebForms
▪ [Link] MVC

• [Link] 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’[Link].

10
 WebForms
• [Link] WebForms a été créé en 2002.

• [Link] WebForms a été créé par Microsoft afin que les

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

• Les applications [Link] 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
• [Link] 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
• [Link] 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 [Link] MVC
• [Link] 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 [Link] WebForms.

14
 En résumé
• [Link] est la plateforme de développement d’applications web de
Microsoft

• [Link] offre deux logiques de développement : WebForms et MVC. Dans

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

• [Link] WebForms offre une couche d'abstraction permettant de réaliser

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

• [Link] 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 [Link] 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 «[Link]».
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, [Link] 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

[Link]) 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'[Link] ?

• 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 [Link] MVC et [Link] 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 [Link]

• [Link] WebForms permet de réaliser des applications clientes

lourdes alors qu'[Link] 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'[Link] 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'[Link] MVC

66
 Partie 2: Les bases d'[Link] 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, [Link] 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 [Link]
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 [Link], 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 [Link] bien connu des développeurs [Link]

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 à [Link] 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 :

[Link]

• 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 [Link] 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
[Link] 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
[Link] et obtenir :

• Remarquez que cette URL [Link]

donne exactement la même chose.

104
 La route
• L’Id devient obligatoire, Si vous naviguez à nouveau sur l’URL
[Link] 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

[Link]

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
[Link], de manière à avoir Views\Home\[Link]

109
 La Vue
• Et voilà, nous nous retrouvons avec un fichier [Link] 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, [Link] 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 :

• [Link]

• [Link]

• [Link]

123
 Le Modèle : Solution
• Commençons par la vue [Link], 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 [Link], 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
• [Link]

127
 Le Modèle : Résultat
• [Link]

128
 Le Modèle : Résultat
• [Link]

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

• 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 à [Link] 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’[Link] 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 à [Link] 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 à [Link] 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é
• [Link] 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
[Link] ?

• 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
[Link] MVC en profondeur

145
 Partie 3: [Link] 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 [Link] 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 [Link] 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’[Link] 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 [Link].

• 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 [Link] 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 [Link]. 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, [Link] 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 [Link] et [Link].

• 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 [Link] 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 [Link] 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 [Link] :

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
[Link] 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’[Link] 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
[Link] MVC, il se situe à cet emplacement /Content/[Link].
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 [Link] 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 [Link] :

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 [Link] 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’[Link] 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 [Link], 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 [Link] 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é

[Link] 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 [Link]

• 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’[Link] 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 [Link]
• [Link] 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, [Link] vérifie la présence d’un
cookie d’authentification.

401
 Authentification par formulaire [Link]
• 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, [Link] 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 [Link].

402
 Authentification par formulaire [Link]
• 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 [Link].

• Par exemple, pour savoir si l’utilisateur est authentifié, nous pourrons

utiliser : [Link].

• Et pour connaitre l’identifiant de l’utilisateur connecté, nous pourrons

utiliser : [Link]

403
 Authentification par formulaire [Link]
• Pour activer cette authentification, il y a un petit paramétrage à effectuer
dans le [Link]. Il faut définir la section authentification, sous la
section <[Link]> :

• Le mode d’authentification est Forms (= formulaire) et l’URL permettant de

se loguer sera /Login/Index.

404
 Authentification par formulaire [Link]
• 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 [Link] (/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é [Link]. 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 [Link] par

[Link]

417
 En résumé
• L’authentification [Link] 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
[Link] 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 :
- [Link], [Link], [Link], [Link], [Link]

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 [Link] MVC
430