Procédure pas à pas : affichage des données mises en forme dans les pages Web avec le contrôle serveur Web FormView

Mise à jour : novembre 2007

ASP.NET fournit différents contrôles qui vous permettent d'afficher et de modifier des enregistrements de données. Dans cette procédure pas à pas, vous utiliserez le contrôle FormView qui fonctionne avec un seul enregistrement de données à la fois. La fonctionnalité principale du contrôle FormView est qu'elle vous permet de créer vous-même la disposition des enregistrements en définissant des modèles. En utilisant des modèles, vous pouvez entièrement contrôler la disposition et l'apparence des données dans le contrôle. Le contrôle FormView prend également en charge les mises à jour telles que la modification, l'insertion et la suppression d'enregistrements de données. Si la source de données fournit plusieurs enregistrements au contrôle FormView, le contrôle vous permet de parcourir les enregistrements individuellement.

Remarque :
Vous pouvez également modifier des enregistrements de données individuels avec le contrôle DetailsView qui fournit une disposition prédéfinie des données. Pour plus d'informations, consultez Vue d'ensemble du contrôle serveur Web DetailsView.

Cette procédure pas à pas illustre les tâches suivantes :

• création d'une page pour afficher des informations maître/détail ;

• utilisation d'un contrôle FormView pour créer une disposition libre pour un enregistrement de données ;

• configuration du contrôle FormView pour effectuer des modifications.

Composants requis

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

• Microsoft Visual Web Developer.

• Accéder à la base de données Northwind SQL Server. Pour plus d'informations sur le téléchargement et l'installation de l'exemple de base de données Northwind SQL Server, consultez Installation d'exemples de bases de données sur le site Web Microsoft SQL Server.

  Remarque :
  Si vous avez besoin d'informations sur la façon de se connecter à un ordinateur qui exécute SQL Server, contactez l'administrateur du serveur.

• Microsoft Data Access Components (MDAC) version 2.7 ou ultérieure.

  Si vous utilisez Microsoft Windows XP ou Windows Server 2003, MDAC 2.7 est déjà installé. Toutefois, si vous utilisez Microsoft Windows 2000, vous devrez peut-être mettre à niveau les composants MDAC déjà installés sur votre ordinateur. Pour plus d'informations, consultez « Microsoft Data Access Components (MDAC) Installation » dans MSDN Library.

Création du site Web

Créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

1. Ouvrez Visual Web Developer.

2. Dans le menu Fichier, cliquez sur Nouveau, puis sur Site Web. Si vous utilisez Visual Web Developer Express, dans le menu Fichier, cliquez sur NouveauSite Web.

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

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

4. Dans la zone Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

   Par exemple, tapez le nom du dossier C:\SitesWeb\FormulaireAffichageDonnées.

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

6. Cliquez sur OK.

   Visual Web Developer crée le dossier et une page nommée Default.aspx.

Utilisation d'une liste déroulante comme maître

Dans cette partie de la procédure pas à pas, vous ajouterez une liste déroulante à une page et la remplirez avec une liste de noms de produits. Lorsque les utilisateurs sélectionnent un produit, la page affichera les détails de ce produit dans un contrôle FormView.

Pour créer et remplir une liste déroulante

1. Basculez vers la page Default.aspx ou ouvrez-la. Si vous utilisez un site Web que vous aviez déjà créé, ajoutez ou ouvrez une page que vous pouvez utiliser dans cette procédure pas à pas.

2. Basculez en mode Design.

3. Tapez Afficher les informations sur les produits dans la page.

4. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle DropDownList sur la page.

5. Si le menu Tâches DropDownList n'apparaît pas, cliquez avec le bouton droit sur le contrôle DropDownList, puis cliquez sur Afficher la balise active.

6. Dans le menu TâchesDropDownList, activez la case à cocher Activer AutoPostBack.

7. Cliquez sur Choisir la source de données pour ouvrir l'Assistant Configuration de source de données.

