Walkthrough: Displaying an XML Document in a Web Forms Page Using Transformations

  • Article

This walkthrough illustrates how to display information on a Web page from an XML document. In the walkthrough, you will create a simple XML file. You will then use an ASP.NET server control and an XSLT transformation to display the contents of the XML file on the Web page.

Note

You can also use an XML file as a data source and display its contents using controls such as the GridView control. For details, see Walkthrough: Creating a Web Page to Display XML Data.

To display XML information on a Web page, you must provide formatting and display information. For example, you must provide the table elements, p elements, or whatever you want to use to display the information. In addition, you must provide instructions for how the data from the XML file fits into these tags. For example, you might decide to display each element from the XML file as one table row.

One way to provide these instructions is to use code in an ASP.NET page to parse the XML file and fill the data into the appropriate HTML tags. This approach can be time-consuming and hard to maintain, but it is also a powerful way that gives you precise programmatic control over the XML file.

A better way is to use the XSL transformation language and create transformations, or XSL files. An XSL transformation contains the following information:

  • A template, which is similar to an HTML page. The template specifies how the XML information should be displayed.

  • XSL processing instructions, which specify exactly how the information from the XML file fits into the template.

You can define multiple transformations and then apply them to the same XML file. By doing this, you can use the XML information different ways, displaying it differently, selecting different data from the XML file, and so on.

After you have created XSL transformations, you must apply them to the XML file. That is, you process the XML file by transforming it according to one of the XSL files. The output is a new file that has the XML information formatted according to the transformation file.

Again, this is a process you can perform programmatically. However, you can also take advantage of the Xml server control. (For an overview, see XML Web Server Control.) This control works as a placeholder on your ASP.NET Web page. You can set its properties to a specific XML file and XSL transformation. When the page is processed, the control reads the XML, applies the transformation, and displays the results.

For more information about XSL, see XSLT Transformations with the XslTransform Class.

This walkthrough will illustrate how to use the Xml server control to display XML information by using XSL transformations. In this scenario, you will have the following:

  • An XML file that contains several fictional e-mail messages.

  • Two XSL transformations. One displays only the date, sender, and subject of the e-mail messages. The other displays the complete e-mail message.

    Note

    All these files are provided as part of the walkthrough.

You will create a Web page that enables users to display the XML information two different ways. The page contains a Headers only check box that is selected by default. Therefore, the default transformation is the one that displays only the e-mail message headers. If users clear the check box, the XML information is redisplayed with the complete e-mail messages.

Prerequisites

In order to complete this walkthrough, you will need:

  • Visual Studio 2010 or Visual Web Developer 2010 Express, or later versions of these products.

You should also have a general understanding of working in Visual Web Developer. For an introduction to Visual Web Developer, see Walkthrough: Creating a Basic Web Forms Page in Visual Studio.

Creating a Web Site and Page

In this part of the walkthrough, you will create a Web site and add a new page to it. For this walkthrough, you will create a file system Web site that does not require that you work with Microsoft Internet Information Services (IIS). Instead, you will create and run your page in the local file system.

This walkthrough uses a Web site project. You could use a Web application project instead. For information about the difference between these Web project types, see Web Application Projects versus Web Site Projects in Visual Studio.

To create a file system Web site

  1. Open Visual Web Developer.

  2. From the File menu, click New Web Site.

  3. Under Visual Studio installed templates, select ASP.NET Web Site.

  4. In the Location box, select File System and enter the name of the folder where you want to keep the pages of the Web site.

    For example, type the folder name C:\WebSites.

  5. In the Language list, click Visual Basic or Visual C#.

  6. Click OK.

Adding the XML File and XSL Transformations

In this part of the walkthrough, you will create an XML file and two XSLT files.

To add the XML file to your project

  1. In Solution Explorer, right-click the App_Data folder, and then click Add New Item.

    Note

    When you put the XML file into the App_Data folder, it automatically has the correct permissions to allow ASP.NET to read and write to the file at run time. In addition, it protects the file from being viewed in a browser, because the App_Data folder is marked as non-browsable.

  2. Under Visual Studio installed templates, click XML file.

  3. In the Name box, type Emails.xml.

  4. Click Add.

    A new XML file is created that contains only the XML directive.

  5. Copy the following XML data, and then paste it into the file, overwriting what is already in the file.

    <?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. Save the file and close it.

