Partager via

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

  • Article

Mise à jour : Juillet 2008

Cette procédure pas à pas montre comment modifier un site Web ASP.NET existant afin d'inclure des fonctionnalités d'infrastructure Dynamic Data. En outre, elle présente diverses méthode de personnalisation d'un site Web Dynamic Data. À la fin de cette procédure pas à pas, vous disposerez d'un site Web fonctionnel qui utilise le modèle de données pour interagir avec la base de données. Vous disposerez également de modèles de champs personnalisés qui définissent la manière dont les champs de données sont restitués pour l'affichage et la modification.

L'une des caractéristiques de Dynamic Data ASP.NET est sa capacité à déduire au moment de l'exécution l'apparence et le comportement des champs de données à partir du modèle de données qui représente la base de données. Ces informations sont ensuite utilisées dans les contrôles de données, avec l'aide des modèles de champs, pour éviter la nécessité de code répétitif dans la couche de présentation.

Cette procédure pas à pas montre comment vous pouvez effectuer les opérations suivantes avec une quantité minimale de code :

  • Interagir avec le modèle de données. Dynamic Data incorpore des fonctionnalités vous permettant de créer une application pilotée par les données qui peut exécuter des opérations de création, lecture, mise à jour et suppression.

  • Personnaliser l'affichage et la modification des champs de données en créant des modèles de champs. Dynamic Data sélectionne les modèles de champ appropriés en fonction des informations déduites à partir du modèle de données.

Vous effectuerez les tâches suivantes :

  • Créer un site Web, puis le modifier afin de prendre en charge Dynamic Data. L'objectif principal de cette tâche est de créer le modèle de données qui sera utilisé par Dynamic Data pour interagir avec la base de données.

  • Créer des modèles de champs. Les modèles de champs sont des contrôles utilisateur qui définissent l'interface utilisateur permettant d'afficher et de modifier des données.

  • Créer une page personnalisée pour afficher une table. Cette page indique comment Dynamic Data interagit avec la base de données et montre que cette tâche ne requiert qu'une quantité minimale de code.

  • Tester l'intégration Dynamic Data. Cette tâche vous permet de vous assurer que les fonctionnalités Dynamic Data ont été intégrées dans le site Web. Vous pouvez interagir avec le modèle de données et vérifier que l'application fonctionne comme prévu. Dans le cadre de ce processus, vous génèrerez et gèrerez les erreurs.

Composants requis

Pour exécuter les exemples présentés dans cette rubrique, vous aurez 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).

Création d'un site Web Dynamic Data

De cette section, vous allez créer un site Web Dynamic Data dans Visual Studio. Vous commencerez par créer un site Web ASP.NET standard, puis le transformerez en un site qui prend en charge les fonctionnalités Dynamic Data. Pour cela, vous exécuterez les étapes suivantes :

  • Créez un site Web ASP.NET.

  • Connectez-le à une base de données. Cette base de données contient la table dont les colonnes (champs de données) seront accessibles à des fins d'affichage personnalisé et de modification.

  • Configurez le site pour utiliser des contrôles Dynamic Data. Cela permet l'intégration des fonctionnalités Dynamic Data dans le site Web.

Créez et configurez ensuite le modèle de données avec lequel vous travaillerez. Procédez comme suit :

  • Créez des classes de modèle de données basées sur une base de données SQL Server.

  • Ajoutez des métadonnées au modèle de données pour permettre la validation personnalisée de l'entrée d'utilisateur, et pour permettre par la suite à un contrôle Calendar de modifier des champs de données.

Préparation d'un site Web pour Dynamic Data

Cette section indique comment créer un site Web ASP.NET, ajouter une base de données et configurer le site Web pour intégrer les fonctionnalités Dynamic Data.

