HOW TO: Display an XML Document in ASP.NET by Using the Xml Web Server Control

View products that this article applies to.

Summary

This step-by-step article demonstrates how to use the Xml Web server control so that you can display an Extensible Markup Language (XML) document by using Extensible Stylesheet Language Transformation (XSLT) from within the Microsoft .NET Framework.

The Xml control makes it easy to use XML data in a Web Form. The Xml control encapsulates the code that the page author traditionally adds.

Requirements

The following list outlines the recommended hardware, software, network infrastructure, and service packs that are required:

Microsoft Windows 2000 Professional, Microsoft Windows 2000 Server, or Microsoft Windows XP Professional with the Microsoft .NET Framework installed

This article assumes that you are familiar with the following topics:

XML and Extensible Stylesheet Language Transformation (XSLT)
.NET Framework Web server controls

Display an XML Document from .NET

In this section, you create a small ASP.NET Web application that allows a customer to select lunch menu items based on calorie count. To do this, the sample uses the Xml Web server control, a simple XML document that contains the menu data, and an XSL stylesheet to transform the XML data. You can use the XsltArgumentList class from the System.Xml.Xsl namespace to access parameters in the transformation.

Create a Visual Basic Web application as follows:
1. Start Microsoft Visual Studio .NET, point to New, and then click Project.
2. Under Project Types, click Visual Basic Projects. Under Templates, click ASP.NET Web Application.
3. In the Name box, type Menu, and then click OK.
Make sure that the Solution Explorer window is visible. If this window is not visible, press CTRL+ALT+L.
WebForm1.aspx should be open in Design View. If not, double-click WebForm1.aspx in Solution Explorer.
Press the F4 key to access the property page. Change the pageLayout property to FlowLayout.
On the Web Form, type Maximum Calories: .
Add a TextBox control, a Button control, and an Xml control to the form as follows:
1. Press CTRL+ALT+X to open the toolbox.
2. In the toolbox, click Web Forms.
3. Drag a TextBox control and a Button control from the toolbox to the Web Form.
4. Press F4 to access the property window for the Button control, and then change the Text property to Filter Menu.
5. Position the insertion point after the button, and then press ENTER to position the insertion point for the Xml control.
6. Drag an Xml Web server control from the toolbox to the Web Form.
7. Press F4 to access the property window of the Xml control. Change the DocumentSource property to Menu.xml, and then change the TransformSource property to Menu.xslt.
Add the following code to the top of the code-behind page:
Imports System.Xml.Xsl
Double-click the button to create a Click event handler in the code-behind page of the Web Form. Add the following code to the event handler:
Dim tal As New XsltArgumentList() tal.AddParam("calories", "", TextBox1.Text) Xml1.TransformArgumentList = tal Xml1.Visible = True
With this argument list, you can pass the value of the TextBox control as a parameter to the stylesheet. This stylesheet uses XSLT commands to filter out all lunch menu items that are greater than the calorie count that the customer types. The following line of code from the stylesheet illustrates how the parameter is received and used:
<xsl:for-each select="lunch-menu/food[calories <= $calories]">
Use the code from the Menu.xml and the Menu.xslt sections to create the Menu.xml and the Menu.xslt files. Save these files in the same folder as WebForm1.aspx.

Complete Code Listing

Menu.xml

<?xml version='1.0'?>
<lunch-menu>
  <food>
    <name>Cheese Pizza</name>
    <price>$6.95</price>
    <description>Individual deep-dish pizza with lots of mozzarella cheese</description>
    <calories>800</calories>
  </food>
  <food>
    <name>Pepperoni Pizza</name>
    <price>$7.95</price>
    <description>Individual deep-dish cheese pizza with thick-cut pepperoni slices</description>
    <calories>950</calories>
  </food>
  <food>
    <name>The "Everything" Pizza</name>
    <price>$9.95</price>
    <description>Individual deep-dish pizza with all our toppings. House specialty!</description>
    <calories>800</calories>  </food>
  <food>
    <name>Hungarian Ghoulash</name>
    <price>$4.50</price>
    <description>Large serving in a sourdough bread bowl. A_local delight!</description>
    <calories>600</calories>
  </food>
  <food>
    <name>Maisey's Pork Sandwich</name>
    <price>$6.95</price>
    <description>A fresh pork fillet, deep-fried to perfection. Served with fries.</description>

    <calories>950</calories>
  </food>
</lunch-menu>

Menu.xslt

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:param name="calories">1500</xsl:param>
  <xsl:template match="/">
    <HTML>
      <BODY STYLE="font-family:Arial, helvetica, sans-serif; font-size:12pt;
            background-color:#EEEEEE">
        <xsl:for-each select="lunch-menu/food[calories <= $calories]">
          <DIV STYLE="background-color:blue; color:white; padding:4px">
            <SPAN STYLE="font-weight:bold; color:white"><xsl:value-of select="name"/></SPAN>
            - <xsl:value-of select="price"/>
          </DIV>
          <DIV STYLE="margin-left:20px; margin-bottom:1em; font-size:10pt">
            <xsl:value-of select="description"/>
            <SPAN STYLE="font-style:italic">
              (<xsl:value-of select="calories"/> calories per serving)
            </SPAN>
          </DIV>
        </xsl:for-each>
      </BODY>
    </HTML>
  </xsl:template>
</xsl:stylesheet>

WebForm1.aspx

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="menu.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>WebForm1</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
  </HEAD>
  <body >

    <form id="Form1" method="post" runat="server">
<P>Maximum Calories: 
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Filter Menu"></asp:Button></P>
<P>
<asp:Xml id="Xml1" runat="server" DocumentSource="menu.xml" TransformSource="menu.xslt"></asp:Xml></P>

    </form>

  </body>
</HTML>

WebForm1.vb

Imports System.Xml.Xsl

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox
    Protected WithEvents Button1 As System.Web.UI.WebControls.Button
    Protected WithEvents Xml1 As System.Web.UI.WebControls.Xml

#Region " Web Form Designer Generated Code "

    'The Web Form Designer requires this code.
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: The Web Form Designer requires this method call.
        'Do not use the Code editor to modify it.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Load
        'Insert user code to initialize the page here.
    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
        Dim tal As New XsltArgumentList()
        tal.AddParam("calories", "", TextBox1.Text)
        Xml1.TransformArgumentList = tal
        Xml1.Visible = True
    End Sub
End Class

Verify That It Works

Press F5 to run the application in debug mode.
By default, all of menu appears. Take note of the calorie counts for each item.
In the text box, type a calorie amount, and then click Filter Menu. Notice that only those menu items that are less than or equal to this calorie amount appear.
Press SHIFT+F5 to stop debugging and to return to Visual Studio .NET.

↑ Back to the top

References

For more information, visit the following Microsoft Web site:

XML Core
http://msdn.microsoft.com/library/default.asp?url=/nhp/default.asp?contentid=28000438&frame=true

For additional information about Web server controls, click the article number below to view the article in the Microsoft Knowledge Base:

306459 INFO: ASP.NET Server Controls Overview

↑ Back to the top

Properties

Retired KB Content Disclaimer

This article was written about products for which Microsoft no longer offers support. Therefore, this article is offered "as is" and will no longer be updated.

↑ Back to the top