Partager via

Procédure pas à pas : affichage d'un document XML dans une page Web Forms à l'aide des transformations

  • Article

Mise à jour : novembre 2007

Cette procédure pas à pas illustre comment afficher des informations sur une page Web à partir d'un document XML. Dans la procédure pas à pas, vous apprendrez à créer un fichier XML simple. Vous utiliserez ensuite un contrôle serveur ASP.NET et une transformation XSLT pour afficher le contenu du fichier XML sur la page Web.

Remarque :

Vous pouvez également utiliser un fichier XML comme source de données et afficher son contenu à l'aide de contrôles tels que le contrôle GridView. Pour plus d'informations, consultez Procédure pas à pas : création d'une page Web pour afficher des données XML.

Pour afficher des informations XML sur une page Web, vous devez fournir des informations de mise en forme et d'affichage. Par exemple, vous devez fournir les éléments table, les éléments p, ou les autres éléments que vous souhaitez utiliser pour afficher les informations. De plus, vous devez fournir des instructions sur la façon dont les données du fichier XML sont insérées dans ces balises. Par exemple, vous pouvez décider d'afficher les éléments du fichier XML sous forme d'une ligne de table.

Pour fournir ces instructions, vous pouvez utiliser le code d'une page ASP.NET pour analyser le fichier XML et renseigner les données dans les balises HTML appropriées. Cette approche peut s'avérer relativement longue et difficile à gérer, mais elle constitue une méthode efficace pour assurer un contrôle par programmation rigoureux du fichier XML.

Une bien meilleure solution consiste à utiliser le langage de transformation XSL et à créer des transformations ou fichiers XSL. Une transformation XSL contient les informations suivantes :

  • Un modèle, similaire à une page HTML. Le modèle indique comment les informations XML doivent être affichées.

  • Les instructions de traitement XSL, qui spécifient exactement comment les informations du fichier XML sont insérées dans le modèle.

Vous pouvez définir plusieurs transformations et les appliquer au même fichier XML. En procédant de la sorte, vous pouvez utiliser les informations XML de différentes façons, en les affichant différemment, en sélectionnant plusieurs données du fichier XML, etc.

Après avoir créé des transformations XSL, vous devez les appliquer au fichier XML. Autrement dit, vous traitez le fichier XML en le transformant d'après l'un des fichiers XSL. La sortie est constituée d'un nouveau fichier, dont les informations XML sont mises en forme conformément au fichier de transformation.

