Vous êtes sur la page 1sur 11

Procdure pas pas : accs aux donnes de base dans les pages Web

.NET Framework 4 Autres versions Ce sujet n'a pas encore t valu - valuez ce sujet Cette procdure pas pas vous montre comment crer une page lie aux donnes simple en utilisant des contrles conus spcialement pour l'accs aux donnes. Au cours de cette procdure pas pas, vous allez apprendre effectuer les tches suivantes :

vous connecter une base de donnes Microsoft SQL Server dans l'outil de dveloppement Web Microsoft Visual Web Developer ; effectuer une opration de glisser-dplacer pour crer des lments d'accs aux donnes qui peuvent tre utiliss dans la page sans code ; utiliser le contrle SqlDataSource pour grer l'accs aux donnes et la liaison des donnes ; afficher des donnes avec le contrle GridView ; configurer le contrle GridView pour autoriser le tri et la pagination ; crer une requte filtre qui affiche uniquement les enregistrements slectionns.

Un projet Visual Studio avec le code source accompagne ce projet : Tlcharger. Composants requis

Pour effectuer cette procdure pas pas, vous aurez besoin des lments suivants :

Visual Studio ou Visual Web Developer Express install sur votre ordinateur. Remarque Si vous utilisez Visual Studio, la procdure pas pas suppose que vous avez slectionn la collection de paramtres Dveloppement Web lors du premier dmarrage de Visual Studio. Pour plus d'informations, consultez Comment : slectionner les paramtres de l'environnement de dveloppement Web.

Accder la base de donnes Northwind SQL Server. L'option la plus simple est utiliser la copie base sur des fichiers de Northwind inclus dans le tlchargement d'exemple de code pour cette rubrique. Vous pouvez galement tlcharger et installer une version de Northwind excuter sur une instance de SQL Server sur votre ordinateur ou votre rseau local. Pour plus d'informations sur le tlchargement et l'installation de l'exemple de base de donnes Northwind SQL Server, consultez Installation d'exemples de bases de donnes sur le site Web Microsoft SQL Server. Remarque

Si vous avez besoin d'informations sur la faon de se connecter un ordinateur qui excute SQL Server, contactez l'administrateur du serveur. Cration du site Web

Si vous avez dj cr un site Web dans Visual Studio ou Visual Web Developer Express (en suivant les tapes de Procdure pas pas : cration d'une page Web de base dans Visual Studio, par exemple), vous pouvez utiliser ce dernier et passer la section suivante. Sinon, crez un site et une page Web en suivant ces tapes. Cette procdure pas pas utilise un projet de site Web. Vous pouvez utiliser un projet d'application Web la place. Pour plus d'informations sur ce qui diffrencie ces types de projets Web, consultez Projets d'application Web et projets de site Web.

Pour crer un site Web de systme de fichiers


1. 2. Ouvrez Visual Studio ou Visual Web Developer Express. Dans le menu Fichier, cliquez sur Nouveau site Web.

La bote de dialogue Nouveau site Web s'affiche. 3. 4. Sous Modles installs, cliquez sur Visual Basic ou VisualC#, puis slectionnez Site Web ASP.NET. Dans la zone EmplacementWeb, slectionnez Systme de fichiers, puis 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. 5. Cliquez sur OK.

Visual Studio cre un projet de site Web qui inclut des fonctionnalits prgnres pour la disposition (page matre, pages de contenu About.aspx et Default.aspx et feuille de style en cascade), pour Ajax (fichiers de script client) et pour l'authentification (appartenance d'ASP.NET). Ajout d'un contrle GridView pour afficher les donnes

Pour afficher des donnes sur une page Web ASP.NET, vous devez disposer des lments suivants :

