Freigeben über

Exemplarische Vorgehensweise: Anzeigen eines XML-Dokuments in einer Web Forms-Seite mithilfe von Transformationen

  • Artikel

Aktualisiert: November 2007

In dieser exemplarische Vorgehensweise wird veranschaulicht, wie Informationen von einem XML-Dokument auf einer Webseite angezeigt werden. In der exemplarischen Vorgehensweise erstellen Sie eine einfache XML-Datei. Anschließend wird der Inhalt der XML-Datei mithilfe eines ASP.NET-Serversteuerelements und einer XSLT-Transformation auf einer Webseite angezeigt.

Hinweis:

Sie können auch eine XML-Datei als Datenquelle verwenden und ihren Inhalt mithilfe von Steuerelementen anzeigen, z. B: mit dem GridView-Steuerelement. Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen einer Webseite zum Anzeigen von XML-Daten.

Zum Anzeigen von XML-Informationen auf einer Webseite müssen Sie Formatierungs- und Anzeigeinformationen angeben. Es müssen Elemente zum Anzeigen der Informationen angegeben werden, wie beispielsweise table-Elemente oder p-Elemente. Außerdem müssen Sie angeben, wie Daten aus der XML-Datei in diese Tags passen sollen. Beispielsweise kann jedes Element der XML-Datei als Tabellenzeile angezeigt werden.

Sie können diese Anweisungen angeben, indem Sie Code auf einer ASP.NET-Seite zum Analysieren der XML-Datei verwenden und die entsprechenden HTML-Tags mit den Daten füllen. Diese Vorgehensweise kann zeitaufwendig und schwer zu verwalten sein, ist jedoch auch leistungsstark und ermöglicht eine präzise programmgesteuerte Kontrolle der XML-Datei.

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, die einer HTML-Seite ähnelt. Die Vorlage gibt an, 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. So können Sie die 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 diese auf die XML-Datei anwenden. Dadurch wird die XML-Datei verarbeitet, indem sie entsprechend einer der XSL-Dateien transformiert wird. Das Ergebnis ist eine neue Datei, in der die XML-Informationen entsprechend der Transformationsdatei formatiert sind.

Diesen Prozess können Sie ebenfalls programmgesteuert ausführen. Sie können aber auch die Vorteile des Xml-Serversteuerelements nutzen. (Eine Übersicht finden Sie unter XML-Webserver-Steuerelement (Visual Studio).) Dieses Steuerelement hat auf der ASP.NET-Webseite die Funktion eines Platzhalters. Die Eigenschaften des Steuerelements können auf eine bestimmte XML-Datei und XSL-Transformation festgelegt werden. Bei der Verarbeitung der Seite werden die XML-Informationen vom Steuerelement gelesen, die Transformation angewendet und die Ergebnisse angezeigt.

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

In dieser exemplarische Vorgehensweise wird die Verwendung des Xml-Serversteuerelements zur Anzeige von XML-Informationen mithilfe von XSL-Transformationen beschrieben. Das folgende Szenario umfasst:

  • 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:

    Diese Dateien stehen als Teil der exemplarischen Vorgehensweise zur Verfügung.

Sie erstellen eine Webseite, auf der Benutzer XML-Informationen auf zwei verschiedene Arten anzeigen können. Die Seite enthält das Kontrollkästchen Nur Kopfzeilen, das standardmäßig aktiviert ist. Bei der Standardtransformation handelt es sich daher um die Transformation, mit der nur die Kopfzeilen der E-Mail-Nachrichten angezeigt werden. Wenn Benutzer das Kontrollkästchen deaktivieren, werden die XML-Informationen erneut mit den vollständigen E-Mail-Nachrichten angezeigt.

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

  • Visual Studio 2008 oder Visual Web Developer.

Sie sollten auch über allgemeine Kenntnisse über die Arbeit mit Visual Web Developer verfügen. Eine Einführung in Visual Web Developer finden Sie unter Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer.

