TP3 : Manipulation des vues et interaction entre les couches
contrôleur-vue
Dans ce TP, on apprend à créer une application ASP.NET MVC 5 en manipulant les vues et les
interactions entre les couches contrôleur et vue. On compte à travers ce dernier créer une application
qui gère des produits. L'exemple d'application est un simple site où on peut afficher les informations
sur les produits existant d’une manière statique.
A travers ce TP on compte apprendre à :
✓ Créer une application Web MVC
✓ Définir un layout pour une vue
✓ Utiliser les méthodes de rendering
✓ Définir des vues partielles
✓ Transférer des données entre contrôleurs et vues
A. Création d’un projet ASP.NET MVC:
1. Ouvrez Visual Studio et créez un projet Web C# à l'aide du modèle d'application Web
ASP.NET (.NET Framework). Nommez le projet « TP3 », sélectionnez le modèle MVC puis
cliquez sur créer.
B. Définir une page de disposition :
1. Quelle est la page de disposition de notre application, par défaut ?
2. Maintenant, on souhaite changer le contenu de cette page, ouvrez le fichier approprié et
remplacez son contenu par le code suivant tout en rajoutant le nécessaire pour permettre
d’y encapsuler le contenu des vues filles.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - TP3</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!-- Navigation Bar-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Accueil", "Index", "Produit", new { area = "" }, new
{ @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Produit")</li>
<li>@Html.ActionLink("Display One", "DisplayOneProduct",
"Produit")</li>
<li>@Html.ActionLink("Display Many", "DisplayManyProduct",
"Produit")</li>
</ul>
</div>
</div>
</div>
<!-- Corps de la page -->
<div class="container">
<hr />
<footer>
<p>© @DateTime.Now.Year – TP3</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
3. Notez bien que la ligne de code suivante permet de créer un lien Html menant vers la page
retournée par l’action « Index » du contrôleur « ProduitController », dont son nom est
« Home »: @Html.ActionLink("Home", "Index", "Produit")
4. On souhaite maintenant mettre le contenu de la barre de navigation dans une page partielle
nommée « _Menu.cshtml ». Faites le nécessaire au niveau de la page principale.
5. Exécutez l’application pour vérifier que l’encapsulation de la vue partielle s’est bien faite.
C. Création des classes du domaine (Model)
6. Créer une classe Produit (int Id, string Name, double prix)
D. Création d’un contrôleur
7. Nous allons commencer par créer une classe de contrôleur. Dans l'explorateur de solutions,
faites un clic droit sur le dossier Controllers, puis cliquez sur Add, puis Controller.
8. Puis cliquer sur MVC 5 Controller – Empty ensuite sur Add.
9. Nommez le nouveau contrôleur ProduitController
10. Au niveau de l’action Index, passer le message suivant « Hello to the home page of TP3» via
la propriété ViewBag.
11. Faites les modifications nécessaires au niveau du fichier RouteConfig.cs pour rendre la vue
« index.cshtml » du contrôleur « ProduitController » est la page qui se lance par défaut lors de
l’exécution de l’application.
12. Implémenter au niveau du contrôleur ProduitController une méthode (action)
« DisplayOneproduct » permettant d’instancier un objet de la classe Produit et passer le à la
vue correspondante « DisplayOneproduct.cshtml ».
13. Implémenter au niveau du contrôleur ProduitController une autre méthode (action)
« DisplayManyproducts » permettant de passer une liste de produits via ViewData à la vue
correspondante « DisplayManyproducts .cshtml ».
E. Création des vues
Passons maintenant à créer les vues correspondantes aux actions déjà implémentées au niveau du
contrôleur « ProduitController ».
14. Créer la vue index.cshtml correspondante à l’action index, et afficher dans le corps de la page
le message passé par le viewBag dans une balise html <h1>.
15. Changer le titre de la page index à « Home Page ».
16. Créer la vue DisplayOneproduct .cshtml correspondante à l’action
DisplayOneproduct permettant d’afficher dans un tableau les détails du produit passé par le
contrôleur. Remplacer le contenu du corps de la page par le code suivant tout en rajoutant le
nécessaire.
@model ………………………………………………………………
@{
ViewBag.Title = "DisplayOneProduct";
}
<table class="table table-bordered table-hover" style="margin-top:100px">
<tr>
<td> Product ID </td>
<td> ……………………… </td>
</tr>
<tr>
<td> Product Name </td>
<td> ………………………</td>
</tr>
<tr>
<td> Product Price </td>
<td> ………………………</td>
</tr>
</table>
17. Créer la vue DisplayManyproducts .cshtml correspondante à l’action
DisplayManyproducts permettant d’afficher dans un tableau les détails de la liste de
produits passé par le contrôleur via la propriété ViewData.
Exécutez le projet sur le navigateur pour tester les différentes fonctionnalités. Vous êtes maintenant
capables d’afficher les 3 pages déjà créées et basculer d’une page à une autre.
