Procédure pas à pas : affichage d'une liste déroulante tout en modifiant le contrôle serveur Web GridView
Mise à jour : novembre 2007
Le contrôle GridView affiche des zones de texte pour les modifications par défaut. Vous pouvez utiliser les fonctionnalités avancées intégrées ASP.NET du contrôle GridView pour ajouter une liste déroulante dans le mode édition. Pour ce faire, vous pouvez utiliser un formulaire Web sans avoir à écrire le moindre code sous-jacent. Cette procédure pas à pas décrit les tâches suivantes :
Configuration d'un contrôle GridView pour afficher des données SQL.
Affichage de données dans le contrôle GridView.
Affichage d'une liste déroulante lors de la modification dans le contrôle GridView.
Composants requis
Pour exécuter cette procédure pas à pas, vous devrez :
Microsoft Visual Web Developer (Visual Studio).
SQL Server Express Edition. Si SQL Server est installé, vous pouvez l'utiliser, mais vous devrez apporter de légères modifications à certaines des procédures.
L'exemple de base de données Northwind installée sur votre ordinateur. 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.
.gif "Remarque")
Remarque :Vous pouvez utiliser de nombreuses autres méthodes pour vous connecter à la base de données Northwind.
Création du site et de la page Web
Créez un site et une page Web en suivant ces étapes.
Pour créer un site Web de système de fichiers
Ouvrez Visual Web Developer.
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.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement, sélectionnez Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.
Par exemple, entrez le nom de dossier C:\SitesWeb\DropDownEdit.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur OK.
Visual Web Developer crée le dossier et une page nommée Default.aspx.
Création d'une connexion à une source de données SQL
Pour commencer, vous devez créer une connexion à la base de données Northwind.
Pour créer une connexion au SQL Server
Dans l'Explorateur de serveurs, cliquez avec le bouton droit sur Connexions de données, puis cliquez sur Ajouter une connexion. Si vous utilisez Visual Web Developer Express, utilisez l'Explorateur de bases de données.
La boîte de dialogue Ajouter une connexion s'affiche.
Si la liste Source de données ne contient pas l'entrée Fichier de base de données Microsoft SQL Server (SqlClient), cliquez sur Modifier puis, dans la boîte de dialogue Modifier la source de données, sélectionnez Fichier de base de données Microsoft SQL Server (SqlClient).
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.
Remarque :Si l'onglet Explorateur de serveurs n'est pas visible dans Visual Web Developer, dans le menu Affichage, cliquez sur Explorateur de serveurs. Si l'onglet Explorateur de bases de données n'est pas visible, dans le menu Affichage, cliquez sur Explorateur de bases de données.
Dans le champ Nom du fichier de base de données, entrez le chemin d'accès à l'emplacement d'installation de l'exemple de base de données Northwind ou recherchez-le.
Sélectionnez le fichier de base de données Northwnd.mdf, puis cliquez sur Ouvrir.
Activez la case à cocher Enregistrer mon mot de passe.
Cliquez sur Tester la connexion et, lorsque vous êtes sûr que la connexion fonctionne, cliquez sur OK.
Votre nouvelle connexion a été créée sous Connexions de données dans l'explorateur de serveurs.
Configuration d'un contrôle GridView pour afficher des données de base de données
Dans cette partie de la procédure pas à pas, vous remplissez dynamiquement la grille avec les données.
Pour activer le tri simple
Basculez vers le fichier Default.aspx ou ouvrez-le.
Basculez en mode Design.
Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle GridView sur la page.
Dans le menu Tâches GridView, dans la zone Choisirla source de données, cliquez sur <Nouvelle source de données>.
L'AssistantConfiguration de source de données s'affiche.
Cliquez sur Base de données.
Cela spécifie que vous souhaitez obtenir des données d'une base de données qui prend en charge des instructions SQL, ce qui inclut SQL Server et d'autres bases de données compatibles OLEDB.
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é (SqlDataSource1). Vous pouvez laisser ce nom.
Cliquez sur OK.
L'Assistant Configurer la source de données s'affiche.
Dans la zone Quelle connexion de données votre application doit-elle utiliser pour établir une connexion à la base de données ?, entrez la connexion que vous avez créée dans « Pour créer une connexion au SQL Server », puis cliquez sur Suivant.
L'Assistant affiche une page dans laquelle vous pouvez choisir de stocker la chaîne de connexion dans le fichier de configuration. Le stockage de la chaîne de connexion dans le fichier de configuration présente deux avantages :
Ce stockage est plus sécurisé que le stockage dans la page.
Vous pouvez utiliser la même chaîne de connexion dans plusieurs pages.
Activez la case à cocher Oui, enregistrer cette connexion en tant que, puis cliquez sur Suivant.
L'Assistant affiche une page dans laquelle vous pouvez spécifier les données à récupérer à partir de la base de données.
Sous Spécifiez les colonnes d'une table ou d'une vue, dans la zone Nom, cliquez sur Employees.
Sous Colonnes, activez les cases à cocher ID Employé, Name, FirstName, HireDate et City.
L'Assistant affiche l'instruction SQL que vous créez dans une zone en bas de la page.
Remarque :L'Assistant vous permet de spécifier des critères de sélection (clauses WHERE) et d'autres options de requête SQL. Pour cette procédure pas à pas, vous créerez une instruction unique sans options de sélection ou de tri.
Cliquez sur Avancé, activez la case à cocher Générer des instructions INSERT, UPDATE et DELETE, puis cliquez sur OK.
Les instructions Insert, Update et Delete sont alors générées pour le contrôle SqlDataSource1 selon l'instruction Select que vous avez configurée précédemment.
Remarque :Vous pouvez également créer manuellement les instructions en sélectionnant Spécifiez une instruction SQL personnalisée ou une procédure stockée et entrant des requêtes SQL.
Cliquez sur Suivant.
Cliquez sur Tester la requête pour vous assurer de récupérer les données que vous souhaitez.
Cliquez sur Terminer.
Cliquez avec le bouton droit sur le contrôle GridView, puis sélectionnez Afficher la balise active. Dans le menu Tâches GridView, activez la case Activer la modification.
Vous pouvez à présent tester la page.
Pour tester la page
Appuyez sur CTRL+F5 pour exécuter la page.
Le contrôle GridView est affiché avec les colonnes EmployeeId, Name, FirstName, HireDate et City.
Cliquez sur le lien Modifier en regard d'une ligne.
La ligne sélectionnée pour être modifiée s'affiche avec les colonnes LastName, FirstName, HireDate et City comme une zone de texte modifiable. EmployeeId ne s'affiche pas dans une zone de texte, parce que c'est un champ clé et qu'il est non modifiable.
Modifiez un champ tel que Nom et cliquez sur Mettre à jour.
Le contrôle GridView est affiché avec les colonnes EmployeeId, Name, FirstName, City et City, avec Name mis à jour avec la nouvelle valeur.
Fermez le navigateur.
Affichage d'une liste déroulante tout en modifiant le contrôle GridView
Dans cette partie de la procédure pas à pas, vous pouvez ajouter une liste déroulante dans laquelle effectuer votre sélection tout en modifiant les lignes de la grille.
Pour afficher une liste déroulante tout en modifiant
À partir du nœud Données de la Boîte à outils, faites glisser un contrôle SqlDataSource sur la page.
Un nouveau contrôle de source de données nommé SqlDataSource2 est créé.
Dans le menu Tâches SqlDataSource, sélectionnez Configurer la source de données.
Dans la zone Quelle connexion de données votre application doit-elle utiliser pour établir une connexion à la base de données ?, entrez la connexion que vous avez créée précédemment.
Cliquez sur Suivant.
Sur la page Configurer l'instruction Select, sélectionnez Spécifiez les colonnes d'une table ou d'une vue, puis dans la zone Nom, cliquez sur Employees.
Sélectionnez uniquement la colonne City, puis activez la case à cocher Retourner seulement des lignes uniques. Cliquez sur Suivant.
Cliquez sur Tester la requête pour visualiser les données, puis cliquez sur Terminer.
Cliquez avec le bouton droit sur le contrôle GridView, puis sélectionnez Afficher la balise active. Dans le menu Tâches GridView, sélectionnez Modifier les colonnes.
Dans la boîte de dialogue Champs, sélectionnez City dans la liste Champs sélectionnés.
Cliquez sur le lien Convertir ce champ en TemplateField.
Cliquez sur OK pour fermer la boîte de dialogue Champs.
Cliquez avec le bouton droit sur le contrôle GridView, puis sélectionnez Afficher la balise active. Dans le menu Tâches GridView, sélectionnez Modifier les modèles.
Sélectionnez EditItemTemplate dans la liste déroulante Afficher.
Cliquez avec le bouton droit sur le contrôle TextBox par défaut dans le modèle et sélectionnez Supprimer pour le supprimer.
À partir de l'onglet Standard de la Boîte à outils, faites glisser un contrôle DropDownList sur le modèle.
Cliquez avec le bouton droit sur le contrôle DropDownList, puis sélectionnez Afficher la balise active. Dans le menu Tâches DropDownList, sélectionnez Choisirles sources de données.
Sélectionnez SqlDataSource2.
Cliquez sur OK.
Dans le menu Tâches DropDownList, sélectionnez Modifier les DataBindings. La propriété SelectedValue du contrôle DropDownList est sélectionnée dans la boîte de dialogue DataBindings.
Cliquez sur la case d'option Liaison de champs et sélectionnez City pour Lié à.
Activez la case à cocher Liaison de données bidirectionnelle.
Cliquez sur OK.
Cliquez avec le bouton droit sur le contrôle GridView, puis sélectionnez Afficher la balise active. Dans le menu GridView Tasks, cliquez sur Terminer la modification du modèle.
.gif "Note de sécurité")
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 validation 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 utilisateur. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.
Vous pouvez à présent tester la page.
Pour tester la page
Appuyez sur CTRL+F5 pour exécuter la page.
Le contrôle GridView est affiché avec les colonnes EmployeeId, Name, FirstName, HireDate et City.
Cliquez sur le lien Modifier en regard d'une ligne.
La valeur City actuelle est présélectionnée dans la liste déroulante.
Sélectionnez une valeur City différente dans la liste déroulante et cliquez sur Mettre à jour.
Le champ City est mis à jour à l'aide de la valeur sélectionnée dans la liste déroulante.
Étapes suivantes
Bien que cette procédure pas à pas indique comment afficher une liste déroulante remplie avec les valeurs de la même colonne que celle liée au contrôle, il existe de nombreuses autres méthodes de remplissage d'une liste déroulante. Consultez l'exemple pour DataItem afin de voir comment remplir une liste déroulante avec les valeurs d'une autre table.
Voir aussi
Tâches
Procédure pas à pas : accès aux données de base dans les pages Web
Comment : sécuriser des chaînes de connexion lors de l'utilisation de contrôles de source de données