Connexion une source de donnes (telle qu'une base de donnes).

Dans la procdure suivante, vous crerez une connexion la base de donnes Northwind SQL Server.

Un contrle de source de donnes sur la page qui excute des requtes et gre les rsultats des requtes. Un contrle sur la page pour afficher rellement les donnes.

Dans la procdure suivante, vous afficherez des donnes dans un contrle GridView. Le contrle GridView obtiendra ses donnes du contrle SqlDataSource. Vous pouvez ajouter sparment ces lments au site Web. Toutefois, il est plus facile de commencer en affichant les donnes l'aide du contrle GridView, puis l'aide d'Assistants pour crer la connexion et le contrle de source de donnes. La procdure suivante explique comment crer chacun des trois lments dont vous devez disposer pour afficher des donnes sur la page.

Pour ajouter et configurer un contrle GridView pour afficher des donnes


1. 2. 3. 4. Dans Visual Web Developer, basculez vers le mode Design. Dans le dossier Donnes de la Bote outils, faites glisser un contrle GridView sur la page Default.aspx. Si le menu contextuel Tches GridView ne s'affiche pas, cliquez avec le bouton droit sur le contrle GridView, puis cliquez sur Afficher la balise active. Dans le menu Tches GridView, dans la liste Choisir la source de donnes, cliquez sur <Nouvelle source de donnes>.

La bote de dialogue Configuration de source de donnes s'affiche.

5.

Cliquez sur Base de donnes.

Cela spcifie que vous souhaitez obtenir des donnes partir d'une base de donnes qui prend en charge des instructions SQL. Cela inclut le serveur SQL et d'autres bases de donnes compatibles OLEDB. Dans la zone Spcifiez un ID pour la source de donnes, le nom d'un contrle de source de donnes par dfaut est affich (SqlDataSource1). Vous pouvez laisser ce nom. 6. Cliquez sur OK.

L'Assistant Configurer la source donnes apparat, en affichant une page sur laquelle vous pouvez choisir une connexion.

7. 8.

Cliquez sur Nouvelle connexion. Dans la bote de dialogue Choisir la source de donnes, sous Source de donnes, cliquez sur Microsoft SQL Server, puis sur Continuer.

La bote de dialogue Ajouter une connexion s'affiche. 9. Dans la zone Nom du serveur, entrez le nom du serveur SQL que vous souhaitez utiliser.

10.

11. 12.

Pour les informations d'identification de connexion, slectionnez l'option approprie pour accder la base de donnes SQL Server (scurit intgre ou ID et mot de passe spcifiques) et si ncessaire, entrez un nom d'utilisateur et un mot de passe. Cliquez sur Slectionnez ou entrez un nom de base de donnes, puis entrez Northwind. Cliquez sur Tester la connexion et, lorsque vous tes sr que la connexion fonctionne, cliquez sur OK.

L'Assistant Configurer la source de donnes - <NomSourceDonnes> apparat et les informations de connexion sont renseignes. 13. Cliquez sur Suivant.

L'Assistant affiche une page dans laquelle vous pouvez choisir de stocker la chane de connexion dans le fichier de configuration. Le stockage de la chane de connexion dans le fichier de configuration prsente deux avantages :
o o

14.

Il est plus scuris que le stockage de la chane de connexion dans la page. Vous pouvez rutiliser la mme chane de connexion dans plusieurs pages. Veillez ce que la case cocher Oui, enregistrer cette connexion en tant que soit active, puis cliquez sur Suivant. (Vous pouvez laisser le nom de chane de connexion par dfaut NorthwindConnectionString.)

L'Assistant affiche une page dans laquelle vous pouvez spcifier les donnes extraire partir de la base de donnes. 15. 16. Sous Spcifiez les colonnes d'une table ou d'une vue, dans la zone Nom, cliquez sur Customers. Sous Colonnes, activez les cases cocher CustomerID, CompanyName et City.

L'Assistant affiche l'instruction SQL que vous crez dans une zone en bas de la page.

Remarque L'Assistant vous permet de spcifier des critres de slection (clause WHERE) et d'autres options de requte SQL. Pour cette partie de la procdure pas pas, vous crerez une instruction unique sans option de slection ou de tri.

17. 18. 19.

Cliquez sur Suivant. Cliquez sur Tester la requte pour veiller extraire les donnes que vous souhaitez. Cliquez sur Terminer.

L'Assistant se ferme et vous revenez la page. L'Assistant a permis d'effectuer deux tches :
o o

L'Assistant a cr et configur un contrle SqlDataSource (nomm SqlDataSource1) qui incorpore la connexion et les informations de requte que vous avez spcifies. L'Assistant lie le contrle GridView SqlDataSource. Par consquent, le contrle GridView affichera des donnes qui sont retournes par le contrle SqlDataSource.

Si vous affichez les proprits pour le contrle SqlDataSource, vous pouvez voir que l'Assistant a cr des valeurs pour les proprits ConnectionString et SelectQuery. Remarque Vous pouvez aisment changer l'apparence du contrle GridView. En mode Design, cliquez avec le bouton droit sur le contrle GridView, puis cliquez sur Afficher la balise active. Dans le menu Tches GridView, cliquez sur Mise en forme automatique puis appliquez un modle. Test de la page

Vous pouvez prsent excuter la page.

Pour tester la page


1. Appuyez sur CTRL+F5 pour excuter la page.

La page s'affiche dans le navigateur. Le contrle GridView affiche toutes les lignes de donnes dans la table Customers. 2. Fermez le navigateur.

Ajout de fonctions de tri et de pagination

Vous pouvez ajouter des fonctions de tri et de pagination au contrle GridView sans crire de code.

Pour ajouter les fonctions de tri et de pagination


1. 2. En mode Design, cliquez avec le bouton droit sur le contrle GridView, puis cliquez sur Afficher la balise active. Dans le menu contextuel Tches GridView, activez la case cocher Activer le tri.

Les en-ttes de colonne dans le contrle GridView sont transforms en liens. 3. Dans le menu Tches GridView, activez la case cocher Activer la pagination.

Un pied de page est ajout au contrle GridView contenant les liens de numro de page. 4. 5. ventuellement, utilisez Proprits pour modifier la valeur de la proprit PageSize de 10 en une plus petite taille de page. Appuyez sur CTRL+F5 pour excuter la page.

Vous pourrez cliquer sur un en-tte de colonne pour trier le contenu de cette colonne. S'il y a plus d'enregistrements dans la source de donnes que la taille de page du contrle GridView, vous pourrez utiliser les liens de navigation entre les pages en bas du contrle GridView pour changer de pages. 6. Fermez le navigateur.

Ajout du filtrage

Frquemment, vous souhaitez afficher des donnes slectionnes uniquement dans la page. Dans cette partie de la procdure pas pas, vous modifierez la requte du contrle SqlDataSource afin que les utilisateurs puissent slectionner des enregistrements de client pour une ville particulire. En premier lieu, vous devez utiliser un contrle TextBox pour crer une zone de texte dans laquelle les utilisateurs peuvent taper le nom d'une ville. Puis, vous modifierez la requte pour inclure un filtre paramtr (clause WHERE). Dans le cadre de ce processus, vous crerez un lment de paramtre pour le contrle SqlDataSource. L'lment de paramtre tablit comment le contrle SqlDataSource obtiendra la valeur de sa requte paramtre, savoir de la zone de texte. Lorsque vous avez termin cette partie de la procdure pas pas, la page peut ressembler en mode Design :

Pour ajouter la zone de texte pour spcifier une ville


1. partir du groupe Standard de la Bote outils, faites glisser un contrle TextBox et un contrle Button dans la page.

Le contrle Button est utilis uniquement pour publier la page au serveur. Vous n'aurez pas besoin d'crire du code pour lui. 2. 3. 4. Dans Proprits, pour le contrle TextBox, affectez textCity ID. Si vous souhaitez, tapez Ville ou du texte similaire avant que la zone de texte n'agisse comme une lgende. Dans Proprits, pour le contrle Button, affectez Envoyer Text.

Vous pouvez maintenant modifier la requte pour inclure un filtre.

Pour modifier la requte avec un filtre paramtr


1. 2. Cliquez avec le bouton droit sur le contrle SqlDataSource, puis cliquez sur Afficher la balise active. Dans le menu Tches SqlDataSource, cliquez sur Configurer la source de donnes.

L'Assistant Configurer la source de donnes - <NomSourceDonnes> s'affiche. 3. Cliquez sur Suivant.

L'Assistant affiche la commande SQL actuellement configure pour le contrle SqlDataSource. 4. Cliquez sur WHERE.

La page Ajouter une clause WHERE apparat. 5. 6. 7. 8. Dans la liste Colonne, cliquez sur Ville. Dans la liste Oprateur, cliquez sur =. Dans la liste Source, cliquez sur Contrle. Sous Proprits du paramtre, dans la liste ControlID, cliquez sur textCity.

Les cinq tapes prcdentes spcifient que la requte obtiendra la valeur de recherche pour Ville du contrle TextBox que vous avez ajout dans la procdure prcdente. 9. Cliquez sur Ajouter.

La clause WHERE que vous avez cre apparat dans une zone en bas de la page. 10. 11. 12. Cliquez sur OK pour fermer la page Ajouter une clause WHERE. Dans l'Assistant Configurer la source de donnes - <NomSourceDonnes>, cliquez sur Suivant. Dans la page Tester la requte, cliquez sur Tester la requte.

L'Assistant apparat, affichant la page diteur de valeurs de paramtre qui vous invite utiliser une valeur dans la clause WHERE. 13. Dans la zone Valeur, tapez London, puis cliquez sur OK.

Les enregistrements de client pour London apparaissent. 14. Cliquez sur Terminer pour fermer l'Assistant.

Vous pouvez maintenant tester le filtrage.

Pour tester le filtrage


1. 2. Appuyez sur CTRL+F5 pour excuter la page. Dans la zone de texte, tapez London, puis cliquez sur Envoyer.

Une liste de clients de la ville de Londres apparat dans le contrle GridView. 3. Essayez d'autres villes, telles que Buenos Aires et Berlin.

tapes suivantes

L'accs aux donnes est une partie importante de beaucoup d'applications Web, et cette procdure pas pas a seulement fourni un aperu de ce que vous pouvez faire avec les donnes dans les pages Web. Vous pouvez essayer des fonctionnalits d'accs aux donnes supplmentaires. Par exemple, vous pouvez souhaiter procder comme suit :

Utilisation de Microsoft Access la place de SQL Server. (Vous ne pouvez pas utiliser de dpendance de cache SQL avec Access.)

Pour plus d'informations, consultez Procdure pas pas : cration d'une page Web pour afficher les donnes d'une base de donnes Access.

Modifiez et insrez des enregistrements.

Pour plus d'informations, consultez Procdure pas pas : modification et insertion de donnes dans les pages Web avec le contrle serveur Web DetailsView.

Utilisez des enregistrements qui ont une relation matre/dtail.

Pour plus d'informations, consultez Procdure pas pas : cration de pages Web matre/dtail dans Visual Studio.

Crez un composant de couche intermdiaire (mtier) qui excute l'accs aux donnes, puis utilisez-le comme source de donnes dans une page.

Pour plus d'informations, consultez Procdure pas pas : liaison de donnes un objet mtier personnalis.