Pour créer un site Web ASP.NET

  1. Démarrez Visual Studio.

  2. Dans le menu Fichier, cliquez sur Nouveau, puis sur Site Web.

    La boîte de dialogue Nouveau site Web s'affiche.

  3. Sous Modèles Visual Studio installés, sélectionnez Site Web ASP.NET.

  4. En regard de la zone Emplacement, sélectionnez Système de fichiers, puis dans la deuxième zone, entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web. Par exemple, entrez le nom de dossier C:\WebSites\DynamicDataWebSite.

  5. Dans la liste Langage, sélectionnez le langage de programmation que vous préférez utiliser.

  6. Cliquez sur OK.

    Visual Studio crée les dossiers et les fichiers pour un site Web ASP.NET.

L'étape suivante consiste à ajouter une base de données au site. Cette base de données contient la table dont les colonnes (champs de données) seront accessibles à des fins d'affichage et de modification.

Pour ajouter la base de données au site Web

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

  2. Dans la boîte de dialogue Ajouter un élément existant, entrez l'emplacement dans lequel vous avez installé le fichier de base de données AdventureWorksLT (AdventureWorksLT.mdf), puis cliquez sur Ajouter.

    Cette procédure crée une copie du fichier de base de données dans le projet.

Vous pouvez maintenant configurer le site Web afin d'intégrer les fonctionnalités Dynamic Data.

Pour configurer le site Web

  1. Dans l'Explorateur de solutions, ouvrez le fichier Web.config.

  2. Ajoutez les références d'assembly pour les assemblys suivants :

    • System.Web.Routing

    • System.Web.DynamicData

    • System.ComponentModel.DataAnnotations

    L'exemple de code suivant montre comment procéder. Assurez-vous d'utiliser les versions d'assembly correctes.

    <system.web>
  <compilation>
    <assemblies>

      <add assembly="System.Web.Routing, Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>      <add assembly="System.Web.DynamicData, Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>      <add assembly="System.ComponentModel.DataAnnotations,            Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </assemblies>
  </compilation>

  3. Configurez le préfixe de balise asp pour référencer l'espace de noms System.Web.DynamicData, comme le montre l'exemple suivant :

    <system.web>
  <pages>
    <controls>

      <add tagPrefix="asp" namespace="System.Web.DynamicData"          assembly="System.Web.DynamicData, Version=3.5.0.0,          Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </controls>
  </pages>
</system.web>

  4. Enregistrez et fermez le fichier Web.config.

Définition du modèle de données

Cette section indique comment créer le modèle de données qui joue un rôle clé dans le comportement dynamique du site Web. Dans cette procédure pas à pas, vous utiliserez un modèle de données LINQ to SQL. Toutefois, vous pourriez utiliser à la place un modèle de données ADO.NET Entity Framework. Cette section indique également comment ajouter des informations de métadonnées au modèle de données.

Pour créer le modèle de données

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, puis cliquez sur Ajoutez le dossier ASP.NET et sur App_Code.

  2. Cliquez avec le bouton droit sur le dossier App_Code, puis cliquez sur Ajouter un nouvel élément.

  3. Sous Modèles Visual Studio installés, cliquez sur Classes LINQ to SQL.

  4. Dans la zone Nom, entrez le nom AdventureWorksLT.dbml pour le modèle de base de données.

  5. Cliquez sur Ajouter.

    Le Concepteur Objet/Relationnel (Concepteur O/R) s'affiche. Pour plus d'informations, consultez Concepteur Objet/Relationnel (Concepteur O/R).

  6. Dans le Concepteur O/R, cliquez sur le lien Explorateur de serveurs.

  7. Dans l'Explorateur de serveurs, sous Connexions de données, développez le nœud AdventureWorksLT_Data.mdf, puis le nœud Tables.

  8. Faites glisser la table Customer dans la fenêtre du Concepteur O/R.

  9. Enregistrez et fermez le fichier AdventureWorksLT.dbml.

    Vous avez créé le modèle de données qui représente la base de données AdventureWorksLT.

La procédure suivante montre comment ajouter une validation personnalisée de l'entrée d'utilisateur. Elle montre également comment utiliser un contrôle Calendar pour restituer l'interface utilisateur permettant d'afficher et de modifier les champs de données DateTime.

