Comment : personnaliser l'affichage d'un champ de données dans le modèle de données

Article
10/22/2014

Mise à jour : novembre 2007

Cette rubrique décrit comment personnaliser l'affichage d'un champ de données (colonne de table) dans Dynamic Data ASP.NET en créant votre propre modèle de champ. Cette rubrique présente les tâches suivantes :

Créer un modèle de champ personnalisé pour personnaliser l'affichage du champ de données.

Associer le modèle de champ personnalisé au champ de données. Cela établit la connexion du modèle de données entre le champ de données et le modèle de champ personnalisé permettant de gérer l'affichage.

Remarque :
Lorsque vous personnalisez un affichage de champ de données en utilisant le modèle, la personnalisation s'applique à l'ensemble du site Web. En d'autres termes, Dynamic Data utilise le modèle de champ personnalisé au lieu du modèle par défaut (lequel est sélectionné selon le type de champ de données) pour afficher le champ de données.

Pour créer un modèle de champ personnalisé

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier DynamicData\FieldTemplates, puis cliquez sur Ajouter un nouvel élément.
Sous Modèles installés, cliquez sur Modèle de champ.

Dans la zone Nom, entrez le nom du contrôle ; vous pouvez utiliser n'importe quel nom. Activez la case à cocher Placer le code dans un fichier distinct.
Basculez vers ou ouvrez le fichier de contrôle utilisateur que vous venez de créer.

Dans la directive @ Control, ajoutez un attribut CodeFile qui référence le fichier code-behind et un attribut Inherits qui référence la classe de contrôle.

<%@ Control Language="C#" 
  CodeFile=MyCustomControl.ascx.cs"
  Inherits="MyCustomControl" %>

<%@ Control Language="VB" 
  CodeFile=MyCustomControl.ascx.cs"
  Inherits="MyCustomControl" %>

Créez le balisage qui sera restitué pour afficher les données.

L'exemple suivant présente un contrôle Label dont la propriété Text correspond à la chaîne de valeur du champ actuel et dont la valeur de la propriété OnDataBinding est un gestionnaire d'événements personnalisé.
```
<asp:Label id="TextLabel1"  
  OnDataBinding="DataBindingHandler" 
  Text='<%# FieldValueString %>'>
</asp:Label> 
```
Enregistrez et fermez le fichier de contrôle utilisateur.
Ouvrez le fichier code-behind du contrôle utilisateur.
Ajoutez la directive d'espace de noms qui fait référence à System.Web.DynamicData en utilisant le mot clé Imports dans Visual Basic ou le mot clé using dans Visual C#.
```
using System.Web.DynamicData;
```
```
Imports System.Web.DynamicData
```

Dérivez la classe partielle du contrôle utilisateur de la classe FieldTemplateUserControl comme indiqué ci-après.

partial class MyCustomControl: FieldTemplateUserControl

{ }

Public Partial Class MyCustomControl Inherits _ FieldTemplateUserControl

End Class

Pour personnaliser l'affichage du champ de données par le contrôle, gérez l'événement OnDataBinding du contrôle utilisateur. Dans le gestionnaire, vous pouvez obtenir la valeur du champ de données actuel à partir de la propriété FieldValue du contrôle et personnaliser l'affichage en conséquence.

L'exemple suivant montre comment gérer l'événement OnDataBinding.

public void DataBindingHandler(object sender, EventArgs e)
{
  // Define the understocked threshold.
  short underStockedThreshold = 150;
  // Get the current number of items in stock.
  short currentValue = (short)FieldValue;
  // Check product stock. 
  if (currentValue < underStockedThreshold)
  {
      // Customize display here. For example you show the data with      
     //a red background.
  }
}

Public Sub DataBindingHandler(ByVal sender As Object, _
ByVal e As EventArgs)
  ' Define the understocked threshold.
  Dim underStockedThreshold As Short = 150
  ' Get the current number of items in stock.
    Dim currentValue As Short = DirectCast(FieldValue, Short)
    ' Check product stock. 
    If currentValue < underStockedThreshold Then
        'Customize display here. For example you show the data with      
       'a red background.
    End If
End Sub

Fermez le fichier code-behind du contrôle utilisateur. Vous avez maintenant créé un modèle de champ personnalisé.

Pour associer un modèle de champ personnalisé à un champ de données

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Code, puis cliquez sur Ajouter un nouvel élément.
Sous Modèles installés, cliquez sur Classe.

Dans la zone Nom, entrez le nom de la table de base de données qui contient les données du modèle de champ personnalisé à afficher.

