COURS ASP.
NET
PARTIE 6 : MODÈLE DE VUE
Institut Supérieur d’inGénierie et des Affaires
ISGA
Année Universitaire 2019/2020
M [Link]
INTRODUCTION
• Dans cette partie de cours nous allons se focaliser sur la manipulation des paramètres notamment leur
transfère entre le contrôleur et la vue. Ceci va nous aider de gérer les données reçues de la base de donnée
et de compléter notre application « ChoixResto » par la suite .
• Nous allons découvrir les méthodes de transfère des paramètre (Rappel et nouveauté )
• Savoir la notion du modèle de vue pour transférer un ensemble des paramètres
M [Link]
RAPPEL
• La route par défaut proposé par ASP. NET pour chercher le premier Vue, est une vue retournée par
l’action « Index » du contrôleur « Home » se place dans le répertoire /Views/Home et s’appellera
[Link].
La méthode de définition de route est comme suivant :
[Link](
name:="Default",
url:="{controller}/{action}/{id}",
defaults:=New With {.controller = "Home", .action = "Index", .id =
[Link]}
)
• nous allons juste modifier la méthode de définitions des routes pour remplacer Home par Accueil
Public Sub RegisterRoutes(ByVal routes As RouteCollection)
[Link]("{resource}.axd/{*pathInfo}")
[Link](
name:="Default",
url:="{controller}/{action}/{id}",
defaults:=New With {.controller = “Accueil", .action = "Index", .id = [Link]}
)
M [Link] End Sub
RAPPEL
• Si vous avez changé Home par Accueil dans la route, on doit créer maintenant le contrôleur
« AccueilController». Cela nous permet d’avoir la simple méthode, générée par Visual Studio
Public Function Index() As ActionResult
Return View()
End Function
• Quand vous aller démarrer en utilisant F5 le navigateur retourne une page d’erreur parce que
nous avons pas encore créer la Vue « Index » dans le dossier /Views/Accueil.
• Nous allons créer la vue Index J’en profite pour vous montrer une petite astuce pour créer une vue
rapidement. Faites un clic droit dans la méthode Index du contrôleur Accueil. nous pouvons
directement créer la vue avec l’élément du menu contextuel « Ajouter une vue » comme suivant :
M [Link]
RAPPEL
Nous obtenons la fenêtre pré-remplie suivante :
M [Link]
RAPPEL
Vous pouvez tout décocher pour créer une vue la plus simple possible et cliquer sur Ajouter. Et voilà, Visual Studio a
créé tout seul la bonne vue et l’a placée au bon endroit en plus. Vous pouvez aller jeter un œil dans le répertoire
Views, il y a bien un sous-répertoire Accueil et dedans un fichier [Link] :
Le résultat après de démarrage de
l’application :
M [Link]
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 ». Il s’agit d’un dictionnaire fourre-tout où nous
pouvons mettre des objets en les associant à des clés.
1er Méthode :
Modifiez votre contrôleur pour avoir : Ajouter dans la Vue Index les lignes suivante :
Imports [Link] <!DOCTYPE html>
Namespace Controllers <html>
Public Class AccueilController <head>
Inherits Controller <meta name="viewport" content="width=device-width" />
<title>Index</title>
' GET: Accueil </head>
Function Index() As ActionResult <body>
ViewData("message") = "Bonjour depuis le contrôleur" <div>
ViewData("date") = [Link] Je suis la vue index
ViewData("resto") = New Resto With { </div>
.Nom = "Choucroute party", <ul>
.Telephone = "1234" <li>@ViewData("message")</li>
} <li>@((ViewData("date")).ToString())</li>
Return View() <li>@((ViewData("resto")).Nom)</li>
End Function <li>@((ViewData("resto")).Telephone)</li>
End Class </ul>
End Namespace </body>
</html>
M [Link]
AFFICHER LES DONNÉES DU MODÈLE
Le résultat après le démarrage
M [Link]
AFFICHER LES DONNÉES DU MODÈLE
3ème Méthode :
Resultat
Le Contrôleur Accueil : La Vue Index :
Imports [Link] <!DOCTYPE html>
Namespace Controllers <html>
Public Class AccueilController <head>
Inherits Controller <meta name="viewport" content="width=device-width" />
<title>Index</title>
' GET: Accueil </head>
Function Index() As ActionResult <body>
Dim resto As Resto = New Resto With { <div>
.Nom = "Choucroute party", Je suis la vue index
.Telephone = "1234" </div>
} <ul>
Return View(resto) <li>@([Link])</li>
End Function <li>@([Link])</li>
End Class </ul>
End Namespace </body>
</html>
Question : Si on veut transmettre un ensemble des objets entre le contrôleur et la Vue ?
M [Link]
MODÈLE DE LA VUE
Modèle de la Vue permet de nous fournir quelque chose de facile et de prêt à l’emploi pour nos vues. En plus, cela nous permet
facilement de faire remonter plusieurs éléments du modèle d’un coup. Par exemple la liste de tous les restaurants et de tous les
utilisateurs.
Créons alors notre premier view-model. Pour cela, nous allons le mettre dans un répertoire à la racine, nommé ViewModels :
Puis créons une classe dedans, que nous appelons par
exemple « AccuielViewModel »
M [Link]
MODÈLE DE LA VUE
Public Class AccueilViewModel L’action « Index » du contrôleur « AccueilController »
Private AM_Message As String
Private AM_Date As DateTime Function Index() As ActionResult
Private AM_Resto As Resto Dim vm As AccueilViewModel = New AccueilViewModel With {
.Message = "Bonjour depuis le contrôleur",
Public Property Message() As String .Datee = [Link],
Get .Resto = New Resto With {
La classe « AccueilViewModel »
Return AM_Message .Nom = "La bonne fourchette",
End Get .Telephone = "1234"
Set(value As String) }
AM_Message = value }
End Set Return View(vm)
End Property End Function
Public Property Datee() As DateTime <!DOCTYPE html>
Get <html>
Return AM_Date <head>
End Get <meta name="viewport" content="width=device-width"
Set(value As DateTime) />
AM_Date = value <title>Index</title>
End Set </head>
La Vue « Index»
End Property <body>
Public Property Resto() As Resto <div>
Get Je suis la vue index
Return AM_Resto </div>
End Get <ul>
Set(value As Resto) <li>@([Link])</li>
AM_Resto = value <li>@([Link])</li>
End Set <li>@([Link])</li>
End Property <li>@([Link])</li>
M [Link] End Class </ul>
</body>
MODÈLE DE LA VUE
Nous allons refaire le même exemple précédent avec le Modèle de Vue, sauf dans ce cas nous
allons afficher une liste des Restos au lieu d’afficher une. Donc :
Public Class AccueilViewModel
Private AM_Message As String
Private AM_Date As DateTime
Private AM_Restos As List(Of Resto)
Public Property Message() As String
Get
Return AM_Message
End Get
Set(value As String)
AM_Message = value
La classe « AccueilViewModel » sera End Set
End Property
comme suivant :
Public Property Datee() As DateTime
Get
Return AM_Date
End Get
Set(value As DateTime)
AM_Date = value
End Set
End Property
Public Property Restos() As List(Of Resto)
Get
Return AM_Restos
End Get
Set(value As List(Of Resto))
AM_Restos = value
End Set
M [Link] End Property
End Class
MODÈLE DE LA VUE
L’action Index du contrôleur « AccueilController » sera comme suivant
Function Index() As ActionResult
Dim vm As AccueilViewModel = New AccueilViewModel With {
.Message = "Bonjour depuis le contrôleur",
.Datee = [Link],
.Restos = New List(Of Resto) From {
New Resto With {
.Nom = "Resto pinambour",
.Telephone = "1234"
},
New Resto With {
.Nom = "Resto tologie",
.Telephone = "1234"
},
New Resto With {
.Nom = "Resto ride",
.Telephone = "5678"
},
New Resto With {
.Nom = "Resto toro",
.Telephone = "555"
}
}
}
Return View(vm)
End Function
M [Link]
MODÈLE DE LA VUE
<!DOCTYPE html>
<html>
La Vue « Index» sera comme suivant <head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
Je suis la vue index
</div>
@[Link]
@[Link]
<table>
<tr>
<th>Nom</th>
<th>Téléphone</th>
</tr>
@code
For Each resto In [Link]
End code
<tr>
<td>@[Link]</td>
<td>@[Link]</td>
</tr>
@code
Next
End Code
</table>
M [Link] </body>
</html>
MODÈLE DE LA VUE
Le résultat
M [Link]
