Partager via

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

  • Article

Mise à jour : novembre 2007

Dynamic Data ASP.NET inclut des modèles de champs qui génèrent l'interface utilisateur pour l'affichage et la modification des champs de données. Vous pouvez personnaliser l'interface utilisateur en modifiant des modèles de champs existants et en créant des modèles de champs personnalisés.

Cette rubrique décrit comment personnaliser l'apparence de champ et le comportement d'un champ de données en suivant ces étapes :

  • Application de l'attribut UIHintAttribute à un champ de données dans le modèle de données. Cela donne l'ordre à Dynamic Data d'utiliser des modèles de champs personnalisés spécifiques pour traiter un champ de données.

  • Création des modèles de champs personnalisés correspondants pour restituer l'interface utilisateur pour l'affichage et la modification d'un champ de données.

Lorsque vous personnalisez un champ de données dans la couche de données, comme indiqué dans cette rubrique, la personnalisation s'applique globalement à un site Web. Dynamic Data utilise les modèles de champs personnalisés au lieu des modèles intégrés (lesquels sont sélectionnés selon le type intrinsèque de champ de données) pour afficher et modifier le champ de données.

Vous pouvez également limiter la personnalisation à une page unique. Pour plus d'informations, consultez Comment : personnaliser la disposition d'une table en utilisant un modèle de page personnalisé.

La personnalisation d'un champ de données dans la couche données requiert plusieurs étapes. Les procédures dans cette rubrique concernent chaque étape du processus.

Exécutez un exemple en ligne de cette fonctionnalité.

Spécification de modèles de champs personnalisés dans le modèle de données

Cette section décrit les étapes de l'association de modèles de champs personnalisés à un champ de données.

Pour appliquer un attribut à un champ de données

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Code, puis cliquez sur Ajouter un nouvel élément.

  2. Sous ModèlesVisual Studio installés, cliquez sur Classe.

  3. Dans la zone Nom, entrez le nom de la table de base de données (tel que défini dans le modèle de données) qui contient les données pour le modèle de champ personnalisé à afficher.

    Le nom du fichier doit correspondre au nom de classe d'entité qui représente la table. Par exemple, si le modèle de champ personnalisé doit afficher des données de la table SalesOrderDetail, vous nommez le fichier SalesOrderDetail.cs ou SalesOrderDetail.vb, et vous nommez la classe SalesOrderDetail. Le fichier de classe que vous créez contiendra également une classe associée qui vous permet d'appliquer des attributs aux champs de données.

  4. 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. Si vous travaillez en Visual C#, supprimez le constructeur par défaut.

  5. Importez les espaces de noms System.Web.DynamicData et System.ComponentModel.DataAnnotations en utilisant le mot clé Imports en Visual Basic ou le mot clé using en Visual C#, comme le montre l'exemple suivant :

    using System.Web.DynamicData;
using System.ComponentModel.DataAnnotations;

    Imports System.Web.DynamicData
Imports System.ComponentModel.DataAnnotations

  6. Dans le fichier de classe que vous avez créé dans les étapes 1 à 3, créez une autre classe partielle qui agira comme la classe de métadonnées associée. Vous pouvez lui donner n'importe quel nom.

    L'exemple suivant indique comment créer une classe de métadonnées associée pour le champ SalesOrderDetail.

    public partial class SalesOrderDetailMetadata
{

}

    Partial Public Class SalesOrderDetailMetadata

End Class

  7. Ajoutez l'attribut MetadataTypeAttribute à la définition de classe partielle pour la table de données. Pour le paramètre de l'attribut, spécifiez le nom de la classe de métadonnées que vous avez créée à l'étape précédente.

    L'exemple suivant indique comment appliquer l'attribut pour connecter la classe SalesOrderDetail partielle à sa classe de métadonnées associée.

    [MetadataType(typeof(SalesOrderDetailMetadata))]
public partial class SalesOrderDetail 
{

}

    <MetadataType(GetType(SalesOrderDetailMetadata))> _
Partial Public Class SalesOrderDetail 

