Export (0) Print
Expand All

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

As more and more information becomes available in the format of XML documents, you will find it increasingly likely that you will need to be able to work with these documents. This walkthrough illustrates how you can easily display information on a Web Forms page from a "non-structured" XML document — that is, an XML document that does not represent relational data.

XML and XSL in Web Forms Pages

Information in an XML file is "raw," containing only the data and no indication about how to format it, display it, and so on. To display XML information in a Web Forms page, you need to provide formatting and display information — for example, you need to provide the <TABLE> tags, <P> tags, 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, should each element in the XML file be displayed as a table row?

One way to provide these instructions is to create a Web Forms page and then use code to parse the XML file and fill the data into the appropriate HTML tags. However, this is a somewhat tedious and inflexible way to do so. (On the other hand, it is also a very powerful way that gives you precise programmatic control over the XML file.)

XSL Transformations

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

  • A template — basically, an HTML page with the appropriate tags — that 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 so, you can use the XML information different ways, displaying it differently, selecting different data from the XML file, and so on.

Once you have XSL transformations, you need to 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 with 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 Web server control. (For an overview see XML Web Server Control.) This control works as a placeholder on your Web Forms page. You can set its properties to a specific XML file and XSL transformation, and 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.

Goals of the Walkthrough

This walkthrough will illustrate how to use the XML Web server control to display XML information using XSL transformations. The scenario is simple. You will have the following:

  • An XML file containing 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 entire e-mail message.
    Note   All of these files are provided as part of the walkthrough.

You will create a Web Forms page that allows users to display the XML information two different ways. The page contains a "Headers only" check box that is checked by default; the default transformation, therefore, 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.

When the page displays only the headers, it might look something like the following:

18az815d.vbwebformsxmlcontrolwalkthrough1(en-us,VS.71).gif

When users clear the check box, the page changes to look something like this:

18az815d.vbwebformsxmlcontrolwalkthrough2(en-us,VS.71).gif

In order to complete this walkthrough, you will need sufficient permissions to be able to create ASP.NET Web application projects on the computer where your Web server is.

As part of the walkthrough, you will do the following:

  • Create a new Web application project and Web Forms page.
  • Add the XML file and the two XSL transformation files to the project.
  • Add an XML Web server control to the Web Forms page and set it to display the XML file and a transformation.
  • Add controls and code to allow the user to change the transformation applied to the XML file.

Creating the Project and Form

The first step is to create a Web application and a Web Forms page.

To create the project and form

  1. On the File menu, point to New, then click Project.
  2. In the New Project dialog box, do the following:
    1. In the Project Types pane, choose either Visual Basic Projects or Visual C# Projects.
    2. In the Templates pane, choose ASP.NET Web Application.
    3. In the Location box, enter the complete URL for your application, including http://, the name of the server, and the name of your project. The Web server must have IIS version 5 or later and the .NET Framework installed on it. If you have IIS on your computer, you can specify http://localhost for the server. (If you normally use a proxy server to access the Internet, you might need to configure Internet Explorer to bypass the proxy server in order to use localhost.)

      When you click OK, a new Web Forms project is created at the root of the Web server you specified. In addition, a new Web Forms page called WebForm1.aspx is displayed in the Web Forms Designer in Design view.

      Tip   If you have trouble creating a Web application project, see Web Access Failed Dialog Box.

Adding the XML File and XSL Transformations

The walkthrough scenario assumes that you are working with an existing XML file and two existing XSL transformation files. In a real application, you would create them yourself or get them from some source (perhaps another application). To save you the trouble of having to create or acquire these files, they are included as part of the walkthrough. The following steps (which would not be part of a real application) make these files available so you can continue with the walkthrough.

