Vue d’ensemble des vues ASP.NET MVC (C#)

Article
07/13/2023

Qu’est-ce qu’une vue MVC ASP.NET et en quoi diffère-t-elle d’une page HTML ? Dans ce tutoriel, Stephen Walther vous présente les vues et vous montre comment tirer parti des fonctions View Data et HTML Helpers au sein d’une vue.

L’objectif de ce tutoriel est de vous fournir une brève présentation des vues ASP.NET MVC, de l’affichage des données et des helpers HTML. À la fin de ce tutoriel, vous devez comprendre comment créer de nouvelles vues, passer des données d’un contrôleur à une vue et utiliser html Helpers pour générer du contenu dans une vue.

Présentation des vues

Pour ASP.NET ou Active Server Pages, ASP.NET MVC n’inclut rien qui correspond directement à une page. Dans une application MVC ASP.NET, aucune page sur le disque ne correspond au chemin d’accès dans l’URL que vous tapez dans la barre d’adresse de votre navigateur. La chose la plus proche d’une page dans une application ASP.NET MVC est un affichage.

Dans une application ASP.NET MVC, les requêtes de navigateur entrantes sont mappées aux actions du contrôleur. Une action de contrôleur peut retourner une vue. Toutefois, une action de contrôleur peut effectuer un autre type d’action, par exemple vous rediriger vers une autre action de contrôleur.

La liste 1 contient un contrôleur simple nommé HomeController. HomeController expose deux actions de contrôleur nommées Index() et Details().

Listing 1 - HomeController.cs

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 appeler la première action, l’action Index(), en tapant l’URL suivante dans la barre d’adresse de votre navigateur :

/Home/Index

Vous pouvez appeler la deuxième action, l’action Détails(), en tapant cette adresse dans votre navigateur :

/Home/Details

L’action Index() retourne une vue. La plupart des actions que vous créez retournent des vues. Toutefois, une action peut retourner d’autres types de résultats d’action. Par exemple, l’action Details() retourne un RedirectToActionResult qui redirige la requête entrante vers l’action Index().

L’action Index() contient la seule ligne de code suivante :

View();

Cette ligne de code retourne une vue qui doit se trouver au chemin d’accès suivant sur votre serveur web :

\Views\Home\Index.aspx

Le chemin d’accès à la vue est déduit du nom du contrôleur et du nom de l’action du contrôleur.

Si vous préférez, vous pouvez être explicite sur la vue. La ligne de code suivante retourne une vue nommée Fred :

View( Fred);

Lorsque cette ligne de code est exécutée, une vue est retournée à partir du chemin d’accès suivant :

\Views\Home\Fred.aspx

Notes

Si vous envisagez de créer des tests unitaires pour votre application ASP.NET MVC, il est judicieux d’être explicite sur les noms de vues. De cette façon, vous pouvez créer un test unitaire pour vérifier que la vue attendue a été retournée par une action de contrôleur.

Ajout de contenu à un affichage

Une vue est un document (X)HTML standard qui peut contenir des scripts. Vous utilisez des scripts pour ajouter du contenu dynamique à une vue.

Par exemple, la vue de la liste 2 affiche la date et l’heure actuelles.

Listing 2 - \Views\Home\Index.aspx

<%@ 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>

Notez que le corps de la page HTML dans la liste 2 contient le script suivant :

<% Response.Write(DateTime.Now);%>

Vous utilisez les délimiteurs <de script % et %> pour marquer le début et la fin d’un script. Ce script est écrit en C#. Il affiche la date et l’heure actuelles en appelant la méthode Response.Write() pour afficher le contenu dans le navigateur. Les délimiteurs <de script % et %> peuvent être utilisés pour exécuter une ou plusieurs instructions.

Étant donné que vous appelez Response.Write() si souvent, Microsoft vous fournit un raccourci pour appeler la méthode Response.Write(). La vue de la liste 3 utilise les délimiteurs <%= et %> comme raccourci pour appeler Response.Write().

Listing 3 - Views\Home\Index2.aspx

<%@ 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 utiliser n’importe quel langage .NET pour générer du contenu dynamique dans une vue. Normalement, vous allez utiliser Visual Basic .NET ou C# pour écrire vos contrôleurs et vos vues.

Utilisation de l’assistance HTML pour générer du contenu d’affichage

Pour faciliter l’ajout de contenu à une vue, vous pouvez tirer parti d’un élément appelé html Helper. Une assistance HTML, généralement, est une méthode qui génère une chaîne. Vous pouvez utiliser des helpers HTML pour générer des éléments HTML standard tels que des zones de texte, des liens, des listes déroulantes et des zones de liste.

Par exemple, la vue dans listing 4 tire parti de trois helpers HTML (BeginForm(), TextBox() et Password() pour générer un formulaire de connexion (voir la figure 1).

Listing 4 -- \Views\Home\Login.aspx

<%@ 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>

Figure 01 : Formulaire de connexion standard (cliquer pour afficher l’image en taille réelle)

Toutes les méthodes HTML Helpers sont appelées sur la propriété Html de la vue. Par exemple, vous affichez une zone de texte en appelant la méthode Html.TextBox().

Notez que vous utilisez les délimiteurs <de script %= et %> lors de l’appel des helpers Html.TextBox() et Html.Password(). Ces helpers retournent simplement une chaîne. Vous devez appeler Response.Write() pour afficher la chaîne dans le navigateur.

L’utilisation de méthodes d’assistance HTML est facultative. Ils vous facilitent la vie en réduisant la quantité de code HTML et de script que vous devez écrire. La vue dans listing 5 affiche exactement la même forme que la vue dans listing 4 sans utiliser html Helpers.

Listing 5 -- \Views\Home\Login.aspx

<%@ 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 la possibilité de créer vos propres helpers HTML. Par exemple, vous pouvez créer une méthode d’assistance GridView() qui affiche automatiquement un ensemble d’enregistrements de base de données dans une table HTML. Nous explorons cette rubrique dans le didacticiel Création d’helpers HTML personnalisés.

Utilisation de l’affichage des données pour passer des données à une vue

Vous utilisez des données d’affichage pour passer des données d’un contrôleur à une vue. Pensez à afficher des données comme un package que vous envoyez par courrier électronique. Toutes les données passées d’un contrôleur à une vue doivent être envoyées à l’aide de ce package. Par exemple, le contrôleur dans la liste 6 ajoute un message pour afficher les données.

Listing 6 - ProductController.cs

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 contrôleur représente une collection de paires nom-valeur. Dans la liste 6, la méthode Index() ajoute un élément à la collection de données d’affichage nommée message avec la valeur Hello World!. Lorsque la vue est retournée par la méthode Index(), les données de la vue sont transmises automatiquement à la vue.

La vue de la liste 7 récupère le message à partir des données de l’affichage et restitue le message dans le navigateur.

Listing 7 -- \Views\Product\Index.aspx

<%@ 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 parti de la méthode Html.Encode() HTML Helper lors du rendu du message. Html.Encode() HTML Helper encode des caractères spéciaux tels que < et > en caractères qui peuvent être affichés en toute sécurité dans une page web. Chaque fois que vous affichez du contenu qu’un utilisateur envoie à un site web, vous devez encoder le contenu pour empêcher les attaques par injection de Code JavaScript.

(Étant donné que nous avons créé le message nous-mêmes dans le ProductController, nous n’avons pas vraiment besoin d’encoder le message. Toutefois, il est recommandé d’appeler toujours la méthode Html.Encode() lors de l’affichage du contenu récupéré à partir des données d’affichage au sein d’une vue.)

Dans la liste 7, nous avons tiré parti des données d’affichage pour passer un simple message de chaîne d’un contrôleur à une vue. Vous pouvez également utiliser l’affichage des données pour passer d’autres types de données, tels qu’une collection d’enregistrements de base de données, d’un contrôleur à une vue. Par exemple, si vous souhaitez afficher le contenu de la table de base de données Products dans une vue, vous devez passer la collection d’enregistrements de base de données dans les données d’affichage.

Vous avez également la possibilité de passer des données d’affichage fortement typées d’un contrôleur à une vue. Nous explorons cette rubrique dans le didacticiel Présentation des données et des vues fortement typées.

Résumé

Ce tutoriel a fourni une brève introduction à ASP.NET vues MVC, les données d’affichage et les helpers HTML. Dans la première section, vous avez appris à ajouter de nouvelles vues à votre projet. Vous avez appris que vous devez ajouter une vue au dossier approprié pour l’appeler à partir d’un contrôleur particulier. Ensuite, nous avons abordé le sujet des helpers HTML. Vous avez appris comment les helpers HTML vous permettent de générer facilement du contenu HTML standard. Enfin, vous avez appris à tirer parti des données d’affichage pour passer des données d’un contrôleur à une vue.

Partager via