End Class

  8. Dans la classe de métadonnées associée, créez une propriété publique dont le nom correspond au champ de données que vous souhaitez personnaliser.

  9. Appliquez l'attribut UIHintAttribute à la propriété, en spécifiant le nom du modèle de champ personnalisé à utiliser pour l'affichage et la modification.

    Le type Object est utilisé comme un type d'espace réservé dans la classe de métadonnées pour représenter le champ de données. Dynamic Data déduit le type réel du modèle de données au moment de l'exécution.

    public partial class SalesOrderDetailMetadata
{    
    [UIHint("CustomFieldTemplate")]
    public object OrderQty;
}

    Partial Public Class SalesOrderDetailMetadata
    <UIHint("CustomFieldTemplate")> _
    Public OrderQty As Object
End Class

  10. Enregistrez et fermez le fichier de classe.

Création de modèles de champs personnalisés

Les modèles de champs sont des contrôles utilisateur que Dynamic Data utilise pour restituer l'interface utilisateur permettant d'afficher et de modifier les champs de données. Cette section décrit les étapes de la création d'un modèle de champ personnalisé pour restituer l'interface utilisateur pour l'affichage d'un champ de données.

Pour créer un modèle de champ personnalisé à des fins d'affichage

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier DynamicData\FieldTemplates, puis cliquez sur Ajouter un nouvel élément.

  2. Sous Modèles Visual Studio installés, cliquez sur Champ Dynamic Data.

  3. Dans la zone Nom, entrez un nom pour le modèle de champ personnalisé. Vous pouvez utiliser tout nom qui n'est pas déjà en cours d'utilisation. Activez la case à cocher Placer le code dans un fichier distinct.

  4. Cliquez sur Ajouter.

    Visual Studio crée deux modèles de champs, un pour l'affichage et un pour la modification. Par exemple, si le nom que vous avez entré est CustomFieldTemplate.ascx, Visual Studio crée CustomFieldTemplate.ascx et CustomFieldTemplate_Edit.ascx. Le premier modèle restitue l'interface utilisateur pour l'affichage du champ de données, et le second pour sa modification.

  5. Si vous souhaitez personnaliser l'affichage d'un champ de données, ouvrez le fichier du contrôle utilisateur de l'affichage et ajoutez votre personnalisation.

    L'exemple suivant illustre un modèle de champ personnalisé pour l'affichage des données. Dans l'exemple, le contrôle Literal, fourni par défaut dans le modèle Champ Dynamic Data, est remplacé par un contrôle Label dont la valeur de la propriété Text est la chaîne de valeur de champ actuelle. Vous pouvez accéder à la valeur du champ de données en utilisant la propriété FieldValueString.

    <asp:Label id="Label1"  
  Text='<%# FieldValueString %>'>
</asp:Label>

  6. Si nécessaire pour la personnalisation, ouvrez le fichier code-behind pour le modèle de champ d'affichage et ajoutez vos personnalisations.

    L'exemple suivant indique comment synchroniser le code avec les modifications que vous avez apportées dans le balisage affiché à l'étape précédente. Dans le code, l'identificateur Literal1 est remplacé par l'identificateur Label1 pour prendre en charge la personnalisation de l'interface utilisateur pour l'affichage.

    public override Control DataControl {
  get {return Label1;}
}

    Public Overrides ReadOnly Property DataControl() As Control
  Get
    Return Label1
  End Get
End Property

  7. Substituez la méthode OnDataBinding du modèle de champ et ajoutez du code pour personnaliser l'affichage du champ de données.

    Dans la méthode, vous pouvez obtenir la valeur du champ de données actuel à partir de la propriété FieldValue du contrôle, puis personnaliser l'affichage, comme le montre l'exemple suivant.

    protected override void OnDataBinding(EventArgs e)
{

    if (currentQty < min)
    {
      Label1.ForeColor = System.Drawing.Color.Red;
      Label1.Font.Bold = true;
    }
    else
      if (currentQty > max)
      {
        Label1.ForeColor = System.Drawing.Color.Blue;
        Label1.Font.Bold = true;
       }
    }
  }

    Protected Overloads Overrides Sub OnDataBinding( _
ByVal e As EventArgs)

    If currentQty < min Then
      Label1.ForeColor = System.Drawing.Color.Red
      Label1.Font.Bold = True
    ElseIf currentQty > max Then
      Label1.ForeColor = System.Drawing.Color.Blue
      Label1.Font.Bold = True
    End If
  End If