To add the XML file to your project

  1. In Solution Explorer, right-click the name of your project, point to Add, then choose Add New Item.

    The Add New Item dialog box is displayed.

  2. In the Templates pane, choose XML File.
  3. In the Name box, change the name of the XML file to Emails.xml.
    Note   You can name the XML file anything you like. If you use a different name, make a note of it so you can use your name as appropriate later.

    The XML editor opens with a new XML file in it with an XML directive at the top.

  4. Select the XML directive (and anything else in the file) and delete it.
  5. Copy the following XML information and paste it into the file using the Paste As HTML command:
    <?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. 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 name of your project, point to Add, then choose Add New Item.

    The Add New Item dialog box appears.

  2. In the Templates pane, choose XSLT File.
  3. In the Name box, change the name of the file to Email_headers.xslt.
    Note   You can name the XML file anything you like. If you use a different name, make a note of it so you can use your name as appropriate later.

    The XML editor opens with some XSLT directives and elements in it.

  4. Select everything in the file and delete it.
  5. Copy the following and paste it into the file using the Paste As HTML command:
    <?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>
    
    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 into the Email_all.xslt file using the Paste As HTML command:
    <?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>
    
    Note   You can adjust this template as you like; for example, you might change colors, font sizes, styles, or other features.
  9. Save the file and close it.

Adding the XML Control to the Web Forms Page

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

When you are working with the XML control, it is easier to work in flow layout rather than grid layout, because you cannot use absolute positioning to specify the location of the XML control on the page. For more information, see pageLayout Property.

To set flow mode

  1. Right-click the empty page and choose Properties.
  2. Set the Page Layout value (pageLayout property) to FlowLayout.

Now you can add controls to the page.

To add an XML control

  1. Open or move to the Web Forms page created by default when you created you Web application project.
  2. From the Web Forms tab of the Toolbox, drag an XML control onto the page.

    A gray box representing the XML control is added to the top left corner of the page.

  3. Select the control, and in the Properties window, set the following properties:
    PropertySetting
    DocumentSourceEmails.xml
    TransformSourceEmail_headers.xslt

    This will cause the XML control to display only the e-mail message headers by default.

Adding Controls to Change Transformations

In this walkthrough, you will use a check box to allow users to switch between transformations. By default, the XML control applies a transformation that displays only the e-mail message headers.

To add a check box to apply a different transformation

  1. Select the XML control, press the BACKSPACE key, and press the ENTER key a few times to make space above the XML control.
  2. From the Web Forms tab of the Toolbox, drag a CheckBox control onto the form above the XML control.
  3. Set the following properties of the CheckBox control:
    PropertySetting
    TextHeaders only
    CheckedTrue
    AutoPostBackTrue. This causes the form to be posted and processes as soon as the user clicks the box.
  4. Double-click the check box.
  5. The Code Editor opens with a skeleton handler for the CheckBox control's CheckChanged event.
  6. Add code that switches transformations between Email_headers.xslt and Email_all.xslt depending on the state of the check box. The entire CheckChanged handler should look like the following:
    ' Visual Basic
    Private Sub CheckBox1_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles CheckBox1.CheckedChanged
       If CheckBox1.Checked Then
          Xml1.TransformSource = "email_headers.xslt"
       Else
           Xml1.TransformSource = "email_all.xslt"
       End If
    End Sub
    
    // C#
    private void CheckBox1_CheckedChanged(object sender, System.EventArgs e)
    {
       if (CheckBox1.Checked)
       {
          Xml1.TransformSource = "email_headers.xslt";
       }
       else
       {
          Xml1.TransformSource = "email_all.xslt";
       }
    }
    

Testing

You can now see the transformations in action.

To test the transformations

  1. Run the Web Forms 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 need to work with the XML document in more depth. The following are suggestions for further investigation:

  • Creating 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 virtually any kind of transformation from XML to another structure.For more details, see the Microsoft XSLT Developer's Guide.
  • Applying 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 (perhaps because it is impractical in your application to use an XML control). For details, see XSLT Transformations with the XslTransform Class.
  • Writing XML documents (instead of simply reading them)   The XML control makes it easy to display the contents of an XML file in a Web Forms page. However, you might want to create or amend XML files yourself. For details, see Employing XML in the .NET Framework.
  • Understanding security issues   Learn about the security issues associated with Web Forms. For details, see Overview of Web Application Security Threats.

See Also

XML Web Server Control

Show:
© 2014 Microsoft