Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

Procédure pas à pas : utilisation de programmes d'assistance basés sur un modèle pour afficher des données dans ASP.NET MVC

Les programmes d'assistance basés sur des modèles permettent de générer automatiquement une interface utilisateur s'appuyant sur un modèle de données qui est marqué avec les attributs définis dans l'espace de noms System.ComponentModel.DataAnnotations. Par exemple, une propriété du modèle de données peut être marquée avec l'attribut DataTypeAttribute de façon à spécifier qu'elle représente une date. Un programme d'assistance basé sur un modèle peut ensuite restituer automatiquement la valeur de propriété sous forme de date à l'aide d'un contrôle conçu pour les dates, au lieu d'utiliser le rendu par défaut, qui consiste à afficher la valeur de propriété sous la forme d'une chaîne de date et d'heure.

Dans cette procédure pas à pas, vous allez modifier le contrôleur Home d'une application ASP.NET MVC pour afficher la table Products de la base de données AdventureWorksLT2008. En utilisant la correspondance de types (parfois appelée génération de modèles automatique de données) qui est intégrée aux programmes d'assistance ASP.NET MVC 2 basés sur des modèles, vous générerez également des vues qui restituent automatiquement l'interface utilisateur appropriée aux données du modèle.

Un projet Visual Studio (avec code source) est disponible pour accompagner cette rubrique : Télécharger.

Pour exécuter cette procédure pas à pas, vous avez besoin des éléments suivants :

  • Microsoft Visual Studio 2008 Service Pack 1 ou Visual Web Developer 2008 Express Edition Service Pack 1.

  • Infrastructure ASP.NET MVC 2. Si vous avez installé Visual Studio 2010, ASP.NET MVC 2 est déjà installé sur votre ordinateur. Pour télécharger la version la plus à jour de l'infrastructure, consultez la page Téléchargement d'ASP.NET MVC (page éventuellement en anglais).

  • Exemple de base de données AdventureWorksLT_2008. Pour plus d'informations sur le téléchargement et l'installation de l'exemple de base de données SQL Server, consultez Exemples de produits Microsoft SQL Server : Base de données (en anglais) sur le site CodePlex. Prenez soin d'installer la version appropriée de l'exemple de base de données pour la version de SQL Server que vous exécutez (Microsoft SQL Server 2005 ou Microsoft SQL Server 2008).

    RemarqueRemarque :

    Cette procédure pas à pas suppose que le projet MVC créé utilise l'espace de noms MvcTmpHlprs. Tous les espaces de noms employés dans la procédure correspondent à MvcTmpHlprs. Si vous avez créé un projet avec un autre nom, vous devez remplacer l'espace de noms de l'exemple de code par celui de votre projet.

Cette procédure pas à pas suppose également que vous êtes familiarisé avec MVC. Pour plus d'informations, consultez ASP.NET Model View Controller.

Cette procédure pas à pas utilise un modèle EDM (Entity Data Model) créé à partir de l'exemple de base de données AdventureWorksLT_2008. La première étape de cette procédure pas à pas va consister à créer un projet MVC 2 et à ajouter un modèle EDM à partir de l'exemple de base de données AdventureWorksLT_2008.

