Ajout d’une vue (VB)
par Rick Anderson
Ce tutoriel vous apprend les bases de la création d’une application web ASP.NET MVC à l’aide de Microsoft Visual Web Developer 2010 Express Service Pack 1, qui est une version gratuite de Microsoft Visual Studio. Avant de commencer, vérifiez que vous avez installé les conditions préalables répertoriées ci-dessous. Vous pouvez tous les installer en cliquant sur le lien suivant : Web Platform Installer. Vous pouvez également installer individuellement les prérequis à l’aide des liens suivants :
- Prérequis de Visual Studio Web Developer Express SP1
- ASP.NET mise à jour des outils MVC 3
- SQL Server Compact 4.0(prise en charge du runtime + outils)
Si vous utilisez Visual Studio 2010 au lieu de Visual Web Developer 2010, installez les prérequis en cliquant sur le lien suivant : Conditions préalables pour Visual Studio 2010.
Un projet Visual Web Developer avec VB.NET code source est disponible pour accompagner cette rubrique. Téléchargez la version VB.NET. Si vous préférez C#, basculez vers la version C# de ce tutoriel.
Dans cette section, nous allons modifier la HelloWorldController classe pour utiliser un fichier de modèle d’affichage afin d’encapsuler proprement le processus de génération de réponses HTML à un client.
Commençons par utiliser un modèle d’affichage avec la Index méthode dans la HelloWorldController classe . Actuellement, la Index méthode retourne une chaîne avec un message codé en dur dans la classe de contrôleur. Modifiez la Index méthode pour retourner un View objet, comme indiqué dans la section suivante :
Public Function Index() As ActionResult
Return View()
End Function
Nous allons maintenant ajouter un modèle d’affichage à notre projet que nous pouvons appeler avec la Index méthode . Pour ce faire, cliquez avec le bouton droit dans la Index méthode, puis cliquez sur Ajouter une vue.
La boîte de dialogue Ajouter une vue s’affiche. Laissez les entrées par défaut et cliquez sur le bouton Ajouter .
Le dossier MvcMovie\Views\HelloWorld et le fichier MvcMovie\Views\HelloWorld\Index.vbhtml sont créés. Vous pouvez les voir dans Explorateur de solutions :
Ajoutez du code HTML sous la <h2> balise. Le fichier MvcMovie\Views\HelloWorld\Index.vbhtml modifié est illustré ci-dessous.
@Code
ViewData("Title") = "Index"
End Code
<h2>Index</h2>
<b>Hello</b> World!
Exécutez l’application et accédez au contrôleur « hello world » (http://localhost:xxxx/HelloWorld). La Index méthode dans votre contrôleur n’a pas fait beaucoup de travail ; elle a simplement exécuté l’instruction return View(), qui indique que nous voulions utiliser un fichier de modèle d’affichage pour afficher 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.vbhtml dans le dossier \Views\HelloWorld . L’image ci-dessous montre la chaîne codée en dur dans la vue.
C’est très bien. Toutefois, notez que la barre de titre du navigateur indique « Index » et que le gros titre sur la page indique « Mon application MVC ». Changeons-les.
Changement de vues et de pages de disposition
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 projet, même s’il est sur chaque page de notre application. Accédez au dossier /Views/Shared dans Explorateur de solutions et ouvrez le fichier _Layout.vbhtml. Ce fichier est appelé page de mise en page et il s’agit du « shell » partagé que toutes les autres pages utilisent.
Notez la @RenderBody() ligne de code située au bas du fichier. RenderBody est un espace réservé où toutes les pages que vous créez s’affichent, « encapsulées » dans la page de mise en page. Remplacez le <h1> titre « My MVC Application » par « MVC Movie App ».
<div id="title">
<h1>MVC Movie App</h1>
</div>
Exécutez l’application et notez qu’elle indique maintenant « MVC Movie App ». Cliquez sur le lien À propos de , et cette page affiche également « MVC Movie App ».
Le fichier _Layout.vbhtml complet est illustré ci-dessous :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewData("Title")</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>MVC Movie App</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "HelloWorld")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
À présent, nous allons modifier le titre de la page Index (affichage).
@Code
ViewData("Title") = "Movie List"
End Code
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
Ouvrez MvcMovie\Views\HelloWorld\Index.vbhtml. Il existe deux emplacements pour apporter une modification : tout d’abord, le texte qui apparaît dans le titre du navigateur, puis dans l’en-tête secondaire (l’élément <h2> ). Nous allons les rendre légèrement différents afin que vous puissiez voir quel bit de code change quelle partie de l’application.
Exécutez l’application et accédez àhttp://localhost:xx/HelloWorld . Notez que le titre du navigateur, l’en-tête principal et les en-têtes secondaires ont changé. Il est facile d’apporter des modifications importantes à votre application avec de petites modifications apportées à une vue. (Si vous ne voyez pas de modifications dans le navigateur, vous pouvez afficher le contenu mis en cache. Appuyez sur Ctrl+F5 dans votre navigateur pour forcer le chargement de la réponse du serveur.)
Notre peu de « données » (dans ce cas, le message « Hello World! ») est codé en dur, cependant. Notre application MVC a V (vues) et nous avons C (contrôleurs), mais pas M (modèle) pour le moment. Bientôt, nous allons 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 de données du contrôleur vers la vue
Avant d’accéder à une base de données et de parler des modèles, nous allons commencer par parler du passage d’informations du contrôleur à une vue. Nous voulons transmettre ce dont un modèle d’affichage a besoin pour afficher une réponse HTML à un client. Ces objets sont généralement créés et passés par une classe de contrôleur à un modèle d’affichage, et ils doivent contenir uniquement les données requises par le modèle d’affichage, et non plus.
Auparavant, avec la HelloWorldController classe , la Welcome méthode d’action prenait un name et un numTimes paramètre, puis extrayait les valeurs des paramètres dans le navigateur. Au lieu de laisser le contrôleur continuer à afficher directement cette réponse, nous allons placer ces données dans un conteneur pour l’affichage. Les contrôleurs et les vues peuvent utiliser un ViewBag objet pour contenir ces données. Celui-ci sera automatiquement transmis à un modèle d’affichage et utilisé pour afficher la réponse HTML à l’aide du contenu du conteneur en tant que données. De cette façon, le contrôleur est préoccupé par une chose et le modèle d’affichage par une autre , ce qui nous permet de maintenir propre « séparation des préoccupations » dans l’application.
Nous pourrions également définir une classe personnalisée, puis créer un instance de cet objet par nous-mêmes, le remplir avec des données et le transmettre à l’affichage. Cela est souvent appelé ViewModel, car il s’agit d’un modèle personnalisé pour l’affichage. Toutefois, pour de petites quantités de données, le ViewBag fonctionne très bien.
Revenez au fichier HelloWorldController.vb pour modifier la Welcome méthode à l’intérieur du contrôleur pour placer Message et NumTimes dans le ViewBag. ViewBag est un objet dynamique. Ça veut dire que tu peux y mettre ce que tu veux. Le ViewBag n’a pas de propriétés définies tant que vous n’y avez pas placé quelque chose.
Terminé HelloWorldController.vb avec la nouvelle classe dans le même fichier.
Namespace MvcMovie
Public Class HelloWorldController
Inherits System.Web.Mvc.Controller
'
' GET: /HelloWorld
Function Index() As ActionResult
Return View()
End Function
Public Function Welcome(ByVal name As String, Optional ByVal numTimes As Integer = 1) As ActionResult
ViewBag.Message = "Hello " & name
ViewBag.NumTimes = numTimes
Return View()
End Function
End Class
End Namespace
À présent, notre ViewBag contient des données qui seront transmises automatiquement à l’affichage. Encore une fois, nous aurions pu passer notre propre objet comme ceci si nous avons aimé :
return View(myCustomObject)
Maintenant, nous avons besoin d’un WelcomeView modèle ! Exécutez l’application afin que le nouveau code soit compilé. Fermez le navigateur, cliquez avec le bouton droit dans la Welcome méthode, puis cliquez sur Ajouter une vue.
Voici à quoi ressemble votre boîte de dialogue Ajouter une vue .
Ajoutez le code suivant sous l’élément <h2> dans le nouveau Welcome.fichier vbhtml. Nous allons faire une boucle et dire « Hello » autant de fois que l’utilisateur le dit que nous devrions !
@Code
For i As Integer = 0 To ViewBag.NumTimes
@<h3> @ViewBag.Message @i.ToString </h3>
Next i
End Code
Exécutez l’application et accédez à http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4
Désormais, les données sont extraites de l’URL et transmises automatiquement au contrôleur. Le contrôleur empaquette les données dans un Model objet et passe cet objet à la vue. La vue que affiche les données au format HTML pour l’utilisateur.
Il s’agissait d’une sorte de « M » pour le modèle, mais pas d’une base de données en soi. Créons une base de données de films en utilisant ce que nous avons appris.