Exemplarische Vorgehensweise: Anzeigen eines XML-Dokuments in einer Web Forms-Seite mit Hilfe von Transformationen unter Verwendung von Visual J#

  • Artikel

Da immer mehr Informationen im Format von XML-Dokumenten zur Verfügung gestellt werden, ist es wahrscheinlich, dass Sie mit diesen Dokumenten arbeiten müssen. Diese exemplarische Vorgehensweise beschreibt, wie Sie Informationen auf einer Web Forms-Seite einfach von einem "nicht strukturierten" XML-Dokument anzeigen können, d. h. von einem XML-Dokument, das keine relationalen Daten darstellt.

XML und XSL in Web Forms-Seiten

Informationen in einer XML-Datei sind "roh"; sie enthalten nur Daten, aber keinen Hinweis auf die Formatierung, Anzeige, usw. Wenn Sie XML-Informationen in einer Web Forms-Seite anzeigen möchten, müssen Sie Format- und Anzeigeinformationen angeben, z. B. die <TABLE>-Tags, <P>-Tags, usw., die zum Anzeigen der Informationen verwendet werden sollen. Außerdem müssen Sie angeben, wie Daten aus der XML-Datei in diese Tags passen sollen. Soll z. B. jedes Element in der XML-Datei als Tabellenzeile angezeigt werden?

Sie können diese Anweisungen angeben, indem Sie eine Web Forms-Seite erstellen, mit Hilfe von Code die XML-Datei analysieren und Daten in die entsprechenden HTML-Tags füllen. Diese Vorgehensweise ist jedoch mühsam und unflexibel. (Sie ist allerdings auch leistungsstark und gibt Ihnen programmgesteuerte Kontrolle über die XML-Datei.)

XSL-Transformationen

Eine weit bessere Möglichkeit ist die Verwendung der XSL-Transformationssprache und das Erstellen von "Transformationen" oder XSL-Dateien. Eine XSL-Transformation enthält folgende Informationen:

  • Eine Vorlage, also eine HTML-Seite mit den entsprechenden Tags, die angibt, wie die XML-Informationen angezeigt werden sollen.
  • XSL-Verarbeitungsanweisungen, die genau angeben, wie Informationen von der XML-Datei in die Vorlage passen.

Sie können mehrere Transformationen definieren und Sie auf dieselbe XML-Datei anwenden. Auf diese Weise können Sie XML-Informationen auf verschiedene Arten verwenden, unterschiedlich anzeigen, verschiedene Daten aus der XML-Datei auswählen usw.

Nachdem Sie XSL-Transformationen erstellt haben, müssen Sie sie auf die XML-Datei anwenden, d. h. Sie verarbeiten die XML-Datei, indem Sie sie entsprechend einer der XSL-Dateien transformieren. Sie erhalten eine neue Datei mit XML-Informationen, die entsprechend der Transformationsdatei formatiert sind.

Diesen Prozess können Sie ebenfalls programmgesteuert ausführen. Sie können aber auch die Vorteile des XML-Webserversteuerelements nutzen. (Eine Übersicht finden Sie unter XML-Webserversteuerelement.) Dieses Steuerelement fungiert als Platzhalter auf der Web Forms-Seite. Sie können für die Eigenschaften eine bestimmte XML-Datei und XSL-Transformation festlegen. Wenn die Seite verarbeitet wird, liest das Steuerelement die XML-Datei, wendet die Transformation an und zeigt die Ergebnisse an.

Weitere Informationen über XSL finden Sie unter XSLT-Transformationen mit der XslTransform-Klasse.

Ziele der exemplarischen Vorgehensweise

Diese exemplarische Vorgehensweise beschreibt die Verwendung des XML-Webserversteuerelements zur Anzeige von XML-Informationen mit Hilfe von XSL-Transformationen. Das Szenario ist einfach. Voraussetzungen:

  • Eine XML-Datei mit verschiedenen erfundenen E-Mail-Nachrichten.

  • Zwei XSL-Transformationen. Eine zeigt nur das Datum, den Absender und den Betreff der E-Mail-Nachrichten an. Die andere zeigt die gesamte E-Mail-Nachricht an.

    Hinweis   Alle diese Dateien stehen als Teil dieser exemplarischen Vorgehensweise zur Verfügung.