Pour créer un projet MVC avec un modèle de base de données AdventureWorks

  1. Créez un projet MVC 2 avec le nom MvcTmpHlprs.

  2. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Data, puis cliquez sur Ajouter et sur Élément existant.

    La boîte de dialogue Ajouter un élément existant s'affiche.

  3. Naviguez jusqu'au dossier contenant le fichier AdventureWorksLT2008_Data.mdf, sélectionnez ce dernier, puis cliquez sur Ajouter.

    RemarqueRemarque :

    Vous pouvez copier le fichier AdventureWorksLT2008_Data.mdf à partir de l'emplacement de téléchargement indiqué pour cette procédure pas à pas.

  4. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet MvcTmpHlprs, puis cliquez sur Ajouter et sur Nouvel élément.

    La boîte de dialogue Ajouter un nouvel élément s'affiche.

  5. Sous Modèles installés, cliquez sur Entity Data Model ADO.NET.

  6. Dans la zone Nom, acceptez le nom de modèle par défaut Model1.edmx.

  7. Cliquez sur Ajouter.

    La fenêtre Assistant EDM s'affiche.

  8. Cliquez sur Générer à partir de la base de données.

  9. Sous Quelle connexion de données votre application doit-elle utiliser pour établir une connexion à la base de données ?, sélectionnez AdventureWorksLT2008_Data.mdf dans la liste.

  10. Assurez-vous que la case à cocher Enregistrer les paramètres de connexion de l'entité dans Web.config en tant que est activée. Vous pouvez laisser le nom de chaîne de connexion par défaut.

  11. Cliquez sur Suivant.

    L'Assistant affiche une page vous permettant de spécifier les objets de base de données à inclure dans votre modèle.

  12. Sélectionnez le nœud Tables pour sélectionner toutes les tables de la base de données. Vous pouvez laisser l'espace de noms du modèle par défaut.

  13. Cliquez sur Terminer.

    ADO.NET Entity Data Model Designer s'affiche. Fermez le concepteur.

L'étape suivante de cette procédure pas à pas va consister à modifier le contrôleur Home de façon à afficher les données de la table Products.

Pour créer une vue Liste permettant d'afficher les champs de données

  1. Ouvrez la classe HomeController dans l'éditeur.

  2. Sous la déclaration de classe, ajoutez la ligne suivante au contrôleur Home de façon à pouvoir accéder à la base de données AdventureWorksLT2008.

    AdventureWorksLT2008Entities _db = 
        new AdventureWorksLT2008Entities ();
    

    Dim _db As AdventureWorksLT2008Entities = _
        New AdventureWorksLT2008Entities   
    
  3. Remplacez le contenu de la méthode Index de la classe HomeController par la ligne suivante de façon à afficher les produits de la base de données AdventureWorksLT2008.

    var dn = _db.Product
        .Where(c => c.ProductID < 715);
    return View(dn);
    

    Dim dn = _db.Product _
        .Where(Function(c) c.ProductID < 715)
    Return View(dn) 
    

    La clause Where limite la page d'index à un sous-ensemble de lignes de la table Products.

  4. Supprimez le fichier Views\Home\Index.aspx.

  5. Cliquez avec le bouton droit dans la méthode d'action Index, puis cliquez sur Ajouter une vue.

    La boîte de dialogue Ajouter une vue s'affiche.

    mvc_AddViewDialog
  6. Activez la case à cocher Créer une vue fortement typée.

  7. Dans la liste Afficher la classe de données, sélectionnez la classe Product.

    Le nom de classe de produit qualifié complet inclura un espace de noms tel que MvcTmpHlprs.Models.Product.

  8. Dans la liste Afficher le contenu, sélectionnez Liste.

    La création d'une vue Liste entraîne automatiquement l'ajout du type IEnumerable à la valeur d'attribut Inherits de la page.

  9. Acceptez les valeurs par défaut pour les autres zones de texte et cases à cocher.

  10. Cliquez sur Ajouter.

    Une vue nommée Index est créée pour le contrôleur Home.

  11. Remplacez tout le contenu du fichier Views\Home\Index.aspx, à l'exception de la directive @ Page, par le balisage suivant :

    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
      MVC Product Index Sample
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <h2>Index using  Html.DisplayFor</h2>
        <table>
          <tr>
            <th> Product ID </th>
            <th>Name</th>
            <th>Color</th>
            <th>Std. Cost</th>
            <th>List Price</th>
            <th>Size</th>
            <th>Weight</th>
            <th>Sell Start Date</th>
            <th>Sell End Date</th>
            <th>Discontinued Date </th>
          </tr>
          <% foreach (var item in Model) { %>    
          <tr>
            <td> <%= Html.DisplayFor(c => item.ProductID) %> </td>
            <td> <%= Html.DisplayFor(c => item.Name)%> </td>
            <td> <%= Html.DisplayFor(c => item.Color) %></td>
            <td> <%= Html.DisplayFor(c => item.StandardCost)%> </td>
            <td> <%= Html.DisplayFor(c => item.ListPrice)%> </td>
            <td> <%= Html.DisplayFor(c => item.Size) %></td>
            <td> <%= Html.DisplayFor(c => item.Weight) %> </td>
            <td> <%= Html.DisplayFor(c => item.SellStartDate, 
                "Date") %> </td>
            <td> <%= Html.DisplayFor(c => item.SellEndDate) %></td>
            <td> <%= Html.DisplayFor(c => item.DiscontinuedDate)%></td>
          </tr>
    
          <% } %>
      </table>
    </asp:Content>
    

    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
      MVC Product Index Sample
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <h2>Index using  Html.DisplayFor</h2>
        <table>
          <tr>
                <th> Product ID </th>
                <th>Name</th>
                <th>Color</th>
                <th>Std. Cost</th>
                <th>List Price</th>
                <th>Size</th>
                <th>Weight</th>
                <th>Sell Start Date </th>
                <th>Sell End Date</th>
                <th>Discontinued Date </th>
          </tr>
          <% For Each item In Model%>
          <tr>
            <td> <%=Html.DisplayFor(Function(c) item.ProductID)%> </td>
            <td> <%= Html.DisplayFor(Function(c) item.Name)%> </td>
            <td> <%= Html.DisplayFor(Function(c) item.Color) %></td>
            <td> <%= Html.DisplayFor(Function(c) item.StandardCost)%> </td>
            <td> <%= Html.DisplayFor(Function(c) item.ListPrice)%> </td>
            <td> <%= Html.DisplayFor(Function(c) item.Size) %></td>
            <td> <%= Html.DisplayFor(Function(c) item.Weight) %> </td>
            <td> <%=Html.DisplayFor(Function(c) item.SellStartDate, _
              "Date")%> 
          </td>
            <td> <%= Html.DisplayFor(Function(c) item.SellEndDate) %></td>
            <td> <%= Html.DisplayFor(Function(c) item.DiscontinuedDate)%></td>
          </tr>
        <% Next%>
      </table>
    </asp:Content> 
    
    
    RemarqueRemarque :

    Vous devez utiliser l'espace de noms approprié dans l'attribut Inherits de la directive de page. La classe Products fortement typée doit être de type IEnumerable.

  12. Appuyez sur CTRL+F5 pour exécuter l'application.

    Une table de données de produits s'affiche. Les trois champs DateTime (Sell Start Date, Sell End Date et Discontinued Date) affichent la date et l'heure.