Erstellen einer Website und einer Webseite

In diesem Teil der exemplarischen Vorgehensweise erstellen Sie eine Website und fügen dieser eine neue Seite hinzu. Für diese exemplarische Vorgehensweise erstellen Sie eine Dateisystem-Website, für Sie nicht mit IIS (Microsoft Internetinformationsdienste) arbeiten müssen. Sie erstellen stattdessen die Seite im lokalen Dateisystem und führen diese auch darin aus.

So erstellen Sie eine Dateisystem-Website

  1. Öffnen Sie Visual Web Developer.

  2. Klicken Sie im Menü Datei auf Neue Website.

  3. Wählen Sie unter Von Visual Studio installierte Vorlagen die Option ASP.NET-Website aus.

  4. Wählen Sie im Feld Speicherort die Option Dateisystem aus, und geben Sie den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

    Geben Sie zum Beispiel den Ordnernamen C:\WebSites ein.

  5. Klicken Sie in der Liste Sprache auf Visual Basic oder auf Visual C#.

  6. Klicken Sie auf OK.

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

In diesem Teil der exemplarischen Vorgehensweise erstellen Sie eine XML-Datei und zwei XSLT-Dateien.

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

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner App_Data, und klicken Sie dann auf Neues Element hinzufügen.

    Hinweis:

    Wenn Sie die XML-Datei in den Ordner App_Data verschieben, verfügt sie automatisch über die erforderlichen Berechtigungen, damit ASP.NET die Datei zur Laufzeit lesen und in sie schreiben kann. Zusätzlich wird die Datei vor der Darstellung in einem Browser geschützt, da der Ordner App_Data als nicht durchsuchbar gekennzeichnet ist.

  2. Klicken Sie unter Von Visual Studio installierte Vorlagen auf XML-Datei.

  3. Geben Sie Emails.xml im Feld Name ein.

  4. Klicken Sie auf Hinzufügen.

    Eine neue XML-Datei wird erstellt, die nur die XML-Direktive enthält.

  5. Kopieren Sie die folgenden XML-Daten, und fügen Sie sie in die Datei ein. Überschreiben Sie dabei den bereits vorhandenen Inhalt der Datei.

    <?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. Speichern und schließen Sie die Datei.

Anschließend 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 den Ordner App_Data, und klicken Sie dann auf Neues Element hinzufügen.

  2. Klicken Sie unter Von Visual Studio installierte Vorlagen auf Textdatei.

    Es sind keine Vorlagen für eine Transformationsdatei vorhanden. Daher können Sie die Transformationsdatei als Textdatei mit der richtigen Erweiterung erstellen.

  3. Geben Sie Email_headers.xslt im Feld Name ein.

    Hinweis:

    Vergewissern Sie sich, dass Sie die Erweiterung .xslt verwenden.

  4. Klicken Sie auf Hinzufügen.

    Eine neue leere Datei wird erstellt.

  5. Kopieren Sie den folgenden Beispielcode, und fügen Sie ihn 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"><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>
    Hinweis:

    Sie können diese Vorlage beliebig anpassen. Sie können z. B. die Farben, Schriftgrößen, Stile oder andere Features ä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 den folgenden Beispielcode 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>
<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. Speichern und schließen Sie die Datei.

Hinzufügen des XML-Steuerelements zu der Seite

Da Sie nun über eine XML-Datei und zwei Transformationen verfügen, können Sie mit diesen Dateien Informationen auf einer Webseite anzeigen. Verwenden Sie hierfür ein Xml-Serversteuerelement.