8. Dans la liste Sélectionner une source de données, cliquez sur <Nouvelle source de données>.

9. Cliquez sur Base de données.

   Cela spécifie que vous souhaitez obtenir des données à partir d'une base de données qui prend en charge des instructions SQL.

   Dans la zone Spécifiez un ID pour la source de données, le nom d'un contrôle de source de données par défaut est affiché. Vous pouvez laisser ce nom.

10. Cliquez sur OK.

    L'Assistant affiche une page dans laquelle vous pouvez sélectionner une connexion.

11. Cliquez sur le bouton Nouvelle connexion.

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

    • Si la liste Source de données n'affiche pas Microsoft SQL Server (SqlClient), cliquez sur Modifier puis, dans la boîte de dialogue Modifier la source de données, sélectionnez Microsoft SQL Server.

    • Si la page Choisir la source de données s'affiche, dans la liste Source de données, sélectionnez le type de source de données que vous utiliserez. Pour cette procédure pas à pas, le type de source de données est Microsoft SQL Server. Dans la liste Fournisseur de données, cliquez sur Fournisseur de données .NET Framework pour SQL Server, puis sur Continuer.

12. Dans la boîte de dialogue Ajouter une connexion, procédez comme suit :

    1. Dans la zone Nom du serveur, entrez le nom de l'ordinateur qui exécute SQL Server.

    2. Pour obtenir les informations d'identification de connexion, sélectionnez l'option qui est appropriée pour accéder à la base de données SQL Server en cours d'exécution (sécurité intégrée ou ID et mot de passe spécifiques) et, si besoin est, entrez un nom d'utilisateur et un mot de passe. Activez la case à cocher Enregistrer mon mot de passe si vous avez entré un mot de passe.

    3. Cliquez sur le bouton Sélectionnez ou entrez un nom de base de données, puis entrez Northwind.

    4. Cliquez sur Tester la connexion et lorsque vous êtes sûr que la connexion fonctionne, cliquez sur OK.

    Vous revenez à l'Assistant et les informations de connexion sont fournies.

13. Cliquez sur Suivant.

14. Veillez à ce que la case à cocher Oui, enregistrer cette connexion en tant que soit activée, puis cliquez sur Suivant. (Vous pouvez laisser le nom de chaîne de connexion par défaut.)

    L'Assistant affiche une page où vous pouvez spécifier les données à récupérer à partir de la base de données.

15. Cliquez sur Spécifiez les colonnes d'une table ou d'une vue.

16. Dans la liste Nom, cliquez sur Produits.

17. Sous Colonnes, sélectionnez ProductID et ProductName.

18. Cliquez sur Suivant.

19. Cliquez sur Tester la requête pour vous assurer de récupérer les données que vous souhaitez.

20. Cliquez sur Terminer.

    Vous revenez à l'Assistant.

21. Dans la liste Sélectionnez un champ de données à afficher dans DropDownList, cliquez sur ProductName.

22. Dans la liste Sélectionnez un champ de données pour la valeur de DropDownList, sélectionnez ProductID.

    Cela spécifie que, lorsqu'un élément est sélectionné, le champ ProductID sera retourné comme valeur de l'élément.

23. Cliquez sur OK.

Avant de continuer, testez la liste déroulante.

Pour tester la liste déroulante

1. Appuyez sur CTRL+F5 pour exécuter la page.

2. Lorsque la page est affichée, examinez la liste déroulante.

3. Sélectionnez un nom de produit pour vous assurer que la liste effectue une publication (postback).

Ajout d'un contrôle FormView

Vous allez à présent ajouter un contrôle FormView pour afficher les détails du produit. Le contrôle FormView obtient ses données d'un deuxième contrôle de source de données que vous ajoutez à la page. Le deuxième contrôle de source de données contient une requête paramétrée qui obtient l'enregistrement relatif au produit pour l'élément actuellement sélectionné dans le contrôle DropDownList.