Pour ajouter une validation personnalisée et des métadonnées au modèle 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. Pour cette procédure pas à pas, vous travaillerez avec la classe Customer. Par conséquent, créez un fichier de classe nommé Customer.cs ou Customer.vb. Ce fichier contiendra également une classe associée que vous créerez ultérieurement afin 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 Customer pour en faire une classe partielle.

  5. Si vous créez la classe dans Visual C#, supprimez le constructeur par défaut.

    L'exemple suivant montre la déclaration de classe mise à jour.

    public partial class Customer {

}

    Partial Public Class Customer

End Class

  6. Ajoutez des références aux espaces de noms System.Web.DynamicData et System.ComponentModel.DataAnnotations à l'aide du mot clé Imports dans Visual Basic ou du mot clé using dans Visual C#, comme le montre l'exemple suivant :

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

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

  7. Dans le même fichier, créez une autre classe partielle qui servira de classe de métadonnées associée. Vous pouvez lui donner n'importe quel nom. Pour cette procédure pas à pas, nommez la classe CustomerMetadata, comme le montre l'exemple suivant :

    public partial class CustomerMetadata
{

}

    Partial Public Class CustomerMetadata

End Class

  8. Appliquez l'attribut MetadataTypeAttribute à la classe partielle Customer. Pour le paramètre de l'attribut, spécifiez CustomerMetadata, qui correspond au nom de la classe de métadonnées associée que vous avez créée à l'étape précédente.

    L'exemple suivant présente la classe partielle Customer avec l'attribut appliqué.

    [MetadataType(typeof(CustomerMetadata))]
public partial class Customer {

}

    <MetadataType(GetType(CustomerMetadata))> _
Partial Public Class Customer

End Class

  9. Dans la classe de métadonnées, créez un champ public nommé ModifiedDate qui est de type Object.

    Dans la classe de métadonnées, créez un champ pour chaque champ de données dont vous souhaitez personnaliser le traitement d'affichage et d'édition. Pour le nom de champ dans la classe de métadonnées, utilisez le même nom que celui du champ de données à modifier.

  10. Appliquez l'attribut UIHintAttribute au champ ModifiedDate. Pour le paramètre, spécifiez "DateCalendar". Il s'agit du le nom d'un modèle de champ que vous créerez ultérieurement.

    Remarque :

    Object est utilisé comme marqueur dans le type de métadonnées pour représenter le champ de données. Dynamic Data déduit le type réel à partir du modèle de données.

    L'exemple suivant présente l'attribut UIHintAttribute appliqué.

    public partial class CustomerMetadata
{
    [UIHint("DateCalendar")]
    public object ModifiedDate;
}

    Partial Public Class CustomerMetadata
    <UIHint("DateCalendar")> _
    Public ModifiedDate As Object
