Affichage d'une table de base de données

Cet article est la traduction la plus fidèle possible de l'article original : Displaying a Table of Database Data

Dans ce tutoriel, je montrerais deux méthodes pour afficher et mettre en forme un ensemble d'enregistrements d'une base de données dans un tableau HTML. Tout d'abord, je montre comment vous pouvez mettre en forme la base de données directement dans une vue. Ensuite, je démontrerais comment vous pouvez profiter des modèles partiels lors du formatage d'enregistrements de base de données.

Nous allons afficher l'ensemble des enregistrements de la table de base de données Movies. La table Movies contient les colonnes suivantes :

Afin de représenter la table de base de données Movies, nous allons tirer parti de LINQ to SQL en tant que technologie d'accès à notre base de données. En d'autres termes, nous allons construire les classes de notre modèle MVC à l'aide de LINQ to SQL.

Le moyen le plus rapide pour créer un ensemble de LINQ to SQL classes est d'utiliser Concepteur Objet/Relationnel de Visual Studio. Faites un clic droit sur le dossier Models, sélectionnez Ajouter, Nouvel élément, sélectionnez, dans données, le modèle Classes Linq To SQL, donner aux classes le nom Movies.dbml, et cliquez sur le bouton Ajouter (voir Figure 1).

Immédiatement après avoir créé les classe LINQ to SQL Movies, l'outil Concepteur Objet/Relationnel apparaît. Vous pouvez faire glisser des tables de la base de données depuis la fenêtre de l'Explorateur de serveurs sur le Concepteur Objet/Relationnel pour créer des classes LINQ to SQL qui représentent des tables de base de données spécifiques. Nous avons besoin d'ajouter la table Movies dans le Concepteur Objet/Relationnel (voir Figure 2).

Par défaut, le Concepteur Objet/Relationnel va essayer de créer un nom de classe correspondant au nom de la table au singulier. En d'autres termes, si vous avez une de table nommée Customers, le Concepteur Objet/Relationnel va créer une table appelée Customer

Le Concepteur Objet/Relationnel est habituellement assez bon pour cela. Malheureusement, le Concepteur Objet/Relationnel convertit le nom de la table de base de données Movies en Movies (proche, mais faux). Vous pouvez facilement corriger ce problème en double-cliquant sur le nom de la classe dans le Concepteur et en changeant le nom de la classe de Movies en Movie.

Enfin, n'oubliez pas de cliquer sur le bouton Enregistrer (l'image de la disquette) pour enregistrer les classes LINQ to SQL. Sinon, les classes LINQ to SQL ne seront pas générées par le Concepteur Objet/Relationnel.

Maintenant que nous disposons de nos classes LINQ to SQL, nous pouvons utiliser ces classes pour récupérer des données de la base de données. La classe contrôleur du Listing 1 utilise les classes LINQ to SQL pour récupérer les enregistrements de la table de base de données Movies.

using System.Linq;
using System.Web.Mvc;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var dataContext = new MovieDataContext();
            var movies = from m in dataContext.Movies
                  select m;
            return View(movies);
        }
    }
}

L'action Index() du listing 1 utilise la classe MovieDataContext de LINQ to SQL pour récupérer les données de la table Movies de la base de données. La liste des films est passée à la vue Index en tant que valeur de la propriété ViewData.Model.

La méthode la plus simple, mais pas nécessairement la meilleure, de mise en forme d'un ensemble d'enregistrements de la base de données est d'effectuer la mise en forme directement depuis la vue. Par exemple, la vue Index du Listing 2 effectue le rendu d'un enregistrement dans un tableau HTML.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" 
CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>

<%@ Import Namespace="MvcApplication1.Models" %>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

<table>
<tr>
     <th>Id</th><th>Title</th><th>Release Date</th>
</tr>
<% foreach (Movie m in (IEnumerable)ViewData.Model)
{ %>
<tr>
     <td><%= m.Id %></td>
     <td><%= Html.Encode(m.Title) %></td>
     <td><%= m.DateReleased %></td>
</tr>
<% } %>
</table>

</asp:Content>

La vue du Listing 2 contient une boucle foreach qui sur chacun des enregistrements du Model de la ViewData. La valeur de chacune des propriétés de l'objet Movie est affichée dans une des cellules du tableau. Les lignes de la table sont créées avec les balises HTML <tr> et les cellules du tableau sont créées avec les balises HTML <td>.

Notez que la méthode d'aide Html.Encode() est utilisée pour encoder la valeur de chaque propriété avant que la valeur ne soit affichée. Chaque fois que vous acceptez des données de la part de vos utilisateurs, et que vous réaffichez ces données dans une page web, il est important d'encoder les valeurs pour prévenir les attaques par injection JavaScript. Des hackers peuvent commettre de mauvaises actions, comme le vol de données personnelles des utilisateurs de votre site Web, lorsque vous ne faites pas attention à l'encodage du contenu HTML avant son affichage.