Au cours de cette étape, vous allez créer un modèle de date qui restituera les données DateTime en utilisant uniquement la partie correspondant à la date (l'heure ne sera pas affichée).

Pour ajouter un modèle de date

  1. Dans le dossier Views\Home, créez un dossier DisplayTemplates.

  2. Dans le dossier Views\Shared, créez un autre dossier DisplayTemplates.

    Les modèles d'affichage du dossier Views\Shared\DisplayTemplates seront utilisés par tous les contrôleurs. Les modèles d'affichage du dossier Views\Home\DisplayTemplates seront utilisés par le contrôleur Home. Les modèles d'affichage qui seront utilisés par plusieurs contrôleurs doivent être placés dans le dossier Views\Shared\DisplayTemplates. (Si des modèles de même nom s'affichent dans les deux dossiers, le modèle du dossier Views\Home\DisplayTemplates sera employé.)

  3. Dans l'Explorateur de solutions, développez le dossier Views et le dossier Shared, puis cliquez avec le bouton droit sur le dossier Views\Shared\DisplayTemplates.

  4. Cliquez sur Ajouter, puis sur Vue.

    La boîte de dialogue Ajouter une vue s'affiche.

    Dans la zone Nom de la vue, tapez Date.

  5. Activez la case à cocher Créer une vue partielle (.ascx). Vérifiez que la case à cocher Créer une vue fortement typée n'est pas activée.

  6. Cliquez sur Ajouter.

    Le contrôle Views\Shared\DisplayTemplates\Date.ascx est créé.

  7. Ajoutez le balisage qui met en forme la propriété sous forme de date (sans heure).

    L'exemple suivant présente le contrôle Date.ascx complet. La méthode String.Format est utilisée pour mettre en forme la valeur de la propriété.

    <%@ Control Language="C#" 
      Inherits="System.Web.Mvc.ViewUserControl" %>
    <%= Html.Encode(String.Format("{0:d}", Model)) %> 
    

    <%@ Control Language="VB" 
      Inherits="System.Web.Mvc.ViewUserControl" %>
    <%= Html.Encode([String].Format("{0:d}", Model)) %>
    
  8. Appuyez sur CTRL+F5 pour exécuter l'application.

    La colonne SellStartDate affiche maintenant une date sans heure. Lorsque vous exécutez l'application, l'infrastructure MVC affiche la page Index.aspx en tant que vue par défaut. Dans la page Index.aspx, la ligne suivante utilise la surcharge de la méthode d'extension Html.DisplayFor pour spécifier que le contrôle Date.aspx doit être employé pour restituer la propriété. En modifiant le contrôle Date.aspx, vous avez personnalisé l'affichage d'une valeur de date.

    <td> <%= Html.DisplayFor(Product=> item.SellStartDate,
        "Date") %> </td>
    

    <td> <%=Html.DisplayFor(Function(c) item.SellStartDate, _
        "Date")%> </td>
    