Pour ajouter un contrôle FormView

1. À partir du groupe Données de la Boîte à outils, faites glisser un contrôle FormView sur la page.

2. Si le menu Tâches FormView n'apparaît pas, cliquez avec le bouton droit sur le contrôle FormView, puis cliquez sur Afficher la balise active.

3. Dans le menu Tâches FormView, dans la liste Choisir la source de données, cliquez sur <Nouvelle source de données>.

   La boîte de dialogue Assistant Configuration de source de données s'affiche.

4. Cliquez sur Base de données.

   Le contrôle FormView obtiendra les données de la même table que le contrôle DropDownList.

   Dans la zone Spécifiez un ID pour la source de données, le nom d'un contrôle de source de données par défaut est affiché. Vous pouvez laisser ce nom.

5. Cliquez sur OK.

   L'Assistant Configurer la source de données démarre.

6. À partir de la liste Quelle connexion de données votre application doit-elle utiliser pour établir une connexion à la base de données ?, sélectionnez la connexion que vous avez créée et stockée précédemment dans la procédure pas à pas.

7. Cliquez sur Suivant.

   L'Assistant affiche une page dans laquelle vous pouvez créer une instruction SQL.

8. Dans la liste Nom sous Spécifiez les colonnes d'une table ou d'une vue, sélectionnez Produits.

9. Dans la zone Colonnes, sélectionnez ProductID, ProductName et UnitPrice.

10. Cliquez sur le bouton WHERE.

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

11. Dans la liste Colonnes, sélectionnez ProductID.

12. Dans la liste Opérateur, sélectionnez =.

13. Dans la liste Source, sélectionnez Contrôle.

14. Sous Propriétés du paramètre, dans la liste ID du contrôle, sélectionnez DropDownList1.

    Les deux dernières étapes spécifient que la requête obtiendra la valeur de recherche pour l'ID de produit du contrôle DropDownList que vous avez ajouté précédemment.

15. Cliquez sur Ajouter.

16. Cliquez sur OK pour fermer la boîte de dialogue Ajouter une clause WHERE.

17. Cliquez sur Avancé.

    La boîte de dialogue Options de génération SQL avancées s'affiche.

18. Activez la case à cocher Générer des instructions INSERT, UPDATE et DELETE.

    Cette option contraint l'Assistant à créer des instructions Update de SQL selon l'instruction Select que vous avez configurée. Ultérieurement dans la procédure pas à pas, vous utiliserez le contrôle FormView pour modifier et insérer des enregistrements ce qui nécessite des instructions UPDATE dans le contrôle de source de données.

19. Cliquez sur OK.

20. Cliquez sur Suivant.

21. Dans la page d'aperçu, cliquez sur Tester la requête.

    L'Assistant affiche une boîte de dialogue qui vous invite à entrer une valeur à utiliser dans la clause WHERE.

22. Dans la zone Valeur, tapez 4, puis cliquez sur OK.

    Les informations sur le produit s'affichent.

23. Cliquez sur Terminer.

Personnalisation de la disposition dans le contrôle FormView

L'utilisation du contrôle FormView permet de définir la disposition de l'enregistrement qu'il affiche. Dans cette section de la procédure pas à pas, vous personnaliserez la disposition des enregistrements en modifiant un modèle. Pour créer la disposition, vous utiliserez un tableau HTML.

Pour mettre en forme la disposition

1. Cliquez sur le contrôle FormView pour le sélectionner, puis faites glisser la poignée de redimensionnement à droite du contrôle pour que celui-ci atteigne la largeur de la page actuelle.