End Class

  11. Dans la classe de métadonnées, créez des champs publics pour les propriétés FirstName et LastName.

  12. Appliquez l'attribut RegularExpressionAttribute aux champs de données FirstName et LastName. Spécifiez un modèle d'expression régulière qui autorise uniquement des caractères alphabétiques, des espaces et des traits d'union, et qui limite le nom à 40 caractères. Incluez un message d'erreur personnalisé à afficher en cas d'échec de la validation.

    L'exemple suivant présente les champs FirstName et LastName avec l'attribut appliqué.

    [RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",     ErrorMessage="Entered characters are not allowed.")]
public object FirstName;

[RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",    ErrorMessage = "Entered characters are not allowed.")]
public object LastName; 

    <RegularExpression("^[a-zA-Z''-'\s]{1,40}$", _    ErrorMessage:="Entered characters are not allowed.")> _
Public FirstName As Object

<RegularExpression("^[a-zA-Z''-'\s]{1,40}$", _    ErrorMessage:="Entered characters are not allowed.")> _
Public LastName As Object

    Notez que les champs de données correspondent aux colonnes de table Customer qui sont définies dans le modèle de données. Vous les utilisez uniquement pour ajouter des informations de métadonnées que Dynamic Data utilise lorsqu'il restitue ces champs de données.

    Le modèle d'expression régulière autorise jusqu'à 40 caractères majuscules et minuscules, ainsi que plusieurs caractères spéciaux qui sont communs aux noms en anglais.

  13. Enregistrez et fermez le fichier de classe.

Vous pouvez maintenant enregistrer le contexte de modèle de données afin que Dynamic Data puisse accéder aux informations de métadonnées.

Pour enregistrer le contexte de modèle de données

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

  2. Sous Modèles Visual Studio installés, sélectionnez Classe d'application globale, puis cliquez sur Ajouter.

    Cette opération ajoute un fichier Global.asax au site.

  3. Ajoutez une directive @ Import avec un attribut Namespace qui référence l'espace de noms System.Web.DynamicData, comme le montre l'exemple suivant :

    <%@ Import Namespace="System.Web.DynamicData" %>

  4. Dans la méthode Application_Start, enregistrez le contexte de données avec l'option de génération de modèles automatique désactivée, comme le montre l'exemple suivant.

    Cet enregistrement indique à Dynamic Data le modèle de données à utiliser. Il lui indique également de ne pas activer les tables afin qu'elles soient visibles pour la génération de modèles automatique. Cette dernière étape n'est pas obligatoire, mais elle permet ici de souligner le fait que le site Web n'utilise pas de génération de modèles automatique.

    MetaModel model = new MetaModel();
model.RegisterContext(typeof(AdventureWorksLTDataContext), 
new ContextConfiguration() {ScaffoldAllTables = false });

    Dim model As MetaModel = New MetaModel()
model.RegisterContext(GetType( _
    AdventureWorksLTDataContext), _
    New ContextConfiguration() With { _
    .ScaffoldAllTables = False})

  5. Enregistrez et fermez le fichier Global.asax.

Création de modèles de champs

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. Dynamic Data requiert des modèles de champs pour chaque type de champ de données représenté dans le contexte de données. (Si aucun modèle de champ n'existe pour un type de champ de données spécifique et qu'aucun modèle de champ n'est trouvé à l'aide de règles de secours, Dynamic Data lève une exception.)

Si vous créez un site Web Dynamic Data, il inclut un jeu de modèles de champs qui représentent des types de données de base de données classiques. Ceux-ci sont créés avec des modèles de page, une page maître et des fichiers de feuille de style en cascade. Cependant, cette procédure pas à pas vous montre comment ajouter des fonctionnalités Dynamic Data à un site existant. Par conséquent, vous n'êtes pas supposé avoir accès aux modèles de champ par défaut.

Les modèles de champs que vous créez dans cette procédure pas à pas ressemblent à ceux par défaut dans un site Web Dynamic Data. Pour plus d'informations, consultez Vue d'ensemble des modèles de champs Dynamic Data ASP.NET. Vous pouvez accéder aux modèles de champs par défaut qui sont générés lorsque vous créez un site Web qui utilise la génération de modèles automatique. 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.

Cette section indique comment créer les modèles suivants :

  • Modèles de champs qui restituent l'interface utilisateur permettant d'afficher et de modifier les champs de données de type String.

  • Modèles de champs qui restituent l'interface utilisateur permettant d'afficher et de modifier les champs de données de type DateTime.

Création de modèles de champ pour les données de type String

Cette section indique comment créer des modèles de champs pour restituer l'interface utilisateur permettant d'afficher et de modifier les champs de données de type String.

Pour créer des modèles de champs afin d'afficher et de modifier les champs de données String

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, puis cliquez sur Nouveau dossier.

  2. Renommez le nouveau dossier DynamicData.

    Remarque :

    Vous devez utiliser les noms de dossier décrits dans cette procédure, car ils ont une signification spéciale dans Dynamic Data.

  3. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier DynamicData, puis cliquez sur Nouveau dossier.

  4. Renommez le nouveau dossier FieldTemplates.

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

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

  7. Dans la zone Nom, entrez Text.ascx. Sélectionnez Placer le code dans un fichier distinct.

  8. Cliquez sur Ajouter.

    Deux modèles de champs nommés Text.ascx et Text_Edit.ascx sont créés. Le premier contrôle restitue l'interface utilisateur permettant d'afficher les champs de données String. Le deuxième contrôle restitue l'interface utilisateur permettant de modifier les champs de données String.

  9. Ouvrez le fichier Text_Edit.ascx et dans la directive @ Control, affectez true à l'attribut AutoEventWireup.

  10. Enregistrez et fermez les fichiers de contrôle utilisateur.

    Vous avez maintenant créé les modèles de champs qui restituent l'interface utilisateur permettant d'afficher et de modifier les champs de données String.

Création de modèles de champs DateTime

Cette section indique comment créer des modèles de champs pour restituer l'interface utilisateur permettant d'afficher et de modifier les champs de données DateTime. Le modèle de champ d'affichage utilise une représentation de date courte qui exclut l'heure. Le modèle de champ d'édition utilise le contrôle Calendar pour permettre à l'utilisateur d'entrer une nouvelle valeur.

Pour créer un modèle de champ afin d'afficher et de modifier les champs de données DateTime

  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 DateCalendar.ascx. Sélectionnez Placer le code dans un fichier distinct.

  4. Cliquez sur Ajouter.

    Deux modèles de champs nommés DateCalendar.ascx et DateCalendar_Edit.ascx sont créés. Le premier contrôle restitue l'interface utilisateur permettant d'afficher les champs de données DateTime. Le deuxième contrôle restitue l'interface utilisateur permettant de modifier les champs de données DateTime.

  5. Ouvrez le fichier DateCalendar.ascx.

  6. Dans le contrôle Literal, supprimez l'assignation FieldValueString à l'attribut Text, comme le montre l'exemple suivant.

    <asp:Literal ID="Literal1" />

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

  8. Ouvrez le fichier code-behind du modèle de champ DateCalendar.ascx.vb ou DateCalendar.ascx.cs.

  9. Substituez la méthode OnDataBinding du contrôle utilisateur pour mettre en forme la valeur DateTime à des fins d'affichage en excluant l'heure, comme le montre l'exemple suivant. La valeur du champ est disponible dans FieldValue.

    protected override void OnDataBinding(EventArgs e)
{
  base.OnDataBinding(e);
  string shortDate = string.Empty;
  if (FieldValue != null)
  {
    DateTime dt = (DateTime)FieldValue;
    shortDate = dt.ToShortDateString();
  }
  Literal1.Text = shortDate;
}

    Protected Overloads Overrides Sub OnDataBinding( _
    ByVal e As EventArgs)
    MyBase.OnDataBinding(e)
    Dim shortDate As String = String.Empty
    If FieldValue IsNot Nothing Then
      Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
      shortDate = dt.ToShortDateString()
    End If
    Literal1.Text = shortDate
End Sub

  10. Enregistrez et fermez le fichier code-behind.

  11. Ouvrez le fichier DateCalendar_Edit.ascx.

  12. Dans la directive @ Control, affectez true à l'attribut AutoEventWireup.

  13. Dans le contrôle TextBox, remplacez l'expression FieldValueString dans l'attribut Text par la méthode GetDateString() personnalisée, comme le montre l'exemple suivant.

    <asp:TextBox ID="TextBox1"  
  Text='<%# GetDateString() %>' >
</asp:TextBox>

  14. Ajoutez le balisage suivant au fichier pour définir le contrôle Calendar qui restitue l'interface utilisateur afin d'activer une autre méthode de modification des dates.

    <asp:Calendar ID="Calendar1"  
  VisibleDate=
    '<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
  SelectedDate=
    '<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
  OnSelectionChanged="Calendar1_SelectionChanged" />

    <asp:Calendar ID="Calendar1"  
  VisibleDate=
  '<%# If(FieldValue,DateTime.Now)%>'
  SelectedDate=
  '<%# If(FieldValue,DateTime.Now) %>'
  OnSelectionChanged="Calendar1_SelectionChanged" />

  15. Enregistrez et fermez le fichier du modèle de champ.

  16. Ouvrez le fichier code-behind DateCalendar_Edit.ascx.vb ou DateCalendar_Edit.ascx.cs.

  17. Ajoutez une méthode GetDateString. Dans la méthode, traitez l'entrée de l'utilisateur à l'aide du contrôle TextBox. La méthode met en forme la date en utilisant un format de date courte qui exclut l'heure.

    L'exemple suivant montre comment effectuer cette opération.

    protected string GetDateString()
{
  if (FieldValue != null)
  {
    DateTime dt = (DateTime)FieldValue;
    return dt.ToShortDateString();
  }
  else
    return string.Empty;
}

    Protected Function GetDateString() As String
  If FieldValue <> Nothing Then
    Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
      Return dt.ToShortDateString()
  Else
    Return String.Empty
  End If
End Function

  18. Ajoutez un gestionnaire pour l'événement SelectionChanged du contrôle Calendar.

  19. Dans le gestionnaire, affectez à la propriété Text du contrôle TextBox une version mise en forme de la date sélectionnée à partir du calendrier. Cette opération affiche la sélection actuelle de l'utilisateur dans la zone de texte.

    L'exemple suivant présente le gestionnaire.

    protected void Calendar1_SelectionChanged(
  object sender, EventArgs e)
{
  // Display value using the short date format.
  TextBox1.Text = 
  Calendar1.SelectedDate.ToString("d");
}

    Protected Sub Calendar1_SelectionChanged( _
    ByVal sender As Object, ByVal e As EventArgs)
    ' Display value using the short date format.
    TextBox1.Text = Calendar1.SelectedDate.ToString("d")
End Sub

  20. Enregistrez et fermez les fichiers du modèle de champ.

    Vous avez maintenant créé les modèles de champs qui restituent l'interface utilisateur permettant d'afficher et de modifier les types de champs de données DateTime. Les modèles de champs indiquent à Dynamic Data d'appliquer la mise en forme et la validation appropriées. Si la validation échoue, les modèles de champs génèrent également les messages d'erreur appropriés.

Création d'une page personnalisée afin d'afficher la table Customer

Cette section indique comment créer une page personnalisée qui affiche la table Customer en utilisant un contrôle GridView avec comportement dynamique.

Le comportement de dynamique du contrôle est établi en effectuant les opérations suivantes :

La table de base de données contient les types de champ de données String et DateTime. Par conséquent, si vous utilisez le contrôle GridView avec comportement dynamique pour afficher les données de la table, Dynamic Data utilisera les modèles de champs personnalisés que vous avez créés.

Pour créer une page personnalisée afin d'afficher la table Customers

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, puis sélectionnez Ajouter un nouvel élément.

  2. Sous Modèles Visual Studio installés, sélectionnez Formulaire Web.

    Dans la zone Nom, entrez Customers.aspx. Sélectionnez Placer le code dans un fichier distinct.

  3. Dans la directive @ Page, affectez true à l'attribut AutoEventWireup.

  4. En mode Source, ajoutez un contrôle DynamicDataManager au corps de la page, comme le montre l'exemple suivant :

    <body>

    <asp:DynamicDataManager ID="DynamicDataManager1"      />

</body>

    Le contrôle DynamicDataManager indique à Dynamic Data de gérer les contrôles de données dans la page comme des contrôles dynamiques.

  5. Sous l'onglet Données de la Boîte à outils, ajoutez un contrôle LinqDataSource à la page.

  6. Affectez true à la propriété EnableUpdate du contrôle LinqDataSource.

    Cela active les opérations de mise à jour du contrôle de données.

  7. Affectez la table à utiliser (Customers) à la propriété TableName du contrôle LinqDataSource.

  8. Affectez la classe du contexte de données (AdventureWorksLTDataContext) à la propriété ContextTypeName, comme le montre l'exemple suivant :

    <asp:LinqDataSource ID="LinqDataSource1"  
  TableName="Customers"  ContextTypeName="AdventureWorksLTDataContext"  EnableUpdate="true">
</asp:LinqDataSource>

  9. Sous l'onglet Données de la Boîte à outils, ajoutez un contrôle GridView à la page.

    Ce contrôle sera utilisé pour afficher et modifier les champs de données.

  10. Affectez l'ID du contrôle LinqDataSource à la propriété DataSourceID du contrôle GridView, comme le montre l'exemple suivant :

    <form ID="Form1"  >

    <asp:GridView ID="GridView1"   
      DataSourceID="LinqDataSource1" >
    </asp:GridView>
</form>

  11. Affectez false à la propriété AutoGenerateColumns du contrôle GridView, et affectez true à la propriété AutoGenerateEditButton, comme le montre l'exemple suivant :

    <asp:GridView ID="GridView1"   
  AutoGenerateEditButton="true"  AutoGenerateColumns="false" >
</asp:GridView>

    Cela active l'opération de modification et désactive la génération automatique des colonnes qui sont basées sur la table de base de données. Utilisez à la place un DynamicField contrôle pour remplir le contrôle GridView.

  12. Affectez true aux propriétés AllowPaging et AllowSorting du contrôle GridView, comme le montre l'exemple suivant :

    <asp:GridView ID="GridView1"   

  AllowPaging="true"  AllowSorting="true" >
</asp:GridView>

  13. Ajoutez trois contrôles DynamicField à la propriété Columns et affectez "FirstName", "LastName" et "ModifiedDate" à leurs propriétés DataField().

    Les contrôles DynamicField utilisent Dynamic Data ASP.NET pour lire des données à partir du modèle de données et pour les mettre en forme en utilisant le modèle de champ approprié. Notez qu'il n'est pas nécessaire d'inclure d'informations dans les contrôles DynamicField concernant la lecture ou la mise en forme des données. Dynamic Data gère automatiquement ces tâches.

    L'exemple suivant présente le balisage pour le contrôle GridView après avoir ajouté les contrôles DynamicField.

    <asp:GridView ID="GridView1"
 >

  <Columns>    <asp:DynamicField DataField="FirstName" />    <asp:DynamicField DataField="LastName" />    <asp:DynamicField DataField="ModifiedDate" />  </Columns>
</asp:GridView>
    Remarque :

    Le contrôle DynamicField n'apparaît pas dans la Boîte à outils. Par conséquent, vous devez l'ajouter en tant que balisage en mode Source.

  14. Enregistrez et fermez le fichier Customers.aspx.

    Vous avez maintenant créé la page personnalisée permettant d'accéder à la table Customers.

  15. Ouvrez le fichier code-behind Customers.aspx.cs ou Customers.aspx.vb.

  16. Ajoutez une référence à l'espace de noms System.Web.DynamicData en utilisant le mot clé Imports dans Visual Basic ou le mot clé using dans Visual C#, comme le montre l'exemple suivant :

    using System.Web.DynamicData;

    Imports System.Web.DynamicData

  17. Créez une méthode Page_Init, comme le montre l'exemple suivant :

    protected void Page_Init(object sender, 
EventArgs e)
{    }

    Protected Sub Page_Init(ByVal sender As Object, _
ByVal e As EventArgs)

End Sub

  18. Dans la méthode Page_Init, enregistrez le contrôle GridView avec DynamicDataManager pour activer le comportement dynamique.

    L'exemple suivant montre comment effectuer cette opération.

    protected void Page_Init(object sender, 
EventArgs e)
{
    DynamicDataManager1.RegisterControl(GridView1);
}

    Protected Sub Page_Init(ByVal sender As Object, _
    ByVal e As EventArgs)
    DynamicDataManager1.RegisterControl(GridView1)
End Sub

  19. Fermez le fichier code-behind.

Test de Dynamic Data

Cette section indique comment s'assurer que les fonctionnalités de Dynamic Data ont été intégrées dans le site Web. Vous pouvez interagir avec la base de données via le modèle de données et vérifier que l'intégration fonctionne. Vous constaterez que lorsque vous modifiez des données, si vous fournissez des valeurs non valides, des messages d'erreur sont générés par Dynamic Data en fonction des informations qu'il déduit à partir de la base de données.

Pour tester l'intégration des fonctionnalités Dynamic Data

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur la page Customers.aspx, puis sélectionnez Afficher dans le navigateur.

    Le navigateur affiche une page qui contient la table Customers avec les colonnes sélectionnées.

  2. Sur une ligne, cliquez sur Modifier et effacez le prénom.

  3. Sur la même ligne, cliquez sur Mettre à jour.

    Dynamic Data affiche un message d'erreur vous avertissant qu'une chaîne vide n'est pas autorisée pour le champ de données FirstName.

  4. Sur la même ligne, cliquez sur Annuler.

  5. Sur une ligne, cliquez sur Modifier, puis modifiez le nom.

  6. Sur la même ligne, cliquez sur Mettre à jour.

    Dynamic Data met à jour la base de données. Puisque vous avez entré une valeur valide pour le nom, les données passent le contrôle de validation qui fait partie du modèle de champ précédemment créé.

  7. Sur une ligne, cliquez sur Modifier, puis entrez des caractères non alphabétiques pour le prénom ou le nom.

  8. Sur la même ligne, cliquez sur Mettre à jour.

    Dynamic Data affiche le message d'erreur personnalisé que vous avez spécifié avec l'expression régulière, lequel vous avertit que vous avez entré des caractères non autorisés.

  9. Sur la même ligne, cliquez sur Annuler.

  10. Sur une ligne, cliquez sur Modifier, puis effacez la date.

  11. Sur la même ligne, cliquez sur Mettre à jour.

    Dynamic Data affiche un message d'erreur vous avertissant qu'une chaîne vide n'est pas autorisée pour le champ de données ModifiedDate.

  12. Sur la même ligne, cliquez sur Annuler.

  13. Sur une ligne, cliquez sur Modifier, puis changez la date à l'aide du contrôle Calendar.

  14. Sur la même ligne, cliquez sur Mettre à jour.

    Dynamic Data met à jour la base de données. Puisque vous avez entré une valeur autorisée pour la date, les données passent le contrôle de validation qui fait partie du modèle de champ précédemment créé.

Étapes suivantes

Cette procédure pas à pas a expliqué les principes de base de Dynamic Data ASP.NET et comment ajouter des fonctionnalités Dynamic Data à un site Web ASP.NET existant. Lorsque vous intégrez des fonctionnalités Dynamic Data dans un site Web ASP.NET existant, vous pouvez effectuer les opérations suivantes :

  • Interagir avec la base de données sous-jacente. Dynamic Data incorpore des fonctionnalités clés pour une application pilotée par les données telles que les opérations de création, lecture, mise à jour et suppression.

  • Afficher et modifier des champs de données, car Dynamic Data sélectionne le modèle de champ approprié en fonction des informations qui sont déduites à partir de la base de données.

Vous pouvez essayer des fonctionnalités supplémentaires. Les suggestions supplémentaires d'exploration incluent notamment :

Pour des informations générales, vous pouvez :

Voir aussi

Concepts

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

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

Vue d'ensemble des modèles de pages et de la génération de modèles automatique Dynamic Data ASP.NET

Vue d'ensemble de Dynamic Data ASP.NET

Historique des modifications

Date

Historique

Raison

Juillet 2008

Ajout d'une rubrique.

Modifications de fonctionnalités dans le SP1.