Au cours de cette étape, vous allez ajouter des attributs à la classe partielle du modèle de données afin de spécifier un modèle pour le rendu des données. Le modèle ASP.NET MVC affichera ainsi les dates au moyen du programme d'assistance basé sur un modèle que vous venez de créer.

Pour spécifier le mode de rendu des données au moyen des attributs DataAnnotations

  1. Ajoutez à votre projet une classe contenant les définitions de classe partielle. Pour plus d'informations, consultez Comment : valider des données de modèle à l'aide d'attributs DataAnnotations.

  2. Ajoutez au projet une référence au fichier System.ComponentModel.DataAnnotations.dll.

  3. Remplacez le contenu du fichier de classe partielle que vous venez de créer par le code suivant :

    using System.ComponentModel.DataAnnotations;
    namespace MvcTmpHlprs {
    
        [MetadataType(typeof(ProductMD))]
        public partial class Product {
            public class ProductMD {
                public object SellStartDate { get; set; }
                [UIHint("rbDate")]
                public object SellEndDate { get; set; }
                [DataType(DataType.Date)]
                public object DiscontinuedDate { get; set; }
                [ScaffoldColumn(false)]
                public object ModifiedDate { get; set; }
                [ScaffoldColumn(false)]
                public object rowguid { get; set; }
                [ScaffoldColumn(false)]
                public object ThumbnailPhotoFileName { get; set; }
            }
        }
    }
    

    Imports System.ComponentModel.DataAnnotations
    
    <MetadataType(GetType(ProductMD))> _
    Partial Public Class Product
    End Class
    
    Public Class ProductMD
    
        Private _SellStartDate As Object
        Public Property SellStartDate() As Object
            Get
                Return _SellStartDate
            End Get
            Set(ByVal value As Object)
                _SellStartDate = value
            End Set
        End Property
        Private _SellEndDate As Object
        <UIHint("rbDate")> _
        Public Property SellEndDate() As Object
            Get
                Return _SellEndDate
            End Get
            Set(ByVal value As Object)
                _SellEndDate = value
            End Set
        End Property
        Private _DiscontinuedDate As Object
        <DataType(DataType.Date)> _
        Public Property DiscontinuedDate() As Object
            Get
                Return _DiscontinuedDate
            End Get
            Set(ByVal value As Object)
                _DiscontinuedDate = value
            End Set
        End Property
        Private _ModifiedDate As Object
        <ScaffoldColumn(False)> _
        Public Property ModifiedDate() As Object
            Get
                Return _ModifiedDate
            End Get
            Set(ByVal value As Object)
                _ModifiedDate = value
            End Set
        End Property
        Private _rowguid As Object
        <ScaffoldColumn(False)> _
        Public Property rowguid() As Object
            Get
                Return _rowguid
            End Get
            Set(ByVal value As Object)
                _rowguid = value
            End Set
        End Property
        Private _ThumbnailPhotoFileName As Object
        <ScaffoldColumn(False)> _
        Public Property ThumbnailPhotoFileName() As Object
            Get
                Return _ThumbnailPhotoFileName
            End Get
            Set(ByVal value As Object)
                _ThumbnailPhotoFileName = value
            End Set
        End Property
    
    End Class 
    
  4. Enregistrez la classe.

  5. Appuyez sur CTRL+F5 pour exécuter l'application.

    La colonne Discontinued Date affiche maintenant une date sans heure. L'attribut DataTypeAttribute de la classe partielle Product utilise l'énumération DataType pour spécifier que la propriété DiscontinuedDate est indiquée en tant que date. Lorsqu'une propriété est annotée avec les informations de type de données, l'infrastructure MVC recherche un modèle portant le même nom.