Sie erstellen eine Web Forms-Seite, mit der Benutzer XML-Informationen auf zwei verschiedene Arten anzeigen können. Die Seite enthält das Kontrollkästchen Headers only, das standardmäßig aktiviert ist. Daher zeigt die Standardtransformation nur die E-Mail-Nachrichtenheader an. Wenn Benutzer das Kontrollkästchen deaktivieren, werden die XML-Informationen erneut mit den vollständigen E-Mail-Nachrichten angezeigt.

Wenn die Seite nur die Header anzeigt, könnte dies wie folgt aussehen:

Wenn Benutzer das Kontrollkästchen deaktivieren, ändert sich die Seite, so dass sie etwa folgendermaßen aussieht:

Für das Abschließen dieser exemplarischen Vorgehensweise benötigen Sie ausreichende Berechtigungen für das Erstellen von ASP.NET-Webanwendungsprojekten auf dem Computer mit dem Webserver.

Als Teil der exemplarischen Vorgehensweise führen Sie Folgendes aus:

  • Erstellen Sie ein neues Webanwendungsprojekt und eine Web Forms-Seite.
  • Fügen Sie dem Projekt die XML-Datei und die beiden XSL-Transformationsdateien hinzu.
  • Fügen Sie der Web Forms-Seite ein XML-Webserversteuerelement hinzu, und legen Sie es so fest, dass die XML-Datei und eine Transformation angezeigt werden.
  • Fügen Sie Steuerelemente und Code hinzu, mit denen der Benutzer Transformationen ändern kann, die auf die XML-Datei angewendet werden.

Erstellen von Projekt und Formular

Der erste Schritt besteht darin, eine Webanwendung und eine Web Forms-Seite zu erstellen.

So erstellen Sie das Projekt und das Formular

  1. Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt.
  2. Führen Sie im Dialogfeld Neues Projekt Folgendes aus:

    1. Wählen Sie im Bereich Projekttypen die Option Visual J#-Projekte.

    2. Klicken Sie im Bereich Vorlagen auf ASP.NET-Webanwendung.

    3. Geben Sie im Feld Speicherort den vollständigen URL der Anwendung einschließlich der Zeichenfolge http:// an, sowie den Namen des Servers und des Projekts. Auf dem Webserver muss IIS Version 5 oder höher sowie .NET Framework installiert sein. Wenn auf dem Computer IIS installiert ist, können Sie https://localhost als Server angeben.

      Wenn Sie auf OK klicken, wird im Stammverzeichnis des angegebenen Webservers ein neues Web Forms-Projekt erstellt. Zusätzlich wird im Web Forms-Designer in der Entwurfsansicht eine neue Web Forms-Seite mit der Bezeichnung WebForm1.aspx angezeigt.

      Tipp   Bei Problemen mit der Erstellung eines Webanwendungsprojekts finden Sie weitere Informationen unter Dialogfeld "Webzugriffsfehler".

Hinzufügen der XML-Datei und der XSL-Transformationen

In dieser exemplarischen Vorgehensweise wird angenommen, dass Sie mit einer vorhandenen XML-Datei und zwei vorhandenen XSL-Transformationsdateien arbeiten. In einer echten Anwendung würden Sie sie selbst erstellen oder von einer Quelle (vielleicht einer anderen Anwendung) erhalten. Damit Sie sie nicht erstellen oder von anderen Quellen beziehen müssen, sind diese Dateien Bestandteil dieser exemplarischen Vorgehensweise. Durch die folgenden Schritte (die nicht Teil einer echten Anwendung sind) werden diese Dateien zur Verfügung gestellt, damit Sie mit der exemplarischen Vorgehensweise fortfahren können.

So fügen Sie dem Projekt die XML-Datei hinzu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, zeigen Sie auf Hinzufügen, und wählen Sie dann Neues Element hinzufügen aus.

    Das Dialogfeld Neues Element hinzufügen wird angezeigt.

  2. Wählen Sie im Bereich Vorlagen die Option XML-Datei.

  3. Ändern Sie im Feld Name den Namen der XML-Datei in Emails.xml.

    Hinweis   Sie können der XML-Datei einen beliebigen Namen geben. Wenn Sie einen anderen Namen verwenden, notieren Sie sich den Namen, damit Sie ihn später entsprechend verwenden können.

    Der XML-Editor wird mit einer neuen XML-Datei geöffnet, die eine XML-Direktive oben in der Datei enthält.

  4. Wählen Sie die XML-Direktive (und beliebige andere Elemente in der Datei) und löschen Sie sie.

  5. Kopieren Sie die folgenden XML-Informationen, und fügen Sie diese mit Hilfe des Befehls Als HTML einfügen in die Datei ein:

    <?xml version="1.0" ?>