Next, you will add two XSL transformations to your project.

To add XSL transformations to your project

  1. In Solution Explorer, right-click the App_Data folder, and then click Add New Item.

  2. Under Visual Studio installed templates, click Text File.

    There is no template for a transformation file. Therefore, you can create it as a text file that has the correct extension.

  3. In the Name box, type Email_headers.xslt.

    Note

    Make sure that you use the .xslt extension.

  4. Click Add.

    A new blank file is created.

  5. Copy the following example code and paste it into the file.

    <?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="https://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>

    Note

    You can adjust this template as you like; for example, you might change colors, font sizes, styles, or other features.

  6. Save the file and close it.

  7. Repeat steps 1 through 4, but this time name the file Email_all.xslt.

  8. Paste the following example code into the Email_all.xslt file.

    <?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="https://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. Save the file and close it.

Adding the Xml Control to the Page

Now that you have an XML file and two transformations, you can use them to display information in a Web page. You do so using an Xml server control.

To add an Xml control

  1. Open or switch to the Default.aspx page.

  2. Switch to Design view.

  3. From the Standard tab of the Toolbox, drag an Xml control onto the page.

    A gray box that represents the Xml control is added to the page.

  4. Select the control, and in the Properties window, set the following properties.

    Property

    Setting

    DocumentSource

    ~/App_Data/Emails.xml

    TransformSource

    ~/App_Data/Email_headers.xslt

    This causes the Xml control to display only the e-mail message headers by default.

Adding Controls to Change Transformations

In this part of the walkthrough, you will use a check box that enables users to switch between transformations. The Xml control currently applies a transformation that displays only the e-mail message headers.

To add a check box to apply a different transformation

  1. Move the cursor in front of the Xml control and then press ENTER several times to make space above the Xml control.

  2. From the Standard tab of the Toolbox, drag a CheckBox control onto the page above the Xml control.

  3. Set the following properties of the CheckBox control.

    Property

    Setting

    Text

    Headers only

    Checked

    True

    AutoPostBack

    TrueThis causes the form to be posted and is processed as soon as the user clicks the check box.

  4. Double-click the CheckBox control.

    The code editor opens with a handler for the CheckBox control's CheckChanged event named CheckBox1_CheckedChanged.

  5. Add code that switches transformations between Email_headers.xslt and Email_all.xslt, depending on the state of the check box.

    The following code example shows what the complete CheckChanged handler will look like.

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

Testing

You can now see the transformations in action.

To test the transformations

  1. Press CTRL+F5 to run the page.

    By default, you will see the date, sender, and subject line of the e-mail messages.

  2. Clear the Headers only check box.

    The e-mail messages are redisplayed, this time with a different layout and complete text.

Next Steps

This walkthrough has illustrated only the basics of how to work with an XML document and transformations. In a real application, you will often work with the XML document in more detail. The following are suggestions for additional investigation:

  • Create more sophisticated transformations. In this walkthrough, you have seen only one example of how you can use transformations. XSL is a powerful language, with sophisticated support not just for creating HTML pages, but also for almost any kind of transformation from XML to another structure.

  • Apply transformations programmatically. In this walkthrough, you took advantage of the Xml Web server control to do the work of applying transformations to the raw XML data. You might find it useful in your application to do this work yourself, for example if it is impractical in your application to use an Xml control. For details, see XSLT Transformations with the XslTransform Class.

  • Write XML documents instead of just reading them. The Xml control makes it easy to display the contents of an XML file in an ASP.NET Web page. However, you might want to create or amend XML files yourself. For details, see XML Documents and Data. For an example of writing to an XML file, see Walkthrough: Displaying and Tracking Advertisements with the AdRotator Control.

See Also

Other Resources

XML Web Server Control