Au cours de cette étape, vous allez créer un modèle de date affichant les données DateTime sous la forme d'une chaîne de texte rouge et en gras. Vous appliquerez l'attribut UIHintAttribute à la propriété SellEndDate pour spécifier que les données doivent être restituées à l'aide d'un contrôle de date qui inclut un balisage permettant d'afficher la date sous forme de texte rouge et en gras. Le contrôle de date de cette étape sera créé dans le dossier Views\Home\DisplayTemplates et s'appliquera uniquement au contrôleur Home. Le contrôle Views\Shared\DisplayTemplates\Date.ascx est partagé par tous les contrôleurs.

Dans la section précédente de la procédure pas à pas, vous avez utilisé l'attribut DataTypeAttribute pour spécifier le modèle à utiliser pour le rendu d'un type de données. L'attribut UIHintAttribute vous permet de passer un nombre arbitraire de paires nom/valeur afin de spécifier des informations supplémentaires pour le modèle. Pour plus d'informations sur l'écriture d'une classe UIHintAttribute personnalisée, consultez l'entrée Définition d'attributs de police avec UIHint dans votre classe partielle d'entité (en anglais) sur le blog de Rick Anderson.

Pour spécifier un modèle de rendu des données à l'aide de la propriété UIHint

  1. Copiez le contrôle Views\Shared\DisplayTemplates\Date.ascx dans le dossier Views\Home\DisplayTemplates.

  2. Renommez le fichier Date.ascx en rbDate.ascx.

  3. Ouvrez le fichier Views\Home\DisplayTemplates\rbDate.ascx dans l'éditeur.

  4. Modifiez le balisage pour restituer la propriété en texte rouge et en gras.

    <span style="font-weight:bold;color:red;">
    <%= Html.Encode(String.Format("{0:d}", Model)) %>
    </span>
    

    <span style="font-weight:bold;color:red;">
    <%= Html.Encode([String].Format("{0:d}", Model)) %> 
    </span>
    
  5. Appuyez sur CTRL+F5 pour exécuter l'application.

    La colonne SellEndDate affiche maintenant la date en texte rouge et en gras. La propriété SellEndDate est annotée avec l'attribut UIHintAttribute, qui spécifie que le contrôle rbDate doit être utilisé pour restituer la propriété.

Cette procédure pas à pas vous a donné un aperçu de la façon dont les programmes d'assistance basés sur des modèles peuvent être utilisés pour afficher des données dans une application MVC.

L'exemple de projet que vous pouvez télécharger inclut une page d'édition utilisant le programme d'assistance basé sur un modèle Html.EditorFor. Cette application affiche des contrôles d'édition, tels qu'une zone de texte, permettant aux utilisateurs d'entrer ou de modifier des valeurs de propriété. Le programme d'assistance basé sur un modèle Html.EditorFor restitue également la logique de validation qui applique des contraintes intégrées au modèle de données ou pouvant être ajoutées en tant qu'attributs System.ComponentModel.DataAnnotations à une classe partielle associée au modèle de données. Par exemple, l'illustration suivante présente les erreurs de validation qui s'affichent lorsque les contraintes System.ComponentModel.DataAnnotations appliquées à la classe partielle ne sont pas respectées.

editTmplateErrors

Pour plus d'informations sur l'utilisation des programmes d'assistance basés sur des modèles, consultez l'entrée Utilisation des nouveaux programmes d'assistance basés sur des modèles MVC 2 (en anglais) sur le blog de Rick Anderson.

Ajouts de la communauté

AJOUTER
Afficher: