Procédure pas à pas : création d'une page Web pour afficher des données XML
Mise à jour : novembre 2007
Les données sont souvent transmises aux applications Web au format XML. Toutefois, les données XML sont fondamentalement hiérarchiques et vous pouvez les utiliser dans des contrôles de liste, tels que le contrôle GridView ou DropDownList. Cette procédure pas à pas vous indique comment utiliser des données XML comme dans une table de base de données tabulaire.
Au cours de cette procédure pas à pas, vous apprendrez à :
utiliser un contrôle de source de données pour lire les données XML et les rendre disponibles aux contrôles de liste ;
créer une page maître/détails qui affiche les données XML connexes de façon logique ;
appliquer une transformation à un fichier .xml pour rendre le fichier utilisable sous la forme de données tabulaires.
.gif "Remarque") Remarque : |
|---|
Vous pouvez également utiliser le XML sous forme hiérarchique. Pour plus d'informations, consultez Procédure pas à pas : affichage de données hiérarchiques dans un contrôle TreeView. |
Composants requis
Pour exécuter cette procédure pas à pas, vous avez besoin de :
Microsoft Visual Web Developer
.NET Framework
Cette procédure pas à pas suppose que vous savez utiliser Visual Web Developer.
Création d'un site Web
Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, en suivant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à la section suivante. Sinon, 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 site 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, cliquez sur Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver votre site Web.
Par exemple, tapez le nom de dossier C:\SitesWeb\ProcédurePasàPasXML.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser, tel que Visual Basic ou Visual C#.
Le langage de programmation que vous choisissez sera la valeur par défaut pour votre site Web, mais vous pouvez définir individuellement le langage de programmation pour chaque page.
Cliquez sur OK.
Visual Web Developer crée le dossier et une page nommée Default.aspx.
Création d'un fichier .xml pour des données
Pour disposer des données XML à utiliser, créez un fichier .xml dans le site Web.
Pour créer le fichier .xml
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Data, puis cliquez sur AjouterNouvel élément.
Remarque :Lorsque vous placez le fichier .xml dans le dossier App_Data, celui-ci dispose des autorisations nécessaires pour permettre à ASP.NET de lire et d'écrire dans le fichier au moment de l'exécution. De plus, la conservation des fichiers dans le dossier App_Data empêche leur affichage dans un navigateur, car le dossier App_Data est marqué comme non consultable.
Sous Modèles Visual Studio installés, cliquez sur Fichier XML.
Dans la zone Nom, tapez Bookstore.xml.
Cliquez sur Ajouter.
Un fichier .xml est créé et contient uniquement la directive XML.
Copiez les données XML suivantes, puis collez-les dans le fichier en remplaçant le contenu existant.
<?xml version="1.0" standalone="yes"?> <bookstore> <book ISBN="10-000000-001" title="The Iliad and The Odyssey" price="12.95"> <comments> <userComment rating="4" comment="Best translation I've read." /> <userComment rating="2" comment="I like other versions better." /> </comments> </book> <book ISBN="10-000000-999" title="Anthology of World Literature" price="24.95"> <comments> <userComment rating="3" comment="Needs more modern literature." /> <userComment rating="4" comment="Excellent overview of world literature." /> </comments> </book> <book ISBN="11-000000-002" title="Computer Dictionary" price="24.95" > <comments> <userComment rating="3" comment="A valuable resource." /> </comments> </book> <book ISBN="11-000000-003" title="Cooking on a Budget" price="23.95" > <comments> <userComment rating="4" comment="Delicious!" /> </comments> </book> <book ISBN="11-000000-004" title="Great Works of Art" price="29.95" > </book> </bookstore>Le fichier Bookstore.xml contient des informations sur des livres qui peuvent être disponibles dans une librairie en ligne. Notez l'élément suivant à propos du fichier .xml :
Les valeurs de propriété pour les éléments sont toutes exprimées par des attributs.
Le fichier contient une structure imbriquée : chaque livre peut contenir ses valeurs de propriété ainsi qu'un ou plusieurs commentaires sous la forme d'éléments distincts.
Enregistrez le fichier Bookstore.xml et fermez-le.
Affichage de données XML dans un contrôle de liste
Pour rendre des données disponibles aux contrôles d'une page Web ASP.NET, utilisez un contrôle de source de données.
Pour configurer l'accès aux données dans le fichier .xml
Ouvrez le fichier Default.aspx et basculez en mode Design.
Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle XmlDataSource sur la page.
Dans le menu TâchesXmlDataSource, cliquez sur Configurer la source de données.
La boîte de dialogue Configurer la source de données <DataSourceName> s'affiche.
Dans la zone Fichier de données, tapez ~/App_Data/Bookstore.xml.
Cliquez sur OK.
Le contrôle XmlDataSource rend les données du fichier .xml disponibles aux contrôles sur la page. Les données sont disponibles dans deux formats : hiérarchique et tabulaire. Les contrôles liés au contrôle XmlDataSource peuvent obtenir les données dans le format qu'ils reconnaissent.
Dans ce cas, la hiérarchie du fichier Bookstore.xml se prête à une interprétation relationnelle. Les deux niveaux du fichier (livres et commentaires) peuvent être considérés comme deux tables connexes.
Vous pouvez maintenant afficher les données XML dans un contrôle de liste. Pour commencer, affichez certaines données XML dans un contrôle GridView.
Pour utiliser un contrôle GridView pour l'affichage de base de données XML
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 liste Choisir la source de données, cliquez sur XmlDataSource1.
Appuyez sur CTRL+F5 pour exécuter la page.
La page affiche les données XML dans une grille.
Les données affichées dans le contrôle GridView illustrent les points suivants sur l'interprétation des données XML :
Lorsque les données XML sont représentées sous forme d'enregistrement de données, par défaut, les colonnes sont créées à partir d'attributs (tels que ISBN).
Les éléments enfants sont traités dans le cadre d'une table connexe distincte. Pour cet exemple, le contrôle GridView ne crée pas de liaison avec les éléments comments dans le fichier.
Filtrage de données XML à l'aide d'une expression XPath
Dans la première partie de cette procédure pas à pas, vous vous êtes fié au comportement par défaut des contrôles XmlDataSource et GridView pour extraire des informations du fichier .xml. Toutefois, le contrôle n'affiche que certaines des données XML.
Dans cette partie de la procédure pas à pas, vous ajouterez un deuxième contrôle GridView et l'utiliserez pour illustrer les informations maître/détails. Les utilisateurs seront capables de sélectionner un livre individuel dans le premier contrôle GridView, et le deuxième contrôle GridView affichera les commentaires de l'utilisateur, s'il en existe, pour ce livre. Pour afficher des commentaires, vous utiliserez une expression XPath permettant de spécifier le niveau du fichier de données XML que vous souhaitez extraire. Si vous souhaitez afficher les commentaires pour un livre spécifique uniquement, vous devrez créer l'expression XPath de façon dynamique, selon le livre sélectionné par l'utilisateur.
Pour commencer, vous ajouterez un deuxième contrôle GridView à la page, puis configurerez le contrôle GridView afin qu'il affiche les commentaires de l'utilisateur.
Pour ajouter un contrôle GridView afin d'afficher les commentaires de l'utilisateur
Basculez en mode Design.
Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle GridView sur la page et placez-le sous le premier contrôle GridView.
Le menu Tâches GridView s'affiche.
Dans la zone Choisissez la source de données, cliquez sur Nouvelle source de données.
L'Assistant Configuration de source de données s'affiche.
Cliquez sur Fichier XML pour la source de données.
Dans la zone Spécifiez un ID pour la source de données, laissez la valeur par défaut XmlDataSource2.
Cliquez sur OK.
La boîte de dialogue Configurer la source de données s'affiche.
Dans la zone Fichier de données, tapez ~/App_Data/Bookstore.xml.
Vous utiliserez le même fichier .xml que celui qui a été utilisé précédemment dans cette procédure pas à pas, mais vous en extrairez des informations différentes pour le deuxième contrôle GridView.
Dans la zone Expression XPath, tapez l'expression suivante :
/bookstore/book/comments/userComment
Plus tard, vous modifierez la propriété XPath dans le code de façon dynamique. Toutefois, si vous définissez maintenant une expression XPath pour la source de données, les outils de Visual Web Concepteur pourront plus facilement déterminer les informations qui seront finalement affichées dans le contrôle.
Cliquez sur OK.
Le deuxième contrôle GridView apparaît, en affichant les évaluations et les commentaires de l'utilisateur comme exemples de données.
Sélectionnez le contrôle GridView2 et, dans Propriétés, affectez False à Visible.
Le deuxième contrôle GridView apparaîtra uniquement lorsque l'utilisateur aura sélectionné un livre dans le premier contrôle GridView.
Vous pouvez maintenant configurer le premier contrôle GridView pour permettre aux utilisateurs de sélectionner un livre. Vous ajouterez également du code qui crée une expression XPath selon la sélection de l'utilisateur et l'assigne au contrôle XmlDataSource2. Le résultat final sera que le deuxième contrôle GridView affichera les commentaires de l'utilisateur pour le livre sélectionné.
Pour configurer le contrôle GridView pour la sélection
Basculez en mode Design, puis sélectionnez le premier contrôle GridView.
Dans le menu Tâches GridView, sélectionnez Activer la sélection.
Une nouvelle colonne est ajoutée au contrôle GridView contenant un bouton de lien avec le texte Sélectionner.
Dans Propriétés, affectez ISBN à DataKeyNames.
Vous pouvez cliquer sur la zone de propriété pour sélectionner la valeur.
Cela configure le contrôle GridView pour traiter la propriété ISBN comme clé primaire pour chaque élément dans les données XML.
Cliquez sur le contrôle GridView. Dans la fenêtre Propriétés, sélectionnez Événements dans la liste déroulante située en haut de la fenêtre Propriétés. Tous les événements associés au contrôle s'afficheront.
Double-cliquez sur la zone de l'événement SelectedIndexChanged.
Cela vous bascule sur l'éditeur de code et crée un gestionnaire squelette pour l'événement SelectedIndexChanged.
Ajoutez le code en surbrillance suivant au gestionnaire.
Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles GridView1.SelectedIndexChanged Dim currentIndex As Integer currentIndex = GridView1.SelectedIndex Dim isbn As String isbn = CStr(GridView1.DataKeys(currentIndex).Value) XmlDataSource2.XPath = _ String.Format( _ "/bookstore/book[@ISBN='{0}']/comments/userComment", _ isbn) GridView2.Visible = true End Subprotected void GridView1_SelectedIndexChanged(Object sender, EventArgs e) { String isbn = (String) GridView1.DataKeys[GridView1.SelectedIndex].Value; XmlDataSource2.XPath = String.Format( "/bookstore/book[@ISBN='{0}']/comments/userComment", isbn); GridView2.Visible = true; }Le code fait les choses suivantes :
Il utilise la propriété SelectedIndex (du contrôle GridView) pour indexer dans le tableau de clés de données, puis retourne la clé primaire de la ligne sélectionnée. Auparavant, vous avez défini la propriété DataKeyNames pour qu'elle contienne des numéros ISBN.
Il crée une nouvelle expression XPath qui inclut l'ISBN sélectionné.
Il assigne la nouvelle expression XPath à la propriété XPath (du contrôle XmlDataSource2). Lorsqu'il assigne une nouvelle expression XPath à la propriété XPath, le contrôle XmlDataSource réévalue les données retournées. Ensuite, le contrôle GridView est à son tour relié aux données.
Il affecte true à la propriété Visible ; le deuxième contrôle GridView s'affiche alors. Lorsque vous avez créé le deuxième contrôle GridView, vous avez affectez de manière déclarative la valeur false à la visibilité afin que le contrôle n'apparaisse pas tant que l'utilisateur n'a pas sélectionné de livre.
Vous pouvez à présent tester la page.
Pour tester le filtrage avec l'expression XPath
Affichez la page Default.aspx et appuyez sur CTRL+F5 pour exécuter la page.
La page s'affiche avec une grille d'informations sur les livres.
Cliquez sur le lien Sélectionner situé à côté du premier livre.
Les commentaires sur ce livre sont affichés dans une deuxième grille.
Cliquez sur le lien Sélectionner situé à côté du dernier livre.
Aucun commentaire n'est affiché parce qu'il n'y en a pas pour ce livre.
Affichage des données XML avec une disposition personnalisée
Pour créer une disposition personnalisée pour les données, vous pouvez utiliser un contrôle DataList. Dans le contrôle DataList, vous pouvez définir un ou plusieurs modèles. Chaque modèle contient une combinaison de texte et de contrôles statiques que vous pouvez réorganiser en les disposant comme vous le souhaitez.
Dans cette partie de la procédure pas à pas, vous utiliserez un contrôle DataList pour afficher les mêmes informations que celles qui ont été affichées précédemment à l'aide du contrôle GridView2. Toutefois, vous serez en mesure de créer une disposition personnalisée pour les commentaires de l'utilisateur.
Pour afficher des données XML avec une disposition personnalisée
Basculez en mode Design, cliquez sur le contrôle GridView2, puis appuyez sur SUPPR pour le supprimer de la page.
Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle DataList sur la page.
Dans le menu Tâches DataList, dans la liste Choisir la source de données, cliquez sur XmlDataSource2.
Vous utiliserez la même source de données pour le DataList contrôle que pour le contrôle GridView2.
Dans Propriétés, affectez false à Visible.
Si la balise active ne s'affiche pas, cliquez avec le bouton droit sur le contrôle DataList, puis cliquez sur Afficher la balise active.
Dans le menu Tâches DataList, cliquez sur Modifier les modèles, puis dans la zone Afficher, cliquez sur Modèle d'élément.
Le contrôle DataList apparaît avec une zone modifiable pour le modèle d'élément. Le modèle contient une disposition par défaut qui comprend du texte statique et des contrôles Label liés aux colonnes Évaluation et Commentaire dans l'enregistrement de données. (Le contrôle DataList est capable de déduire la structure des données qu'il affichera, car vous avez défini précédemment une expression XPath statique pour le contrôle XmlDataSource2 dans cette procédure pas à pas.)
Dans la zone modifiable, remplacez la première légende par Évaluation utilisateur :
Remplacez la légende comment par Commentaire :.
Cliquez avec le bouton droit sur la barre de titre du contrôle DataList, pointez sur Modifier un modèle, puis cliquez sur Modèle de séparateur.
Une autre zone modifiable est affichée dans le contrôle DataList pour définir la disposition des éléments qui apparaîtront entre chaque enregistrement de données.
Dans la Boîte à outils, à partir du groupe HTML, faites glisser un contrôle Horizontal Rule sur la zone modifiable.
Cliquez avec le bouton droit sur le contrôle DataList, puis cliquez sur Terminer la modification du modèle.
Cliquez avec le bouton droit sur la page, puis cliquez sur Afficher le code pour basculer vers le code de la page.
Dans le gestionnaire GridView1_SelectedIndexChanged, remplacez la ligne suivante :
GridView2.Visible = TrueGridView2.Visible = true;par la ligne :
DataList1.Visible = TrueDataList1.Visible = true;
Vous pouvez à présent tester la disposition personnalisée.
Pour tester la disposition personnalisée
Affichez la page Default.aspx et appuyez sur CTRL+F5 pour exécuter la page.
La page s'affiche avec une grille d'informations sur les livres.
Cliquez sur le lien Sélectionner situé à côté du premier livre.
Les commentaires sur le premier livre sont affichés dans une liste.
Cliquez sur le lien Sélectionner situé à côté du dernier livre.
Aucun commentaire n'est affiché parce qu'il n'y en a pas pour ce livre.
Utilisation de transformations pour restructurer des données XML
Le fichier .xml que vous avez utilisé au cours de cette procédure pas à pas est structuré afin que les propriétés de chaque élément soient exprimées par des attributs. Les fichiers .xml que vous utilisez sont souvent structurés différemment. Par exemple, dans un fichier .xml, les valeurs sont souvent créées comme des éléments avec un texte qui leur est propre.
Si l'un de vos fichiers .xml comporte des valeurs de propriété qui ne sont pas exprimées par des attributs, vous pouvez créer un fichier de transformation (.xslt) pour remettre en forme le fichier .xml dynamiquement afin que celui-ci soit compatible avec le contrôle XmlDataSource.
Dans cette partie de la procédure pas à pas, vous utiliserez un fichier .xml contenant les mêmes données que le fichier Bookstore.xml que vous avez utilisé précédemment. Toutefois, les données seront structurées différemment de celles du fichier Bookstore.xml, vous utiliserez donc une transformation pour les remettre en forme dynamiquement.
Pour commencer cette section, vous créerez un deuxième fichier .xml.
Pour créer le deuxième fichier .xml
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Data, puis cliquez sur AjouterNouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Fichier XML.
Dans la zone Nom, tapez Bookstore2.xml.
Cliquez sur Ajouter.
Un fichier .xml est créé et contient uniquement la directive XML.
Copiez les données XML suivantes, puis collez-les dans le fichier en remplaçant le contenu existant.
<?xml version="1.0" standalone="yes"?> <bookstore> <book ISBN="10-000000-001"> <title>The Iliad and The Odyssey</title> <price>12.95</price> <comments> <userComment rating="4"> Best translation I've read. </userComment> <userComment rating="2"> I like other versions better. </userComment> </comments> </book> <book ISBN="10-000000-999"> <title>Anthology of World Literature</title> <price>24.95</price> <comments> <userComment rating="3"> Needs more modern literature. </userComment> <userComment rating="4"> Excellent overview of world literature. </userComment> </comments> </book> <book ISBN="11-000000-002"> <title>Computer Dictionary</title> <price>24.95</price> <comments> <userComment rating="3"> A valuable resource. </userComment> </comments> </book> <book ISBN="11-000000-003"> <title>Cooking on a Budget</title> <price>23.95</price> <comments> <userComment rating="4">Delicious!</userComment> </comments> </book> <book ISBN="11-000000-004"> <title>Great Works of Art</title> <price>29.95</price> </book> </bookstore>Enregistrez le fichier Bookstore2.xml et fermez-le.
Vous avez maintenant besoin d'un fichier de transformation pour convertir les données du fichier Bookstore2.xml dans un format basé sur les attributs utilisé par le contrôle XmlDataSource.
Pour créer le fichier de transformation
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Data, puis cliquez sur AjouterNouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Fichier texte.
Il n'existe aucun modèle de fichier de transformation, vous pouvez donc le créer comme un fichier texte avec l'extension appropriée.
Dans la zone Nom, tapezBookstore.xsl.
Remarque :Assurez-vous d'utiliser l'extension .xsl.
Cliquez sur Ajouter.
Un fichier vierge est créé.
Copiez le code de transformation suivant, puis collez-le dans le fichier.
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msxsl="urn:schemas-microsoft-com:xslt" > <xsl:strip-space elements="*"/> <xsl:output method="xml" omit-xml-declaration="yes" indent="yes" standalone="yes" /> <xsl:template match="/"> <xsl:for-each select="bookstore"> <xsl:element name="bookstore"> <xsl:for-each select="book"> <xsl:element name="book"> <xsl:attribute name="ISBN"> <xsl:value-of select="@ISBN"/> </xsl:attribute> <xsl:attribute name="title"> <xsl:value-of select="title"/> </xsl:attribute> <xsl:attribute name="price"> <xsl:value-of select="price"/> </xsl:attribute> </xsl:element> </xsl:for-each> </xsl:element> </xsl:for-each> </xsl:template> </xsl:stylesheet>Enregistrez le fichier Bookstore2.xsl et fermez-le.
À partir de là, l'utilisation des données XML est tout à fait similaire à ce que vous avez fait précédemment au cours de cette procédure pas à pas, excepté que vous pouvez spécifier le fichier de transformation lorsque vous configurez le contrôle XmlDataSource. Pour la dernière partie de cette procédure pas à pas, vous créerez une page, puis répéterez certaines étapes de la première partie de la procédure. Toutefois, vous afficherez cette fois les données du fichier Bookstore2.xml.
Pour configurer l'accès aux données dans le fichier .xml
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de votre site Web, puis cliquez sur AjouterNouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
Dans la zone Nom, tapez Bookstore2.aspx.
Cliquez sur Ajouter.
Basculez en mode Design.
Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle XmlDataSource sur la page.
Dans le menu TâchesXmlDataSource, cliquez sur Configurer la source de données.
La boîte de dialogue Configurer la source de donnéess'affiche.
Dans la zone Fichier de données, tapez ~/App_Data/Bookstore2.xml.
Dans la zone Fichier de transformation, tapez ~/App_Data/Bookstore2.xsl.
Cliquez sur OK.
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 liste Choisir la source de données, cliquez sur XmlDataSource1.
Appuyez sur CTRL+F5 pour exécuter la page.
La page affiche les données XML dans une grille. Les données apparaîtront dans la grille de la même façon que sur la première page, bien que le format du fichier .xml sous-jacent soit différent cette fois.
Étapes suivantes
Cette procédure n'a illustré que l'utilisation de base d'un document XML et des transformations. Dans une application réelle, vous utiliserez le document XML beaucoup plus en profondeur. Voici quelques suggestions à ce sujet :
Création de transformations plus sophistiquées. Dans cette procédure, vous n'avez vu qu'un seul exemple d'utilisation des transformations. XSL est un langage puissant, avec une prise en charge élaborée non seulement de la création de pages HTML, mais pratiquement de tout type de transformation d'une structure XML en une autre structure.
Écriture de documents XML (plutôt que simple lecture). Le contrôle Xml facilite l'affichage du contenu d'un fichier XML dans une page Web ASP.NET. Cependant, il se peut que vous préfériez créer ou modifier vous-même les fichiers XML. Pour plus d'informations, consultez Documents et données XML. Pour obtenir un exemple d'écriture dans un fichier XML, consultez Procédure pas à pas : affichage et traçage des publicités avec le contrôle AdRotator.
Voir aussi
Tâches
Procédure pas à pas : affichage de données hiérarchiques dans un contrôle TreeView
Procédure pas à pas : création d'une page Web de base dans Visual Web Developer