Cette fois encore, il s'agit d'un processus que vous pouvez exécuter par programme. Cependant, vous pouvez également tirer parti du contrôle serveur Xml. (Pour une vue d'ensemble, consultez Contrôle serveur Web XML (Visual Studio)). Ce contrôle fonctionne comme un emplacement réservé sur votre page ASP.NET. Vous pouvez définir ses propriétés dans un fichier XML spécifique et dans une transformation XSL. Lorsque la page est traitée, le contrôle lit le XML, applique la transformation et affiche les résultats correspondants.

Pour plus d'informations sur l'Assistant Débogage managé (MDA), consultez Transformations XSLT avec la classe XslTransform.

Cette procédure illustre comment utiliser le contrôle serveur Xml pour afficher les informations XML à l'aide de transformations XSL. Ce scénario met en scène les éléments suivants :

  • Un fichier XML contenant plusieurs messages électroniques fictifs.

  • Deux transformations XSL. L'une n'affiche que la date, l'expéditeur et l'objet des messages électroniques. L'autre affiche la totalité du message électronique.

    Remarque :

    Tous ces fichiers sont fournis dans le cadre de la procédure.

Vous apprendrez à créer une page Web permettant aux utilisateurs d'afficher les informations XML de deux façons différentes. La page contient une case à cocher En-têtes uniquement, activée par défaut. Par conséquent, la transformation par défaut est celle qui affiche uniquement les en-têtes de message électronique. Si l'utilisateur désactive la case à cocher, les informations XML sont affichées de nouveau avec les messages électroniques complets.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin de :

  • Visual Studio 2008 ou Visual Web Developer.

Il est également nécessaire d'être familiarisé avec l'utilisation de Visual Web Developer. Pour une présentation de Visual Web Developer, consultez Procédure pas à pas : création d'une page Web de base dans Visual Web Developer.

Création d'un site et d'une page Web

Dans cette partie de la procédure pas à pas, vous créerez un site Web et ajouterez une nouvelle page à celui-ci. Pour cette procédure pas à pas, vous créerez un site Web de système de fichiers qui ne nécessite pas que vous utilisiez les Microsoft Internet Information Services (IIS). À la place, vous créerez et exécuterez votre page dans le système de fichiers local.

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

  1. Ouvrez Visual Web Developer.

  2. Dans le menu Fichier, cliquez sur Nouveau site Web.

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

  4. Dans la zone Emplacement, sélectionnez Système de fichiers, puis tapez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.

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

  5. Dans la liste Langage, cliquez sur Visual Basic ou Visual C#.

  6. Cliquez sur OK.

Ajout du fichier XML et des transformations XSL

Dans cette partie de la procédure pas à pas, vous créerez un fichier XML et deux fichiers XSLT.

Pour ajouter le fichier XML à votre projet

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Data, puis cliquez sur AjouterNouvel élément.

    Remarque :

    Lorsque vous mettez le fichier XML dans le dossier App_Data, il dispose automatiquement des autorisations nécessaires pour permettre à ASP.NET de lire et d'écrire dans le fichier au moment de l'exécution. De plus, cela empêche l'affichage du fichier dans un navigateur, étant donné que le dossier App_Data est marqué comme non consultable.

  2. Sous Modèles Visual Studio installés, cliquez sur Fichier XML.

  3. Dans la zone Nom, tapez Emails.xml.

  4. Cliquez sur Ajouter.

    Un fichier XML est créé et contient uniquement la directive XML.

  5. Copiez les données XML suivantes, puis collez-les dans le fichier en remplaçant le contenu existant.

    <?xml version="1.0" ?>
  <messages>
    <message id="101">
      <to>JoannaF</to>
      <from>LindaB</from>
      <date>04 September 2007</date>
      <subject>Meeting tomorrow</subject>
      <body>Can you tell me what room where the committee meeting will be in?</body>
   </message>
   <message id="109">
      <to>JoannaF</to>
      <from>JohnH</from>
      <date>04 September 2007</date>
      <subject>I updated the site</subject>
      <body>I posted the latest updates to our internal Web site, as you requested. Let me know if you have any comments or questions. -- John
      </body>
   </message>
   <message id="123">
      <to>JoannaF</to>
      <from>LindaB</from>
      <date>05 September 2007</date>
      <subject>re: Meeting tomorrow</subject>
      <body>Thanks. By the way, do not forget to bring your notes from the conference. See you later!</body>
   </message>
</messages>

  6. Enregistrez le fichier et fermez-le.

Maintenant, vous allez ajouter deux transformations XSL à votre projet.

Pour ajouter des transformations XSL à votre projet

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Data, puis cliquez sur AjouterNouvel élément.

  2. Sous Modèles Visual Studio installés, cliquez sur Fichier texte.

    Il n'existe aucun modèle destiné à un fichier de transformation. Par conséquent, vous pouvez le créer comme un fichier texte, doté de l'extension appropriée.

  3. Dans la zone Nom, tapez Email_headers.xslt.

    Remarque :

    Assurez-vous que vous utilisez l'extension .xslt.

  4. Cliquez sur Ajouter.

    Un fichier vierge est créé.

  5. Copiez l'exemple de code suivant et collez-le dans le fichier.

    <?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    version="1.0">
<xsl:template match="/">
<html>
<body>
<table cellspacing="3" cellpadding="8">
   <tr bgcolor="#AAAAAA">
      <td class="heading"><strong>Date</strong></td>
      <td class="heading"><strong>From</strong></td>
      <td class="heading"><strong>Subject</strong></td>
   </tr>
   <xsl:for-each select="messages/message">
   <tr bgcolor="#DDDDDD">
       <td width="25%" valign="top">
         <xsl:value-of select="date"/>
       </td>
      <td width="20%" valign="top">
         <xsl:value-of select="from"/>
      </td>
       <td width="55%" valign="top">
         <strong><xsl:value-of select="subject"/></strong>
      </td>
   </tr>
   </xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
    Remarque :

    Vous pouvez modifier ce modèle à votre convenance ; par exemple, vous pouvez modifier les couleurs, les tailles de police, les styles, etc.

  6. Enregistrez le fichier et fermez-le.

  7. Répétez les étapes 1 à 4, mais, cette fois, nommez le fichier Email_all.xslt.

  8. Collez le code suivant dans le fichier Email_all.xslt.

    <?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    version="1.0">
<xsl:template match="/">
<html>
<body>
<table cellspacing="10" cellpadding="4">
  <xsl:for-each select="messages/message">
  <tr bgcolor="#CCCCCC">
  <td class="info">
    Date: <strong><xsl:value-of select="date"/></strong>
       <br /><br />
    To: <strong><xsl:value-of select="to"/></strong>
       <br /><br />
    From: <strong><xsl:value-of select="from"/></strong>
       <br /><br />
    Subject: <strong><xsl:value-of select="subject"/></strong>
       <br /><br />
    <br /><br />
    <xsl:value-of select="body"/>
  </td>
  </tr>
  </xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

  9. Enregistrez le fichier et fermez-le.

Ajout du contrôle XML à la page

Maintenant que vous disposez d'un fichier XML et de deux transformations, vous pouvez les utiliser pour afficher des informations dans une page Web. Pour cela, il vous suffit d'utiliser un contrôle serveur Xml.

Pour ajouter un contrôle XML

  1. Ouvrez ou basculez vers la page Default.aspx.

  2. Basculez en mode Design.

  3. À partir de l'onglet Standard de la Boîte à outils, faites glisser un contrôle XML sur la page.

    Une zone grise qui représente le contrôle XML est ajoutée à la page.

  4. Sélectionnez le contrôle et, dans la fenêtre Propriétés , définissez les propriétés suivantes.

    Propriété

    Paramètre

    DocumentSource

    ~/App_Data/Emails.xml

    TransformSource

    ~/App_Data/Email_headers.xslt

    Le contrôle XML affichera uniquement les en-têtes de messages électroniques par défaut.

Ajout de contrôles pour modifier les transformations

Dans cette partie de la procédure, vous allez utiliser une case à cocher pour permettre aux utilisateurs de basculer d'une transformation à l'autre. Le contrôle Xml applique actuellement une transformation qui n'affiche que les en-têtes de messages électroniques.

Pour ajouter une case à cocher afin d'appliquer une transformation différente

  1. Déplacez le curseur devant le contrôle XML, puis appuyez sur ENTRÉE plusieurs fois pour créer un espace au-dessus du contrôle XML.

  2. Sous l'onglet Standard de la boîte à outils, faites glisser un contrôle Checkbox sur la page, au-dessus du contrôle XML.

  3. Définissez les propriétés suivantes du contrôle CheckBox.

    Propriété

    Paramètre

    Text

    En-têtes uniquement

    Checked

    True

    AutoPostBack

    True Il en résulte la publication du formulaire et le traitement commence dès que l'utilisateur a activé la case.

  4. Double-cliquez sur le contrôle CheckBox.

    L'éditeur de code s'ouvre avec un gestionnaire pour l'événement CheckChanged du contrôle CheckBox, appelé CheckBox1_CheckedChanged.

  5. Ajoutez le code qui permet de basculer de la transformation Email_headers.xslt à la transformation Email_all.xslt ou inversement, selon l'état de la case à cocher.

    L'exemple de code présente l'aspect général du gestionnaire d'événements CheckChanged.

    Protected Sub CheckBox1_CheckedChanged(ByVal sender As _
      System.Object, ByVal e As System.EventArgs) _      Handles CheckBox1.CheckedChanged
    If CheckBox1.Checked Then
        Xml1.TransformSource = "~/App_Data/email_headers.xslt"
    Else
        Xml1.TransformSource = "~/App_Data/email_all.xslt"
    End If
End Sub

    protected void CheckBox1_CheckedChanged(object sender, 
        System.EventArgs e)
{
    if (CheckBox1.Checked)
    {
        Xml1.TransformSource = "~/App_Data/email_headers.xslt";
    }
     else
    {
        Xml1.TransformSource = "~/App_Data/email_all.xslt";
    }
}

Test

Vous pouvez maintenant voir les transformations en action.

Pour tester les transformations

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

    Par défaut ne sont affichés que la date, l'expéditeur et l'objet des messages électroniques.

  2. Désactivez la case à cocher En-têtes uniquement.

    Les messages électroniques sont réaffichés, mais cette fois avec une présentation différente et avec la totalité du texte.

É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 généralement le document XML de façon plus détaillée. Voici quelques suggestions qui vous permettront de procéder à un examen plus approfondi :

  • Créez des 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.

  • Appliquez des transformations par programme. Dans cette procédure, vous avez tiré parti du contrôle serveur Web Xml pour effectuer l'application des transformations aux données XML brutes. Vous pourrez trouver utile dans votre application de faire ce travail vous-même, par exemple s'il n'est guère pratique dans votre application d'utiliser un contrôle Xml. Pour plus d'informations, consultez Transformations XSLT avec la classe XslTransform.

  • Écrivez des documents XML, au lieu de simplement les lire. 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

Autres ressources

Contrôle serveur Web XML (Visual Studio)