So fügen Sie ein XML-Steuerelement hinzu

  1. Öffnen Sie die Seite Default.aspx, oder wechseln Sie zu dieser Seite.

  2. Wechseln Sie in die Entwurfsansicht.

  3. Ziehen Sie in der Toolbox aus der Registerkarte Standard ein Xml-Steuerelement auf die Seite.

    Der Seite wird ein graues Feld hinzugefügt, das das Xml-Steuerelement darstellt.

  4. Wählen Sie das Steuerelement aus, und legen Sie im Fenster Eigenschaften folgende Eigenschaften fest.

    Eigenschaften

    Einstellung

    DocumentSource

    ~/App_Data/Emails.xml

    TransformSource

    ~/App_Data/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 diesem Teil der exemplarischen Vorgehensweise verwenden Sie ein Kontrollkästchen, damit Benutzer zwischen Transformationen wechseln können. Das Xml-Steuerelement wendet derzeit eine Transformation an, die nur die E-Mail-Nachrichtenheader anzeigt.

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

  1. Bewegen Sie den Cursor vor das Xml-Steuerelement, und drücken Sie dann mehrmals die EINGABETASTE, um über dem Xml-Steuerelement Platz zu schaffen.

  2. Ziehen Sie in der Toolbox aus der Registerkarte Standard ein CheckBox-Steuerelement auf die Seite, und platzieren Sie es oberhalb des Xml-Steuerelements.

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

    Eigenschaften

    Einstellung

    Text

    Headers only

    Checked

    True

    AutoPostBack

    True Dadurch wird das Formular gesendet und verarbeitet, sobald der Benutzer auf das Kontrollkästchen klickt.

  4. Doppelklicken Sie auf das CheckBox-Steuerelement.

    Der Code-Editor wird mit einem Handler für das CheckChanged-Ereignis des CheckBox-Steuerelements mit dem Namen CheckBox1_CheckedChanged geöffnet.

  5. Fügen Sie Code hinzu, der Transformationen je nach Status des Kontrollkästchens zwischen Email_headers.xslt und Email_all.xslt umschaltet.

    Im folgenden Codebeispiel wird der vollständige CheckChanged-Handlers dargestellt.

    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";
    }
}

Testen

Nun können Sie die Transformationen in Aktion sehen.

So testen Sie die Transformationen

  1. Drücken Sie STRG+F5, um die 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 realen Anwendung müssen Sie mit dem XML-Dokument oft intensiver arbeiten. Im Folgenden finden Sie einige Vorschläge zur weiteren Untersuchung:

  • Erstellen Sie anspruchsvollere Transformationen. In dieser exemplarischen Vorgehensweise wurde nur ein Beispiel für das Verwenden von Transformationen dargestellt. XSL ist eine leistungsstarke Sprache, die nicht nur das Erstellen von HTML-Seiten ausgezeichnet unterstützt, sondern auch nahezu jede Art von Transformation von XML in eine andere Struktur.

  • Wenden Sie Transformationen programmgesteuert an. In dieser exemplarischen Vorgehensweise haben Sie das Xml-Webserver-Steuerelement genutzt, um Transformationen auf rohe XML-Daten anzuwenden. Es ist sinnvoll, diese Aktionen in der Anwendung selbst auszuführen, wenn beispielsweise die Verwendung eines Xml-Steuerelements in der Anwendung sehr umständlich ist. Ausführliche Informationen finden Sie unter XSLT-Transformationen mit der XslTransform-Klasse.

  • Schreiben Sie XML-Dokumente, statt sie nur zu lesen. Mit dem Xml-Steuerelement können Sie auf eine einfache Art und Weise den Inhalt einer XML-Datei auf einer ASP.NET-Webseite anzeigen. Sie möchten jedoch eventuell XML-Dateien auch selbst erstellen oder ändern. Ausführliche Informationen finden Sie unter XML-Dokumente und XML-Daten. Ein Beispiel für das Schreiben in eine XML-Datei finden Sie unter Exemplarische Vorgehensweise: Anzeigen und Nachverfolgen von Werbung mit dem AdRotator-Steuerelement.

Siehe auch

Weitere Ressourcen

XML-Webserver-Steuerelement (Visual Studio)