2. Faites glisser la poignée de redimensionnement en bas du contrôle pour que la hauteur du contrôle atteigne environ 400 pixels. (La hauteur exacte n'est pas importante.)

3. Cliquez avec le bouton droit sur le contrôle, cliquez sur Modifier un modèle, puis cliquez sur ItemTemplate.

   Le contrôle est affiché de nouveau en mode de modification de modèle d'élément. Le modèle d'élément contient le texte statique et les contrôles utilisés pour afficher l'enregistrement de données lorsque la page s'exécute. Par défaut, Visual Web Developer remplit le modèle d'élément avec un contrôle Label lié aux données pour chaque colonne de données dans la source de données. De plus, Visual Web Developer génère le texte statique pour que chaque étiquette serve de légende.

   Le modèle est également généré à l'aide de trois contrôles LinkButton avec le texte Modifier, Supprimer et Nouveau.

4. Placez le point d'insertion en haut du modèle d'élément, appuyez sur ENTRÉE plusieurs fois pour créer un espace, puis en haut du modèle, tapez Détails sur le produit en tant que titre.

5. Placez le curseur au-dessous des contrôles et du texte statique, puis dans le menu Tableau, cliquez sur Insérer un tableau.

   Vous créez un tableau HTML en tant que conteneur du texte et des contrôles.

6. Dans la boîte de dialogue Insérer un tableau, affectez au champ Lignes la valeur 4 et au champ Colonnes la valeur 2.

7. Cliquez sur OK pour fermer la boîte de dialogue Insérer un tableau.

8. Sélectionnez toutes les cellules dans la table, puis dans le menu Tableau, sélectionnez Mise en forme de cellule.

   La boîte de dialogue Propriétés des cellules s'affiche.

9. Définissez Largeur à 35 pixels (px) et Hauteur à 30 pixels (px).

10. Cliquez sur OK pour fermer la boîte de dialogue Propriétés de la cellule.

11. Faites glisser le contrôle ProductIdLabel dans la cellule supérieure droite.

12. Faites glisser le contrôle ProductNameLabel dans la deuxième cellule de droite.

13. Faites glisser le contrôle UnitPriceLabel dans la troisième cellule de droite.

14. Dans la colonne gauche, tapez le texte statique qui servira de légendes pour les contrôles Label. Par exemple, dans la cellule en regard du contrôle ProductIdLabel, tapez ID. Vous pouvez taper le texte de légende que vous souhaitez.

15. Cliquez avec le bouton droit sur la colonne gauche, cliquez sur Sélectionner, puis cliquez sur Colonne.

16. Dans la fenêtre Propriétés, affectez droite à aligner pour que le texte de légende soit aligné à droite.

17. Sélectionnez la colonne droite et faites glisser sa bordure droite afin que le tableau soit assez large pour afficher des noms de produits longs.

18. Sélectionnez le texte généré par Visual Web Developer (par exemple, le texte ProductID) et supprimez-le.

19. Cliquez avec le bouton droit sur la barre de titre du contrôle FormView et cliquez sur Terminer la modification du modèle.

    L'éditeur de modèle se ferme et le contrôle s'affiche avec la disposition que vous avez créée.

Test du contrôle FormView

Vous pouvez à présent tester votre disposition.

Pour tester le contrôle FormView

1. Appuyez sur CTRL+F5 pour exécuter la page.

2. Dans le contrôle DropDownList, cliquez sur un nom de produit.

   Le contrôle FormView affiche les détails concernant ce produit.

3. Sélectionnez un produit différent et confirmez que le contrôle FormView affiche bien les détails sur cet autre produit.

4. Fermez le navigateur.

Ajout de fonctions de modification et d'insertion au contrôle FormView

Le contrôle FormView peut afficher des enregistrements individuels et prend également en charge la modification, la suppression et l'insertion.

Dans cette partie de la procédure pas à pas, vous ajouterez la possibilité de modifier l'enregistrement actuellement affiché. Pour modifier l'enregistrement, vous définissez un modèle différent qui contient des zones de texte (et éventuellement d'autres contrôles).

Pour ajouter la fonction de modification au contrôle FormView

1. Cliquez avec le bouton droit sur le contrôle FormView, cliquez sur Modifier un modèle et cliquez sur EditItemTemplate.

   L'éditeur de modèle apparaît, en affichant la propriété EditItemTemplate qui définit la disposition des enregistrements lorsque le contrôle est en mode édition. Visual Web Developer remplit le modèle de modification avec un contrôle TextBox pour chaque colonne de données qui n'est pas une clé et ajoute le texte statique pour les légendes. Ce fonctionnement est similaire à la façon dont le modèle d'élément a été généré, mais dans le modèle de modification, Visual Web Developer génère des zones de texte.

   Comme avant, le modèle est généré avec des contrôles LinkButtonMettre à jour et Annuler utilisés pour enregistrer et abandonner les modifications lors de l'édition.

2. Ajoutez éventuellement un tableau de disposition et disposez les contrôles comme vous l'avez fait lorsque vous utilisiez le modèle d'élément précédemment dans la procédure pas à pas.

3. Cliquez avec le bouton droit sur le contrôle FormView, cliquez sur Modifier un modèle et cliquez sur InsertItemTemplate.

   Comme avec la propriété EditItemTemplate, Visual Web Developer crée automatiquement une disposition de modèle d'étiquettes et de contrôles TextBox. Les contrôles seront affichés lorsque les utilisateurs souhaitent insérer un nouvel enregistrement dans la table Products. Le modèle est également généré avec les contrôles LinkButtonInsérer et Annuler.

4. Ajoutez éventuellement un tableau de disposition et disposez les contrôles comme vous l'avez fait lorsque vous utilisiez le modèle de modification d'élément.

5. Cliquez avec le bouton droit sur le contrôle FormView et cliquez sur Terminer la modification du modèle.

   Note de sécurité :

   Les entrées d'utilisateur dans une page Web ASP.NET peuvent inclure un script client nuisible. Par défaut, les pages Web ASP.NET vérifient que les entrées d'utilisateur n'incluent pas de script ou d'éléments HTML. Tant que cette vérification est activée, vous n'avez pas besoin de vérifier explicitement la présence d'un script ou d'éléments HTML dans les entrées d'utilisateur. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.

Test de la modification et de l'insertion

Vous pouvez à présent tester la modification et l'insertion.

Pour tester les fonctions de modification du contrôle FormView

1. Appuyez sur CTRL+F5 pour exécuter la page.

2. Sélectionnez un produit dans le contrôle DropDownList.

   Les détails sur les produits s'affichent dans le contrôle FormView.

3. Cliquez sur Modifier.

   Le contrôle FormView bascule en mode édition.

4. Apportez une modification au nom du produit ou au prix unitaire.

5. Cliquez sur Mettre à jour.

   L'enregistrement est enregistré et le contrôle FormView bascule en mode d'affichage. La modification se répercute dans l'affichage.

6. Sélectionnez un produit différent.

7. Cliquez sur Modifier.

8. Apportez une modification au nom du produit.

9. Cliquez sur Annuler.

   Confirmez que la modification n'a pas été enregistrée.

Pour tester les fonctions d'insertion du contrôle FormView

1. Cliquez sur Nouveau dans le contrôle FormView.

   Le contrôle FormView bascule en mode insertion, affichant deux zones de texte vides.

2. Entrez un nouveau nom de produit et un prix, puis cliquez sur Insérer.

   L'enregistrement est enregistré dans la base de données et le contrôle FormView bascule en mode affichage (ItemTemplate).

   Remarque :
   Le nouvel enregistrement n'est pas affiché dans la liste déroulante. Vous ajouterez cette fonction dans la section suivante.

Affichage des noms de produits mis à jour dans la liste déroulante

Votre page vous permet désormais d'afficher, de modifier ou de supprimer des enregistrements dans la table Products de la base de données. Toutefois, la liste déroulante n'est pas encore synchronisée avec les modifications que vous apportez dans le contrôle FormView. Par exemple, si vous insérez un nouvel enregistrement Products, la liste déroulante n'affiche pas le nouvel enregistrement sauf si vous fermez la page et l'ouvrez de nouveau. De plus, la page est initialement affichée avec le premier enregistrement de la table Products, ce qui peut ne pas vous convenir.

Vous pouvez ajouter du code pour résoudre ces problèmes mineurs. Dans cette section de la procédure, vous allez procéder comme suit :

• Mettez à jour la liste déroulante chaque fois que les utilisateurs modifient ou insèrent un enregistrement.

• Ajoutez le texte « (Sélectionner) » à la liste déroulante lorsque la page apparaît pour la première fois, puis supprimez-le lorsque l'utilisateur a effectué la première sélection.

Pour mettre à jour la liste déroulante lorsque des enregistrements sont modifiés ou insérés

1. En mode Design de la page, sélectionnez le contrôle FormView.

2. Dans la fenêtre Propriétés, cliquez sur le bouton Événements pour afficher la liste des événements du contrôle FormView.

3. Double-cliquez sur la zone ItemInserted.

   Visual Web Developer bascule en mode de modification de code et crée un gestionnaire pour l'événement ItemInserted.

4. Ajoutez le code en surbrillance suivant au gestionnaire d'événements.

   Protected Sub FormView1_ItemInserted(ByVal sender As Object, _
      ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) _
      Handles FormView1.ItemInserted
         DropDownList1.DataBind()
   End Sub
   

   [C#]

   protected void FormView1_ItemInserted(object sender, 
           FormViewInsertedEventArgs e)
   {
       DropDownList1.DataBind();
   }
   

   Le code s'exécute après l'insertion du nouvel enregistrement. Il lie de nouveau la liste déroulante avec la table Products, ce qui permet d'actualiser le contenu de la liste.

5. Basculez en mode Design. (Si vous utilisez une page code-behind, basculez vers la page Default.aspx puis basculez en mode Design.)

6. Dans la fenêtre Propriétés, cliquez sur le bouton Événements pour afficher la liste des événements du contrôle FormView.

7. Double-cliquez sur la zone ItemUpdated.

   Visual Web Developer bascule en mode de modification de code et crée un gestionnaire d'événements pour l'événement ItemUpdated.

8. Ajoutez le code mis en surbrillance ci-dessous.

   Protected Sub FormView1_ItemUpdated(ByVal sender As Object, _
      ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) _
      Handles FormView1.ItemUpdated
         DropDownList1.DataBind()
   End Sub
   

   [C#]

   protected void FormView1_ItemUpdated(object sender, 
       FormViewUpdatedEventArgs e)
   {
       DropDownList1.DataBind();
   }
   

   Le code s'exécute après la mise à jour de l'enregistrement. Il lie de nouveau la liste déroulante avec la table Products, ce qui permet d'actualiser le contenu de la liste.

9. Appuyez sur CTRL+F5 pour exécuter la page.

10. Modifiez le nom de produit d'un enregistrement, cliquez sur Mettre à jour, puis examinez la liste déroulante pour vous assurer que le nom mis à jour est affiché.

11. Insérez un nouvel enregistrement relatif à un produit, cliquez sur Insérer, puis examinez la liste déroulante pour vous assurer que le nouveau nom a été ajouté à la liste.

L'étape finale consiste à modifier la liste déroulante pour qu'elle affiche « (Sélectionner) » ainsi que le contrôle FormView uniquement lorsque les utilisateurs ont effectué une sélection.

Pour ajouter une entrée Sélectionner au contrôle DropDownList

1. En mode Design, double-cliquez sur une partie vierge de la page.

   Visual Web Developer crée un gestionnaire d'événements pour l'événement Load de la page.

2. Dans le gestionnaire, ajoutez le code en surbrillance suivant.

   [Visual Basic]

   Protected Sub Page_Load(ByVal sender As Object, _
           ByVal e As System.EventArgs) Handles Me.Load
       If Not IsPostBack Then        FormView1.Visible = False    End If
   End Sub
   

   [C#]

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           FormView1.Visible = false;
       }
   }
   

   Le code s'exécute lorsque la page s'exécute. Il vérifie d'abord si c'est une publication ; si ce n'est pas le cas, cela signifie que c'est la première fois que la page est exécutée. Si ce n'est pas une publication, le code masque le contrôle FormView, car vous souhaitez l'afficher uniquement lorsque l'utilisateur a explicitement sélectionné un enregistrement à afficher ou à modifier.

3. Le mode Design étant appliqué à la page, sélectionnez le contrôle DropDownList.

4. Dans la fenêtre Propriétés, cliquez sur le bouton de sélection (...) dans la zone Éléments.

   La boîte de dialogue Éditeur de collections ListItem s'affiche.

5. Cliquez sur Ajouter pour créer un élément.

6. Sous Propriétés ListItem, dans la zone Text, entrez (Sélectionner).

7. Cliquez sur OK pour fermer la boîte de dialogue Éditeur de collections ListItem.

8. Dans la fenêtre Propriétés, affectez true à AppendDataBoundItems.

   Lorsque la liste déroulante est remplie pendant la liaison de données, les informations sur les produits sont ajoutées à l'élément (Sélectionner) que vous avez défini.

9. Dans la fenêtre Propriétés, cliquez sur le bouton Événements pour afficher la liste des événements du contrôle DropDownList.

10. Double-cliquez sur la zone SelectedIndexChanged.

11. Ajoutez le code mis en surbrillance ci-dessous.

    [Visual Basic]

    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender _
        As Object, ByVal e As System.EventArgs) _
        Handles DropDownList1.SelectedIndexChanged
            If DropDownList1.Items(0).Text = "(Select)" Then            DropDownList1.Items.RemoveAt(0)        End If        FormView1.Visible = True
    End Sub
    

    [C#]

    protected void DropDownList1_SelectedIndexChanged(object sender, 
        EventArgs e)
    {
        if(DropDownList1.Items[0].Text == "(Select)")    {        DropDownList1.Items.RemoveAt(0);    }    FormView1.Visible = true;
    }
    

    Le code s'exécute lorsque les utilisateurs sélectionnent un élément dans le contrôle DropDownList. Il supprime l'élément « (Sélectionner) » que vous avez ajouté précédemment (après avoir vérifié qu'il existe), car après que les utilisateurs ont sélectionné un élément pour la première fois, vous ne devez plus les inviter à en sélectionner d'autre. Le code affiche également (ne masque plus) le contrôle FormView afin que les utilisateurs puissent consulter l'enregistrement qu'ils ont sélectionné.

12. Appuyez sur CTRL+F5 pour exécuter la page.

    La page affiche uniquement la liste déroulante, le mot (Sélectionner) étant affiché.

13. Sélectionnez un élément dans la liste.

    L'élément est affiché dans le contrôle FormView.

14. Examinez la liste déroulante et notez que le mot (Sélectionner) n'est plus dans la liste.

Étapes suivantes

Cette procédure pas à pas vous a indiqué les étapes de base pour utiliser un contrôle FormView pour afficher et modifier des enregistrements de données individuels à l'aide d'une disposition personnalisée. Le contrôle FormView vous permet d'effectuer une mise en forme plus sophistiquée que celle que vous avez réalisée dans cette procédure pas à pas. De plus, vous pouvez créer des modèles pour d'autres modes, y compris le mode de sélection et le mode d'insertion et pour les en-têtes et les pieds de page qui sont affichés avec l'enregistrement. Pour obtenir d'autres scénarios à explorer avec le FormView, consultez les éléments suivants:

Création de modèles pour le contrôle serveur Web FormView

Modification des données à l'aide d'un contrôle serveur Web FormView

Voir aussi

Concepts

Vue d'ensemble du contrôle serveur Web FormView

Référence

Vue d'ensemble du contrôle serveur Web DetailsView