<MESSAGES>
   <MESSAGE id="101">
      <TO>JoannaF</TO>
      <FROM>LindaB</FROM>
      <DATE>04 September 2001</DATE>
      <SUBJECT>Meeting tomorrow</SUBJECT>
      <BODY>Can you tell me what room the committee meeting will be in?</BODY>
   </MESSAGE>
   <MESSAGE id="109">
      <TO>JoannaF</TO>
      <FROM>JohnH</FROM>
      <DATE>04 September 2001</DATE>
      <SUBJECT>I updated the site</SUBJECT>
      <BODY>I've 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 2001</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. Speichern und schließen Sie die Datei.

Als nächstes fügen Sie dem Projekt zwei XSL-Transformationen hinzu.

So fügen Sie dem Projekt XSL-Transformationen hinzu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, zeigen Sie auf Hinzufügen, und wählen Sie dann Neues Element hinzufügen aus.

    Das Dialogfeld Neues Element hinzufügen wird angezeigt.

  2. Wählen Sie im Bereich Vorlagen die Option XSLT-Datei.

  3. Ändern Sie im Feld Name den Namen der Datei in Email_headers.xslt.

    Hinweis   Sie können der XML-Datei einen beliebigen Namen geben. Wenn Sie einen anderen Namen verwenden, notieren Sie sich den Namen, damit Sie ihn später entsprechend verwenden können.

    Der XML-Editor wird mit einigen XSLT-Direktiven und Elementen geöffnet.

  4. Wählen Sie alles in der Datei aus, und löschen Sie es.

  5. Kopieren Sie Folgendes, und fügen Sie es mit Hilfe des Befehls Als HTML einfügen in die Datei ein:

    <?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"><B>Date</B></TD>
      <TD class="heading"><B>From</B></TD>
      <TD class="heading"><B>Subject</B></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">
         <B><xsl:value-of select="SUBJECT"/></B>
      </TD>
   </TR>
   </xsl:for-each>
</TABLE>



</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>

    Hinweis   Sie können diese Vorlage beliebig anpassen. Sie können z. B. die Farben, Schriftgrößen, Stile oder andere Funktionen ändern.

  6. Speichern und schließen Sie die Datei.

  7. Wiederholen Sie die Schritte 1 bis 4, aber nennen Sie die Datei diesmal Email_all.xslt.

  8. Fügen Sie Folgendes mit Hilfe des Befehls Als HTML einfügen in die Datei Email_all.xslt ein:

    <?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<HTML>
<BODY>
<FONT face="Verdana" size="2">
<TABLE cellspacing="10" cellpadding="4">
   <xsl:for-each select="MESSAGES/MESSAGE">
   <TR bgcolor="#CCCCCC">
   <TD class="info">
         Date: <B><xsl:value-of select="DATE"/></B><BR></BR>
         To: <B><xsl:value-of select="TO"/></B><BR></BR>
         From: <B><xsl:value-of select="FROM"/></B><BR></BR>
         Subject: <B><xsl:value-of select="SUBJECT"/></B><BR></BR>
         <BR></BR><xsl:value-of select="BODY"/>
       </TD>
   </TR>
   </xsl:for-each>
</TABLE>



</FONT>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>

    Hinweis   Sie können diese Vorlage beliebig anpassen. Sie können z. B. die Farben, Schriftgrößen, Stile oder andere Funktionen ändern.

  9. Speichern und schließen Sie die Datei.

Hinzufügen des XML-Webserversteuerelements zu einer Web Forms-Seite

Da Sie nun über eine XML-Datei und zwei Transformationen verfügen, können Sie mit diesen Dateien Informationen in einer Web Forms-Seite anzeigen. Verwenden Sie hierfür ein XML-Webserversteuerelement.

