Traduction▲
Cet article est la traduction la plus fidèle possible de l'article original: ASP.NET MVC View Overview
Introduction▲
Le but de ce tutoriel est de vous fournir une brève introduction aux vues d'ASP.NET MVC, aux vues de données et aux HTML helpers. A la fin de ce tutoriel, vous devriez être capable de créer de nouvelles vues, de passer des données d'un controleur vers une vue, et d'utiliser des HTML helpers pour générer du contenu dans une vue.
Comprendre les vues▲
Pour ASP.NET ou Active Server Pages, le framework ASP.NET MVC ne possède rien qui correspond directement à une page. Dans une application ASP.NET MVC, il n'y a pas de page sur le disque qui correspond à l'url que vous tapez dans votre navigateur. Ce qui se rapproche le plus d'une page dans une application ASP.NET MVC est ce qu'on appelle une vue.
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Details()
{
return RedirectToAction("Index");
}
}
}
Vous pouvez déclencher la 1ère action, l'action Index(), en tapant l'url suivante dans la barre d'adresse de votre navigateur:
/Home/Index.
Vous pouvez déclencher la 2nde action, l'action Details(), en tapant l'url suivante dans la barre d'adresse de votre navigateur:
/Home/Details.
L'action Index() retourne une vue. La plupart des actions que vous créez retourneront des vues. Cependant, une action peut retourner
des résultats d'action d'autres types. Par exemple, l'action Details() retourne une RedirectToActionResult qui redirige la requête
entrante vers l'action Index().
L'action Index() contient l'unique ligne de code suivante:
View();
Cette ligne de code retourne une vue qui doit être située à l'endroit suivant sur votre serveur web:
\Views\Home\Index.aspx.
Le chemin de la vue est obtenu à partir du nom du controleur et du nom de l'action du controleur.
Si vous préférez, vous pouvez spécifier directement la vue. La ligne de code suivante retourne une vue appelée "Fred":
View("Fred");
Quand cette ligne de code est exécutée, une vue du chemin suivant est retournée:
\Views\Home\Fred.aspx
Si vous prévoyez de créer des tests unitaires pour votre application ASP.NET MVC, alors c'est une bonne idée de nommer explicitement vos vues. Ainsi, vous pouvez créer un test unitaire pour vérifier que la vue attendue est bien retournée par une action controleur.
Ajouter du contenu à une vue▲
Une vue est un document (X)HTML standard qui contient des scripts. Vous utilisez des scripts pour ajouter un contenu dynamique à une vue. Par exemple, la vue du Listing 2 affiche la date et l'heure courantes.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index</title>
</head>
<body>
<div>
The current date and time is <% Response.Write(DateTime.Now);%>
</div>
</body>
</html>
Vous pouvez voir que le corps de la page HTML dans Listing 2 contient le script suivant:
<% Response.Write(DateTime.Now);%>
Vous utilisez les délimiteurs de script <% and %> pour marquer le début et la fin du script. Ce script est écrit
en C#. Il affiche la date et l'heure courantes en appelant la méthode Response.Write() pour envoyer le contenu dans le navigateur.
Les délimiteurs de script <% and %> peuvent être utilisés pour exécuter une ou plusieurs instructions.
Etant donné que vous appelez Response.Write() très souvent, Microsoft fourni un raccourci pour appeler la méthode Response.Write().
La vue dans Listing 3 utilise les délimiteurs <%= and %> en tant que raccourci pour appeler la méthode Response.Write().
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index</title>
</head>
<body>
<div>
The current date and time is <%=DateTime.Now %>
</div>
</body>
</html>Vous pouvez utilisez n'importe quel langage .NET pour générer du contenu dynamique dans une vue. Normalement, vous allez utilisez soit VB.NET soit C# pour écrire vos controleurs et vues.
Utiliser des HTML Helpers pour générer le contenu d'une vue▲
Pour rendre plus facile l'ajout de contenu dans une vue, vous pouvez tirer avantage de ce qu'on appelle un HTML Helper.
Un HTML Helper, typiquement, est une méthode qui génère une chaine de caractères. Vous pouvez utiliser des HTML Helpers pour
générer des éléments HTML standards tels que des zones de saisie, des liens, des listes déroulantes ou des cases à cocher.
Par exemple, la vue dans Listing 4 tire avantage de 3 HTML Helpers -- le BeginForm(), le TextBox() et le Password() helper --
pour générer un formulaire de connection (voir figure 1)
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Login Form</title>
</head>
<body>
<div>
<% using (Html.BeginForm())
{ %>
<label for="UserName">User Name:</label>
<br />
<%= Html.TextBox("UserName") %>
<br /><br />
<label for="Password">Password:</label>
<br />
<%= Html.Password("Password") %>
<br /><br />
<input type="submit" value="Log in" />
<% } %>
</div>
</body>
</html>
Toutes les méthodes des HTML Helpers sont appelées dans la propriété Html de la vue. Par exemple, vous générez une zone de saisie
en appelant la méthode Html.TextBox().
Notez que vous utilisez les délimiteurs de script <%= and %> lorsque vous appelez les Html.TextBox() et Html.Password()
helpers. Ces helpers retournent simplement une chaine de caractères. Vous devez appeler Response.Write() pour envoyer la chaine de
caractères vers le navigateur. Utiliser les HTML Helpers est facultatif. Ils vous rendent la vie plus facile en réduisant la quantité
de HTML et de scripts à écrire. La vue dans Listing 5 génère exactement le même formulaire que la vue dans Listing 4 sans utiliser
de HTML Helpers.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index4.aspx.cs" Inherits="MvcApp.Views.Home.Index4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Login Form without Help</title>
</head>
<body>
<div>
<form method="post" action="/Home/Login">
<label for="userName">User Name:</label>
<br />
<input name="userName" />
<br /><br />
<label for="password">Password:</label>
<br />
<input name="password" type="password" />
<br /><br />
<input type="submit" value="Log In" />
</form>
</div>
</body>
</html>Vous avez également l'option de créer vos propres HTML Helpers. Par exemple, vous pouvez créer une méthode GridView() helper qui affiche automatiquement un ensemble d'enregistrements de base de données dans un tableau HTML. Rendez-vous dans le tutoriel Creating Custom HTML Helpers pour de plus amples informations sur ce sujet.
Utiliser une View Data pour passer des données à une vue▲
Vous utilisez une view data pour passer des données d'un controleur vers une vue. Imaginez une view data comme un paquet que vous envoyez par courrier. Toutes les données passées d'un controleur vers une vue doivent être envoyées en utilisant ce paquet. Par exemple, le controleur dans Listing 6 ajoute un message au paquet.
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
public class ProductController : Controller
{
public ActionResult Index()
{
ViewData["message"] = "Hello World!";
return View();
}
}
}
La propriété ViewData du controleur représente une collection de paires noms/valeurs. Dans Listing 6, la méthode Index()
ajoute un élément nommé message dont la valeur est "Hello World!" à la collection view data. Quand la vue est retournée
par un appel à la méthode Index(), la view data est passée automatiquement à la vue.
La vue dans Listing 7 récupère le message dans la view data et envoie le message au navigateur.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Product Index</title>
</head>
<body>
<div>
<%= Html.Encode(ViewData["message"]) %>
</div>
</body>
</html>
Notez que la vue tire avantage de la méthode Html.Encode() du HTML Helper quand le message est généré. La méthode
Html.Encode du HTML Helper transforme les caractères spéciaux tels que > et < en caractères plus sûrs à afficher dans
une page web. Chaque fois que vous générez le contenu qu'un utilisateur a soumis au site web, vous devriez encoder le contenu
pour vous protéger des attaques par injection de JavaScript.
(Parce que nous avons créer le message nous-même dans le ProductController, nous n'avons pas vraiment besoin de l'encoder.
Cependant, c'est une bonne habitude de toujours appeler la méthode Html.Encode() pour afficher dans une vue un contenu récupéré d'une
data view.)
Dans Listing 7, nous tirons avantage d'une view data pour passer un simple message d'un controleur vers une vue. Vous pouvez
également utiliser une view data pour passer d'autres types de données, tels que des collections d'enregistrements de base de données,
d'un controleur vers une vue. Par exemple, si vous voulez afficher le contenu de la base Products dans une vue, alors vous
passeriez la collection d'enregistrements de base de données dans une view data.
Vous avez également l'option de passer des données fortement typées d'un controleur vers une vue. Rendez-vous dans le tutoriel
Understanding Strongly Typed View Data and Views pour de plus amples informations sur ce sujet.
Conclusion▲
Ce tutoriel vous a présenté une brève introduction aux vues, view data et HTML Helpers du framework ASP.NET MVC. Dans la 1ère partie, vous avez appris comment ajouter de nouvelles vues à votre projet. Vous avez appris que vous devez ajouter une vue dans le bon dossier pour pouvoir l'appeler d'un controleur particulier. Ensuite, nous avons discuté des HTML Helpers. Vous avez appris comment les HTML Helpers vous permettez de générer facilement du contenu HTML. Finalement, vous avez appris comment tirer avantage de la view data pour passer des données d'un controleur vers une vue.