Par exemple, si le contrôle personnalisé affiche les données de la table Products, le nom de fichier sera Products.cs ou Product.vb, et le nom de classe sera Product. Ce fichier contiendra également une classe auxiliaire qui vous permet de personnaliser affichage du champ de données.
Basculez vers ou ouvrez le fichier de classe que vous venez de créer.
Ajoutez le mot clé Partial dans Visual Basic ou le mot clé partial dans Visual C# à la définition de classe pour en faire une classe partielle.
Ajoutez la directive d'espace de noms qui fait référence à System.Web.DynamicData et à System.ComponentModel.DataAnnotations en utilisant le mot clé Imports dans Visual Basic ou le mot clé using dans Visual C#.
```
using System.Web.DynamicData;
using System.ComponentModel.DataAnnotations;
```
```
Imports System.Web.DynamicData
Imports System.ComponentModel.DataAnnotations 
```
Ajoutez l'attribut MetadataTypeAttribute à la définition de classe partielle. Le paramètre de l'attribut correspond au nom de la classe de métadonnées auxiliaire que vous créerez afin de gérer la personnalisation de l'affichage du champ de données.
```
[MetadataType(typeof(ProductMetadata))]
public partial class Product {

}
```
```
<MetadataType(GetType(ProductMetadata))> _
Public Partial Class Product 

End Class
```
Créez une classe qui servira de classe de métadonnées auxiliaire. Vous pouvez lui donner n'importe quel nom, mais celui-ci doit correspondre à celui que vous avez référencé dans l'attribut MetadataTypeAttribute à l'étape précédente.
Dans la classe de métadonnées, créez un champ dont le nom correspond au champ de données à afficher. Marquez le champ en utilisant l'attribut UIHintAttribute, en spécifiant le nom du modèle de champ personnalisé utilisé pour l'affichage.

La classe auxiliaire a uniquement pour objet de fournir un emplacement pour définir l'attribut UIHintAttribute, afin que vous n'ayez pas à ajouter d'autre code à la classe.

L'exemple suivant présente une définition complète pour la classe de métadonnées qui inclut un champ unique (avec l'attribut UIHintAttribute) définissant l'affichage personnalisé du champ UnitsInStock.
```
public class ProductMetadata
  [UIHint("UnitsInStock")]
  public object UnitsInStock;
}
```
```
Public Class ProductMetadata 
  <UIHint("UnitsInStock")> _
  Public UnitsInStock As Object
End Class
```

Exemple

L'exemple suivant présente un modèle de champ personnalisé qui vérifie le niveau de stock des produits. Si le niveau de stock d'un produit est insuffisant, le modèle de champ affiche la valeur en utilisant un premier plan rouge.

<%@ Control Language="VB" CodeFile="UnitsInStock.ascx.vb" 
Inherits="DynamicData_FieldTemplates_UnitsInStock" %>

<asp:Label id="TextLabel1" OnDataBinding="DataBindingHandler"
Text='<%# FieldValueString %>' ></asp:Label>

<%@ Control Language="C#" CodeFile="UnitsInStock.ascx.cs" 
Inherits="DynamicData_FieldTemplates_UnitsInStock" %>

<asp:Label id="TextLabel1" OnDataBinding="DataBindingHandler"
Text='<%# FieldValueString %>' ></asp:Label>

Imports System.Web.DynamicData

Partial Public Class DynamicData_FieldTemplates_UnitsInStock
    Inherits FieldTemplateUserControl
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

    End Sub

    ' DataBinding event handler.
    Public Sub DataBindingHandler(ByVal sender As Object, _
                                  ByVal e As EventArgs)
        ' Define product understocked threshold.
        Dim underStockedThreshold As Short = 150

        ' Get the current number of items in stock.
        Dim currentValue As Short = DirectCast(FieldValue, Short)

        ' Check product stock. 
        If currentValue < underStockedThreshold Then
            ' The product is understocked, set its 
            ' foreground color to red.
            TextLabel1.ForeColor = System.Drawing.Color.Red
        End If
    End Sub

End Class

using System.Web.DynamicData;

public partial class DynamicData_FieldTemplates_UnitsInStock :  FieldTemplateUserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    // DataBinding event handler.
    public void DataBindingHandler(object sender, EventArgs e)
    {
        // Define product understocked threshold.
        short underStockedThreshold = 150;

        // Get the current number of items in stock.
        short currentValue = (short)FieldValue;

        // Check product stock. 
        if (currentValue < underStockedThreshold)
        {
            // The product is understocked, set its 
            // foreground color to red.
            TextLabel1.ForeColor = System.Drawing.Color.Red;
        }
    }

}

Compilation du code

Microsoft Visual Studio 2008 Service Pack 1 ou Visual Web Developer 2008 Express Service Pack 1.
L'exemple de base de données AdventureWorksLT. 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).
Site Web Dynamic Data. Cela vous permet de créer un contexte de données pour la base de données, ainsi que la classe qui contient le champ de données à personnaliser et les méthodes à substituer. De plus, il crée l'environnement dans lequel utiliser la page décrite ci-avant. Pour plus d'informations, consultez Procédure pas à pas : création d'un nouveau site Web Dynamic Data à l'aide de la génération de modèles automatique.