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.
back to the top
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
back to the top
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:
- Start Microsoft Visual Studio .NET, point to New, and then click Project.
- Under Project Types, click Visual Basic Projects. Under Templates, click ASP.NET Web Application.
- 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:
- Press CTRL+ALT+X to open the toolbox.
- In the toolbox, click Web Forms.
- Drag a TextBox control and a Button control from the toolbox to the Web Form.
- Press F4 to access the property window for the Button control, and then change the Text property to Filter Menu.
- Position the insertion point after the button, and then press ENTER to position the insertion point for the Xml control.
- Drag an Xml Web server control from the toolbox to the Web Form.
- 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.
back to the top
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>
back to the top
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>
back to the top
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>
back to the top
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
back to the top
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