Lorsque vous exécutez l'application, la vue Index rend la page de la Figure 3.

La mise en forme du tableau HTML de la figure 3 n'est pas très excitante. Nous pouvons améliorer l'apparence du tableau HTML par la création d'une feuille de style css. Comme la vue du Listing 2 est une vue de contenu, nous devons ajouter la feuille de style à la page maître associée à la vue.

Cette page maître est située dans le chemin suivant :

\Views\Shared\Site.master

Afin d'améliorer l'apparence du tableau HTML, nous pouvons ajouter la feuille de style du Listing 3 entre l'ouverture et la clôture des balises <head> de la page maître.

<style type="text/css">
table
{
     border-collapse:collapse;
}

table td, table th
{
     border: solid 1px black;
     padding:10px;
}
</style>

La feuille de style dans le Listing 3 permet que les bordures du tableau coïncident et ajoute un quadrillage. Après avoir ajouté cette feuille de style à la page maître, la vue Index produit le rendu de la figure 4.

Au lieu d'effectuer toutes les mises en forme directement dans la vue, vous pouvez utiliser une vue partielle comme modèle pour chaque enregistrement de la base de données. Par exemple, la vue partielle du Listing 4 représente la mise en forme pour un enregistrement de la table Movie.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MovieTemplate.ascx.cs" Inherits="MvcApplication1.Views.Movies.MovieTemplate" %>
<tr>
     <td> <%=ViewData.Model.Id%></td>
     <td> <%=Html.Encode(ViewData.Model.Title)%></td>
     <td> <%=ViewData.Model.DateReleased.ToString("D")%></td>
</tr>

Le Template du listing 4 met en forme chaque enregistrement sous la forme d'une rangée d'un tableau HTML. Ce modèle de mise en forme est appliqué à chaque enregistrement. Notez que la propriété ViewData.Model, dans la vue partielle, représente un enregsitrement de base de données unique au lieu de l'ensemble des enregistrements transmis. Afin de convertir la propriété ViewData.Model en une instance de la classe Movie, vous avez besoin de créer une classe code-behind pour la vue partielle. La classe du Listing 5 précise que la classe partielle MovieTemplate hérite d'une classe générique qui a le type Movie comme type de paramètre.

using MvcApplication1.Models;
namespace MvcApplication1.Views.Movies
{
     public partial class MovieTemplate : System.Web.Mvc.ViewUserControl<Movie>
     {
     }
}

La classe MovieTemplate hérite de la classe ViewUserControl<Movie>. Comme la classe MovieTemplate hérite de cette classe, la propriété ViewData.Model est automatiquement convertie (castée) en Movie.

La vue Index du Listing 6 montre comment vous pouvez utiliser la classe partielle MovieTemplate dans une vue. La méthode Html.RenderPartial() est utilisée pour faire un rendu de la classe partielle MovieTemplate.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Movies.Index" %>
<%@ Import Namespace="MvcApplication1.Models" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<table>
<tr>
     <th>Id</th><th>Title</th><th>Release Date</th>
</tr>
     <% foreach (Movie m in (IEnumerable)ViewData.Model)
     {
          Html.RenderPartial("MovieTemplate", m);   
     } %>
</table>

</asp:Content>

Dans le Listing 6, la méthode Html.RenderPartial() est utilisée pour rendre faire le rendu de la classe partielle MovieTemplate pour chaque enregistrement. Deux paramètres sont passés à la méthode RenderPartial(). Le premier paramètre est le nom de la classe partielle à rendre. Tout comme les vues, une vue partielle doit, par défaut, être situé dans le dossier Views\ControllerName ou dans le dossier Views\Shared folder.

Le deuxième paramètre spécifie les données de vue transmises à la classe partielle. Dans la classe partielle, la propriété ViewData.Model représente un enregistrement de Movie.

Un avertissement important. La méthode Html.RenderPartial(), contrairement à la plupart des autres méthodes d'aide (helper methods), ne renvoie pas une chaîne de caractères. Cela signifie que vous ne devez pas appeler la méthode RenderPartial() :

<%= Html.RenderPartial("MovieTemplate", m) %>

Au lieu de cela, vous devrez appeler la méthode comme ceci :

<% Html.RenderPartial("MovieTemplate", m); %>

La méthode RenderPartial() fait quelque chose, elle ne renvoie pas quelque chose.

Le but de ce tutoriel était de montrer comment vous pouvez afficher une série d'enregistrements de base de données dans un tableau HTML. Nous avons exploré deux méthodes pour le formatage des enregistrements. Tout d'abord, nous avons mis en forme les données directement dans la vue. Ensuite, nous avons utilisé une vue partie comme modèle pour chaque enregistrement de base de données.