Ajout d’une vue - Comment utiliser un fichier de modèle d’affichage pour encapsuler proprement la génération de réponses HTML à un client
par Scott Hanselman
Il s’agit d’un didacticiel pour débutants qui présente les principes de base de ASP.NET MVC. Vous allez créer une application web simple qui lit et écrit à partir d’une base de données. Visitez le centre d’apprentissage ASP.NET MVC pour trouver d’autres didacticiels et exemples ASP.NET MVC.
Dans cette section, nous allons examiner comment notre classe HelloWorldController peut utiliser un fichier de modèle View pour encapsuler proprement la génération de réponses HTML à un client.
Commençons par utiliser un modèle View avec notre méthode Index. Notre méthode s’appelle Index et se trouve dans HelloWorldController. Actuellement, notre méthode Index() retourne une chaîne avec un message codé en dur dans la classe Controller.
public string Index()
{
return "<html><body>This is my default action...</body></html>";
}
Nous allons maintenant modifier la méthode Index pour qu’elle ressemble à ceci :
public ActionResult Index()
{
return View();
}
Nous allons maintenant ajouter un modèle Affichage à notre projet que nous pouvons utiliser pour notre méthode Index(). Pour ce faire, cliquez avec le bouton droit avec la souris quelque part au milieu de la méthode Index, puis cliquez sur Ajouter une vue...
La boîte de dialogue « Ajouter une vue » s’affiche, qui nous fournit des options pour créer un modèle d’affichage qui peut être utilisé par notre méthode Index. Pour l’instant, ne changez rien et cliquez simplement sur le bouton Ajouter.
Après avoir cliqué sur Ajouter, un nouveau dossier et un nouveau fichier s’affichent dans le dossier solution, comme illustré ici. J’ai maintenant un dossier HelloWorld sous Vues, et un fichier Index.aspx à l’intérieur de ce dossier.
Le nouveau fichier d’index est également déjà ouvert et prêt à être modifié. Ajoutez du texte sous le premier <index< h2>/h2>, comme « Hello World ».
<h2>Index</h2>
Hello world!
Exécutez votre application et visitez http://localhost:xx/HelloWorld à nouveau dans votre navigateur. La méthode Index dans notre contrôleur dans cet exemple n’a pas effectué de travail, mais a appelé « return View() » qui indique que nous voulions utiliser un fichier de modèle d’affichage pour renvoyer une réponse au client. Étant donné que nous n’avons pas spécifié explicitement le nom du fichier de modèle d’affichage à utiliser, ASP.NET MVC a utilisé par défaut le fichier de vue Index.aspx dans le dossier \Views\HelloWorld. Nous voyons maintenant la chaîne que nous avons codée en dur dans notre affichage.
C’est très bien. Toutefois, notez que le titre du navigateur indique « Index » et que le gros titre sur la page indique « Mon application MVC ». Changeons-les.
Modification des affichages et des pages maîtres
Tout d’abord, nous allons modifier le texte « Mon application MVC ». Ce texte est partagé et apparaît sur chaque page. En fait, il n’apparaît qu’à un seul endroit dans notre code, même s’il se trouve sur chaque page de notre application. Accédez au dossier /Views/Shared dans le Explorateur de solutions et ouvrez le fichier Site.Master. Ce fichier est appelé page maître et il s’agit de l’interpréteur de commandes partagé que toutes nos autres pages utilisent.
Notez un texte indiquant ContentPlaceholder « MainContent » dans ce fichier.
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
Cet espace réservé est l’endroit où toutes les pages que vous créez s’affichent, « encapsulées » dans la page master. Essayez de modifier le titre, puis exécutez votre application et visitez plusieurs pages. Vous remarquerez que votre seule modification s’affiche sur plusieurs pages.
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
À présent, chaque page aura le titre principal ( C’est-à-dire H1) de « Mon application vidéo MVC ». Qui gère le texte blanc en haut qui est partagé entre toutes les pages.
Voici le Site.Master dans son intégralité avec notre titre modifié :
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Maintenant, nous allons modifier le titre de la page Index.
Ouvrez /HelloWorld/Index.aspx. Il y a deux endroits où changer. Tout d’abord, le titre qui apparaît dans le titre du navigateur, puis l’en-tête secondaire , qui est H2, ainsi que. Je vais les rendre légèrement différents pour que vous puissiez voir quel bit de code change quelle partie de l’application.
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Movie List
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>My Movie List</h2>
Hello World!
</asp:Content>
Exécutez votre application et accédez à /Movies. Notez que le titre du navigateur, le titre principal et les titres secondaires ont changé. Il est facile d’apporter des modifications importantes à votre application avec de petites modifications à votre affichage.
Notre peu de « données » (dans ce cas, le message « Hello World! ») était codé en dur. Nous avons V (Vues) et C (Contrôleurs), mais pas M (Modèle) pour le moment. Nous allons bientôt découvrir comment créer une base de données et récupérer des données de modèle à partir de celle-ci.
Passage d’un ViewModel
Avant d’accéder à une base de données et de parler des modèles, nous allons commencer par parler de « ViewModels ». Il s’agit d’objets qui représentent ce dont un modèle View a besoin pour restituer une réponse HTML à un client. Elles sont généralement créées et passées par une classe Controller à un modèle View, et ne doivent contenir que les données requises par le modèle d’affichage, et pas plus.
Précédemment, avec notre exemple HelloWorld, notre méthode d’action Welcome() prenait un nom et un paramètre numTimes et les extrayait dans le navigateur. Plutôt que de laisser le contrôleur continuer à afficher directement cette réponse, créons plutôt une petite classe pour stocker ces données, puis transmettons-les à un modèle d’affichage pour restituer la réponse HTML à l’aide de celle-ci. De cette façon, le contrôleur est concerné par une chose et le modèle d’affichage d’une autre, ce qui nous permet de maintenir propre « séparation des préoccupations » au sein de notre application.
Revenez au fichier HelloWorldController.cs et ajoutez une nouvelle classe « WelcomeViewModel » et modifiez la méthode Welcome à l’intérieur de votre contrôleur. Voici le fichier HelloWorldController.cs complet avec la nouvelle classe dans le même fichier.
using System.Web.Mvc;
namespace Movies.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
var viewModel = new WelcomeViewModel
{
Message = "Hello " + name,
NumTimes = numTimes
};
return View(viewModel);
}
public class WelcomeViewModel
{
public string Message { get; set; }
public int NumTimes { get; set; }
}
}
}
Même si elle se trouve sur plusieurs lignes, notre méthode Welcome n’est en réalité que deux instructions de code. La première instruction empaquette nos deux paramètres dans un objet ViewModel, et la seconde transmet l’objet résultant à l’objet View.
Nous avons maintenant besoin d’un modèle d’affichage d’accueil ! Cliquez avec le bouton droit dans la méthode Welcome et sélectionnez Ajouter une vue. Cette fois, nous allons case activée « Créer une vue fortement typée » et sélectionner notre classe WelcomeViewModel dans la liste déroulante. Cette nouvelle vue ne connaîtra que welcomeViewModels et aucun autre type d’objet.
REMARQUE : vous devez avoir compilé une fois après avoir ajouté votre WelcomeViewModel pour s’afficher dans la liste déroulante.
Voici à quoi doit ressembler votre boîte de dialogue Ajouter une vue. Cliquez sur le bouton Ajouter. 
Ajoutez ce code sous h2 <> dans votre nouveau fichier Welcome.aspx. Nous allons faire une boucle et dire Hello autant de fois que l’utilisateur nous le dit!
<% for(int i=0;i<Model.NumTimes;i++) { %>
<%h3><%: Model.Message %></h3>
<% } %>
Notez également pendant que vous tapez cela, car nous avons dit à cette vue sur le WelcomeViewModel (ils sont mariés, n’oubliez pas ?) que nous obtenons intellisense utile chaque fois que nous faisons référence à notre objet Model, comme illustré dans la capture d’écran ci-dessous :
Exécutez votre application et visitez http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 à nouveau. Maintenant, nous prenons des données à partir de l’URL, elles sont transmises automatiquement à notre contrôleur, notre contrôleur empaquette les données dans un ViewModel et transmet cet objet à notre vue. L’affichage que affiche les données au format HTML pour l’utilisateur.
Eh bien, il s’agissait d’une sorte de « M » pour Model, mais pas du type de base de données. Prenons ce que nous avons appris et créons une base de données de films.