End Sub

La procédure suivante décrit les étapes de la création d'un modèle de champ personnalisé pour restituer l'interface utilisateur pour la modification d'un champ de données.

Pour créer un modèle de champ personnalisé à des fins de modification

  1. Ouvrez le modèle de champ personnalisé dont le nom se termine par le suffixe _Edit, puis ajoutez vos personnalisations.

    L'exemple suivant affiche le balisage qui ajoute un contrôle CustomValidator, contrôle (Référence générale) pour afficher des messages d'avertissement personnalisés si les données entrées par l'utilisateur ne sont pas valides. Par exemple, un message s'affiche si la valeur du champ de données n'est pas comprise dans les limites définies dans le modèle de champ. L'exemple affecte à la propriété Display du validateur la valeur "Dynamic" afin que le contrôle de validation ne s'affiche que si la validation échoue. Le code affecte à l'attribut ControlToValidate l'ID du contrôle à valider. Il affecte également à l'attribut OnServerValidate le nom d'un gestionnaire pour l'événement de validation.

    <asp:CustomValidator id="CustomValidator1"  
  ControlToValidate="TextBox1" Display="Dynamic"
  OnServerValidate="CustomValidation" />

  2. Enregistrez et fermez le fichier de contrôle utilisateur.

  3. Si nécessaire pour la personnalisation, ouvrez le fichier code-behind pour le modèle de champ de modification et ajoutez vos personnalisations.

    L'exemple suivant indique comment créer du code serveur pour un contrôle CustomValidator. Le code compare la valeur entrée par l'utilisateur à quelques valeurs de seuil et affiche un message d'erreur si les données ne sont pas dans la plage autorisée.

    protected void CustomValidation(object source, 
   ServerValidateEventArgs args)
{
    // Check if the input is in the allowed range.
    bool result = CheckRange(intUnits);
    // Return result.    
    args.IsValid = result;
}

    Protected Sub CustomValidation( _
  ByVal source As Object, ByVal args As ServerValidateEventArgs)

    'Check if the value is in the allowed range.
     Dim result As Boolean = CheckRange(intUnits)
     'Return result.    
     args.IsValid = result
End Sub

Exemple

L'exemple indique comment utiliser le modèle de données pour personnaliser l'interface utilisateur rendue pour l'affichage et la modification du champ de données OrderQty de la table SalesOrderDetail.

Le modèle de champ CustomFieldTemplate.ascx affiche la quantité commandée en utilisant un premier plan rouge si la valeur est inférieure au seuil d'avertissement minimal. Il affiche la quantité commandée en utilisant un premier plan bleu si la valeur est supérieure au seuil d'avertissement maximal.

Le modèle de champ CustomFieldTemplate_Edit.ascx vérifie la valeur OrderQty entrée par l'utilisateur en fonction des limites de la plage. Un message d'erreur personnalisé s'affiche si la valeur entrée par l'utilisateur n'est pas dans la plage autorisée.

<%@ Page Language="VB" 
AutoEventWireup="true" CodeFile="CustomAppearanceBehavior.aspx.vb" 
Inherits="CustomAppearanceBehavior" %>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title></title>
    <link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <h2>Example: <%=Title%></h2>

     <!-- Enable dynamic behavior. The GridView must be 
     registered with the manager. See code-behind file. -->
    <asp:DynamicDataManager ID="DynamicDataManager1" 
        AutoLoadForeignKeys="true" />


    <form id="form1" >

        <!-- Capture validation exceptions -->
        <asp:DynamicValidator ID="ValidatorID" ControlToValidate="GridView1" 
             /> 

        <asp:GridView ID="GridView1" 
             
            DataSourceID="GridDataSource" 
            AutoGenerateColumns="false"  
            AutoGenerateEditButton="true"
            AllowPaging="true"
            PageSize="10"
            AllowSorting="true">
            <Columns>
                <asp:DynamicField DataField="OrderQty" />
                <asp:DynamicField DataField="UnitPrice" />
                <asp:DynamicField DataField="ModifiedDate" />
            </Columns>
            <EmptyDataTemplate>
                There are currently no items in this table.
            </EmptyDataTemplate>
       </asp:GridView>
    </form>

    <!-- Connect to the database -->
    <asp:LinqDataSource ID="GridDataSource"   
        TableName="SalesOrderDetails" EnableUpdate="true"
        ContextTypeName="AdventureWorksLTDataContext">
    </asp:LinqDataSource>
