Procédure pas à pas : affichage de données à l'aide d'une procédure stockée dans le contrôle serveur Web GridView
Mise à jour : novembre 2007
Cette procédure pas à pas vous indique comment afficher des données dans le contrôle GridView à l'aide d'une procédure stockée. Une procédure stockée est une requête SQL stockée dans une base de données Microsoft SQL Server plutôt que dans votre code d'application. Les procédures stockées sont plus sécurisées que le code de requête et s'exécutent souvent plus vite. Dans cette procédure pas à pas, vous allez créer un contrôle SqlDataSource qui récupère les résultats d'une procédure stockée. Le contrôle SqlDataSource fait office de source de données pour un contrôle GridView. Le contrôle GridView lit les résultats générés par la procédure stockée et crée des lignes et des tableaux pour afficher les données.
Au cours de cette procédure pas à pas, vous apprendrez à :
vous connecter à une base de données SQL Server dans Visual Web Developer ;
utiliser le contrôle SqlDataSource pour gérer l'accès aux données et la liaison des données ;
ajouter une procédure stockée pour retourner les données qui seront affichées dans le contrôle GridView ;
afficher des données retournées par la procédure stockée dans le contrôle GridView.
Composants requis
Pour exécuter cette procédure pas à pas, vous avez besoin des éléments suivants :
Visual Studio 2008 ou Visual Web Developer 2008 Express.
.gif "Remarque")
Remarque :La fonctionnalité Ajouter une nouvelle procédure stockée utilisée dans cette procédure pas à pas n'est pas prise en charge par Visual Web Developer 2005 Express.
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.
Microsoft Data Access Components (MDAC) version 2.7 ou ultérieures.
Si vous utilisez Microsoft Windows XP ou Windows Server 2003, vous disposez déjà de MDAC 2.7. En revanche, 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 sur le site Web de MSDN.
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 à SQL Server, contactez l'administrateur du serveur.
Création d'un 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
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 première zone Emplacement, sélectionnez Système de fichiers ; dans la deuxième 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\ProcédureStockée.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur OK.
Visual Web Developer Express crée le dossier et une nouvelle page nommée Default.aspx.
Ajout d'une procédure stockée pour retourner des données
Pour afficher des données dans une page Web ASP.NET, vous avez besoin des éléments suivants :
Une connexion à une source de données (telle qu'une base de données).
Dans la procédure suivante, vous créerez une connexion à la base de données Northwind SQL Server.
Une procédure stockée qui retourne des données pour affichage.
Un contrôle de source de données sur la page qui exécute la procédure stockée et gère les résultats.
Un contrôle sur la page pour afficher les données.
Dans la procédure suivante, vous afficherez des données dans un contrôle GridView. Le contrôle GridView obtiendra ses données du contrôle SqlDataSource.
La première étape consiste à créer une procédure stockée.
Pour créer une procédure stockée pour retourner des données
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, sélectionnez Explorateur de bases de données.
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 boîte de dialogue Choisir la source de données apparaît au lieu de la boîte de dialogue Propriétés de connexion, sélectionnez le type de source de données que vous utiliserez dans la liste Source de données. 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, cliquez sur Explorateur de serveurs dans le menu Affichage. Dans Visual Web Developer Express, dans le menu Affichage, cliquez sur Explorateur de bases de données.
Dans la zone Ajouter une connexion, entrez le nom de votre serveur dans la zone Nom du serveur.
Pour la section Connexion au serveur, sélectionnez l'option 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.
Si vous avez entré un mot de passe, activez la case à cocherEnregistrer mon mot de passe.
Sous Sélectionner ou entrer un nom de base de données, entrez Northwind.
Cliquez sur Tester la connexion et, lorsque vous êtes sûr que la connexion fonctionne, cliquez sur OK.
La connexion est créée et affichée sous Connexions de données dans l'Explorateur de serveurs.
Dans l'Explorateur de serveurs, sous Connexions de données, développez la connexion de données que vous venez de créer. Si vous utilisez Visual Web Developer Express, sélectionnez Explorateur de bases de données.
La Connexion de données se développe pour inclure des connexions enfants, telles que Tables, Affichages et Procédures stockées.
Cliquez avec le bouton droit sur l'option Procédures stockées, puis cliquez sur Ajouter une nouvelle procédure stockée.
Remarque :La fonctionnalité Ajouter une nouvelle procédure stockée n'est pas prise en charge par Visual Web Developer 2005 Express.
Ajoutez le code suivant dans la nouvelle procédure stockée, en substituant tout code existant.
CREATE PROCEDURE GetEmployees AS Select EmployeeID, LastName, FirstName from Employees RETURNFermez la fenêtre et cliquez sur Oui pour créer la procédure stockée.
Remarque :Le mot clé CREATE se transforme en ALTER lorsque la procédure est enregistrée.
Ajout d'un contrôle GridView pour afficher les données
Après avoir établi une connexion à une source de données, vous avez besoin des éléments suivants :
Un contrôle de source de données sur la page qui exécute la procédure stockée et gère les résultats.
Un contrôle sur la page pour afficher les données.
Dans la procédure suivante, vous allez afficher des données dans un contrôle GridView. Le contrôle GridView obtient ses données du contrôle SqlDataSource.
Vous pouvez ajouter ces éléments séparément au site Web. Toutefois, il est plus facile de commencer en affichant les données à l'aide du contrôle GridView, puis à l'aide d'Assistants pour créer la connexion et le contrôle de source de données. La procédure suivante explique comment créer les éléments dont vous avez besoin pour afficher des données dans la page.
Pour ajouter et configurer un contrôle GridView pour afficher des données
Ouvrez ou basculez vers la page Default.aspx, puis basculez en mode Design.
À partir du groupe Data de la Boîte à outils, faites glisser un contrôle GridView sur la page.
Dans le menu Tâches GridView, cliquez sur XmlDataSource1 dans la liste Choisir la source de données.
La boîte de dialogue Assistant Configuration de source de données s'affiche.
Sélectionnez Base de données, puis cliquez sur OK.
Vous spécifiez ainsi que vous voulez récupérer des données d'une base de données SQL Server.
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). Conservez ce nom.
L'Assistant Configurer la source de données SqlDataSource1 affiche une page dans laquelle vous pouvez sélectionner une connexion.
Dans la liste 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 le cadre de la procédure précédente, puis cliquez sur Suivant.
L'Assistant affiche une page dans laquelle vous pouvez choisir de stocker la chaîne de connexion dans un 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.
Sélectionnez l'option Spécifiez une instruction SQL personnalisée ou une procédure stockée, puis cliquez sur Suivant.
Dans la page Définir des instructions personnalisées ou des procédures stockées, sélectionnez Procédure stockée, puis sélectionnez la procédure stockée que vous avez créée précédemment (GetEmployees).
Cliquez sur Suivant.
Cliquez sur Tester la requête pour confirmer la récupération des données qui vous intéressent.
Cliquez sur Terminer.
Ajout d'un contrôle DetailsView pour afficher des données à partir d'une procédure stockée
Vous pouvez afficher des données à partir d'une procédure stockée qui prend des paramètres. Dans la procédure suivante, vous allez créer un contrôle DetailsView afin d'afficher une valeur calculée pour une ligne sélectionnée sur un contrôle GridView. La ligne GridView représentera un enregistrement Employé et le contrôle DetailsView affichera les ventes totales calculées pour l'employé sélectionné.
Vous avez besoin des éléments suivants :
Une procédure stockée qui prend l'ID employé comme paramètre et retourne une valeur.
Un deuxième contrôle de source de données dans la page qui exécute la procédure stockée et gère les résultats. Les deux contrôles de source de données représenteront des connexions à la même base de données Northwind. Vous allez réutiliser la connexion à la base de données Northwind rSQL Server créée précédemment dans cette procédure pas à pas.
Un contrôle DetailsView dans la page pour afficher les données.
La première étape consiste à créer la procédure stockée.
Pour créer une procédure stockée pour retourner des données en vue de les afficher dans le contrôle DetailsView
Dans l'Explorateur de serveurs, sous Connexions de données, développez la connexion de données que vous avez créée précédemment. Si vous utilisez Visual Web Developer Express, sélectionnez l'Explorateur de bases de données à cette fin.
Cliquez avec le bouton droit sur l'option Procédures stockées, puis cliquez sur Ajouter une nouvelle procédure stockée.
Remarque :La fonctionnalité Ajouter une nouvelle procédure stockée n'est pas prise en charge par Visual Web Developer 2005 Express.
Ajoutez le code suivant dans la nouvelle procédure stockée, en substituant tout code existant.
CREATE PROCEDURE EmployeeSales @Employee int AS SELECT SUM([Order Subtotals].Subtotal) AS Total FROM Employees INNER JOIN Orders INNER JOIN [Order Subtotals] ON Orders.OrderID = [Order Subtotals].OrderID ON Employees.EmployeeID = Orders.EmployeeID WHERE (Employees.EmployeeID = @Employee)Fermez la fenêtre et cliquez sur Oui pour créer la procédure stockée.
Remarque :Le mot clé CREATE se transforme en ALTER lorsque la procédure est enregistrée.
Après avoir créé la procédure stockée pour fournir les données, vous avez besoin des éléments suivants :
Un contrôle de source de données sur la page qui exécute la procédure stockée et gère les résultats.
Un contrôle sur la page pour afficher les données.
Dans la procédure suivante, vous afficherez des données dans un contrôle DetailsView. Le contrôle DetailsView obtiendra ses données du contrôle SqlDataSource.
Vous pouvez ajouter ces éléments séparément au site Web. Toutefois, il est plus facile de commencer en affichant les données à l'aide du contrôle DetailsView, puis à l'aide d'Assistants pour créer la connexion et le contrôle de source de données. La procédure suivante explique comment créer les éléments dont vous avez besoin pour afficher des données dans la page.
L'étape suivante consiste à activer la sélection de ligne pour le contrôle GridView. La ligne sélectionnée déterminera le paramètre EmployeeID passé à la procédure stockée.
Pour activer la sélection de ligne pour un contrôle GridView
Cliquez avec le bouton droit sur le contrôle GridView, puis cliquez sur Afficher la balise active.
Dans le volet Tâches GridView, activez la case à cocher Activer la sélection.
L'étape suivante consiste à créer un contrôle pour afficher les résultats de la procédure stockée.
Pour ajouter et configurer un contrôle DetailsView pour afficher des données
Ouvrez ou basculez vers la page Default.aspx, puis basculez en mode Design.
À partir du groupe Data de la Boîte à outils, faites glisser un contrôle DetailsView sur la page.
Dans le menu Tâches DetailsView, cliquez sur Nouvelle source de données dans la liste Choisir la source de données.
La boîte de dialogue Assistant Configuration de source de données s'affiche.
Sélectionnez Base de données, puis cliquez sur OK.
Vous spécifiez ainsi que vous voulez récupérer des données d'une base de données SQL Server.
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é (SqlDataSource2). Conservez ce nom.
L'Assistant Configurer la source de données SqlDataSource2 affiche une page dans laquelle vous pouvez sélectionner une connexion.
Dans la liste 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, puis cliquez sur Suivant.
Sélectionnez l'option Spécifiez une instruction SQL personnalisée ou une procédure stockée, puis cliquez sur Suivant.
Dans la page Définir des instructions personnalisées ou des procédures stockées, sélectionnez Procédure stockée, puis sélectionnez la procédure stockée que vous avez créée précédemment (EmployeeSales).
Cliquez sur Suivant.
La page Définir les paramètres s'affiche.
Dans la liste Source du paramètre, sélectionnez Contrôle.
Dans la liste ControlID, sélectionnez GridView1.
Cliquez sur Tester la requête pour confirmer la récupération des données qui vous intéressent. Dans la boîte de dialogue Éditeur de valeurs de paramètre, entrez la valeur 1, puis cliquez sur OK. La valeur 1 est l'ID d'un employé dans la base de données. Si l'extraction des données fonctionne correctement, une valeur telle que 192107.6000 est retournée. (Cette valeur peut être différente si les données dans la base de données ont été modifiées.)
Cliquez sur Terminer.
Test de la page
Vous pouvez à présent exécuter la page.
Pour tester la page
Appuyez sur CTRL+F5 pour exécuter la page.
La page s'affiche dans le navigateur. Le contrôle GridView affiche toutes les lignes de données de la table Employees.
Cliquez sur le lien Sélectionner sur une ligne de données sur le contrôle GridView.
Un contrôle DetailsView affiche les détails de la ligne sélectionnée ainsi que les résultats de la procédure stockée pour calculer les ventes totales de l'employé sélectionné.
Fermez le navigateur.
Étapes suivantes
Cette procédure pas à pas a illustré l'utilisation d'une procédure stockée SQL Server avec un contrôle de source de données pour afficher des données dans une page Web ASP.NET. Vous pouvez utiliser des procédures stockées de la même manière que toute instruction SQL lorsque vous utilisez le contrôle SqlDataSource. En outre, les procédures stockées peuvent prendre des paramètres que vous pouvez associer à des valeurs dans la page Web. Si vous le souhaitez, vous pouvez explorer les scénarios suivants avec les procédures stockées, qui exécutent des fonctions liées aux données à l'aide d'instructions SQL :
Voir aussi
Tâches
Comment : sécuriser des chaînes de connexion lors de l'utilisation de contrôles de source de données
Procédure pas à pas : accès aux données de base dans les pages Web