So fügen Sie ein XML-Steuerelement hinzu

  1. Öffnen oder gehen Sie zur Web Forms-Seite, die standardmäßig erstellt wurde, als Sie das Webanwendungsprojekt erstellt haben.

  2. Ziehen Sie in der Toolbox von der Registerkarte Web Forms ein XML-Steuerelement auf die Seite.

  3. Wählen Sie das Steuerelement, und legen Sie im Eigenschaftenfenster folgende Eigenschaften fest:

    Eigenschaft Einstellung
    DocumentSource Emails.xml
    TransformSource Email_headers.xslt

    Somit zeigt das XML-Steuerelement standardmäßig nur die E-Mail-Nachrichtenheader an.

Hinzufügen von Steuerelementen zum Ändern von Transformationen

In dieser exemplarischen Vorgehensweise verwenden Sie ein Kontrollkästchen, damit Benutzer zwischen Transformationen umschalten können. Standardmäßig wendet das XML-Steuerelement eine Transformation an, die nur die E-Mail-Nachrichtenheader anzeigt.

So fügen Sie ein Kontrollkästchen zum Anwenden einer anderen Transformation hinzu

  1. Ziehen Sie in der Toolbox von der Registerkarte Web Forms ein Checkbox-Steuerelement auf das Formular.

  2. Legen Sie folgende Eigenschaften des CheckBox-Steuerelements fest:

    Eigenschaft Einstellung
    Text Headers only
    Checked True
    AutoPostBack True. Dadurch wird das Formular gesendet und verarbeitet, sobald der Benutzer auf das Feld klickt.

  3. Klicken Sie auf das Kontrollkästchen.

  4. Der Code-Editor wird mit einem Gerüsthandler für das CheckChanged-Ereignis des CheckBox-Steuerelements geöffnet.

  5. Fügen Sie Code hinzu, der Transformationen abhängig vom Status des Kontrollkästchens zwischen Email_headers.xslt und Email_all.xslt umschaltet. Der gesamte CheckChanged-Handler sollte folgendermaßen aussehen:

    // Visual J#
private void CheckBox1_CheckedChanged (Object sender, System.EventArgs e)
{
   if (CheckBox1.get_Checked())
   {
      Xml1.set_TransformSource("email_headers.xslt");
   }
   else
   {
      Xml1.set_TransformSource("email_all.xslt");
   }
}

Testen

Nun können Sie die Transformationen in Aktion sehen.

So testen Sie die Transformationen

  1. Drücken Sie F5, um die Web Forms-Seite auszuführen.

    Standardmäßig wird nur das Datum, der Absender und die Betreffzeile der E-Mail-Nachrichten angezeigt.

  2. Deaktivieren Sie das Kontrollkästchen Headers only.

    Die E-Mail-Nachrichten werden erneut angezeigt, jedoch mit einem anderen Layout und dem vollständigen Text.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurden nur die Grundlagen für die Arbeit mit einem XML-Dokument und mit Transformationen beschrieben. In einer echten Anwendung müssen Sie mit dem XML-Dokument oft intensiver arbeiten. Nachfolgend einige Vorschläge zur weiteren Untersuchung:

  • Erstellen von anspruchsvolleren Transformationen   In dieser exemplarischen Vorgehensweise haben Sie nur ein Beispiel für die Verwendung von Transformationen gesehen. XSL ist eine leistungsstarke Sprache mit anspruchsvoller Unterstützung nicht nur für das Erstellen von HTML-Seiten. Praktisch jede Art von Transformation von XML in eine andere Struktur wird optimal unterstützt. Ausführlichere Informationen finden Sie im XSLT-Entwicklerhandbuch von Microsoft.
  • Programmgesteuertes Anwenden von Transformationen   In dieser exemplarischen Vorgehensweise nutzten Sie den Vorteil des XML-Webserversteuerelements, um Transformationen auf rohe XML-Daten anzuwenden. Es ist sinnvoll, diese Aktionen in der Anwendung selbst auszuführen (weil die Verwendung eines XML-Steuerelements in Ihrer Anwendung möglicherweise sehr umständlich ist). Ausführliche Informationen finden Sie unter XSLT-Transformationen mit der XslTransform-Klasse.
  • Schreiben von XML-Dokumenten (anstatt sie nur zu lesen)   Das XML-Steuerelement erleichtert die Anzeige des Inhalts einer XML-Datei in einer Web Forms-Seite. Sie möchten jedoch eventuell XML-Dateien auch selbst erstellen oder ändern. Ausführliche Informationen finden Sie unter Verwenden von XML in .NET Framework.

Siehe auch

XML-Webserversteuerelement | Exemplarische Vorgehensweisen für Web Forms