</body>
</html>

<%@ Page Language="C#" 
AutoEventWireup="true" CodeFile="CustomAppearanceBehavior.aspx.cs" 
Inherits="CustomAppearanceBehavior" %>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title></title>
    <link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <h2>Example: <%=Title%></h2>

     <!-- Enable dynamic behavior. The GridView must be 
     registered with the manager. See code-behind file. -->
    <asp:DynamicDataManager ID="DynamicDataManager1" 
        AutoLoadForeignKeys="true" />


    <form id="form1" >

        <!-- Capture validation exceptions -->
        <asp:DynamicValidator ID="ValidatorID" ControlToValidate="GridView1" 
             /> 

        <asp:GridView ID="GridView1" 
             
            DataSourceID="GridDataSource" 
            AutoGenerateColumns="false"  
            AutoGenerateEditButton="true"
            AllowPaging="true"
            PageSize="10"
            AllowSorting="true">
            <Columns>
                <asp:DynamicField DataField="OrderQty" />
                <asp:DynamicField DataField="UnitPrice" />
                <asp:DynamicField DataField="ModifiedDate" />
            </Columns>
            <EmptyDataTemplate>
                There are currently no items in this table.
            </EmptyDataTemplate>
       </asp:GridView>
    </form>

    <!-- Connect to the database -->
    <asp:LinqDataSource ID="GridDataSource"   
        TableName="SalesOrderDetails" EnableUpdate="true"
        ContextTypeName="AdventureWorksLTDataContext">
    </asp:LinqDataSource>
</body>
</html>

Imports System
Imports System.Collections
Imports System.Configuration
Imports System.Web.DynamicData

Partial Public Class CustomAppearanceBehavior
    Inherits System.Web.UI.Page
    Protected _table As MetaTable

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
        ' Register control with the data manager.
        DynamicDataManager1.RegisterControl(GridView1)
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        ' Get the table entity.
        _table = GridDataSource.GetTable()

        ' Assign title dynamically.
        Title = String.Concat( _
        "Customize Appearance and Behavior of the ", _
        _table.Columns(2).DisplayName, " Data Field")
    End Sub
End Class

using System;
using System.Collections;
using System.Configuration;
using System.Web.DynamicData;

public partial class CustomAppearanceBehavior : System.Web.UI.Page
{
    protected MetaTable _table;

    protected void Page_Init(object sender, EventArgs e)
    {
        // Register control with the data manager.
        DynamicDataManager1.RegisterControl(GridView1);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        // Get the table entity.
        _table = GridDataSource.GetTable();

        // Assign title dynamically.

        Title = string.Concat("Customize Appearance and Behavior of the ",
            _table.Columns[2].DisplayName, " Data Field");

    }
}

Compilation du code

Pour compiler cet exemple de code, vous avez besoin des éléments suivants :

  • 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).

  • Un site Web dynamique piloté par des données. Celui-ci 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. Pour plus d'informations, consultez Walkthrough: Creating a New Dynamic Data Web Site using Scaffolding.

Voir aussi

Tâches

Procédure pas à pas : ajout de Dynamic Data à un site Web existant

Concepts

Vue d'ensemble des modèles de champs Dynamic Data ASP.NET

Vue d'ensemble des modèles de données Dynamic Data ASP.NET

Vue d'ensemble de Dynamic Data ASP.NET

Référence

FieldTemplateUserControl