通过

演练：使用转换在 Web 窗体页中显示 XML 文档

  • 项目

更新：2007 年 11 月

本演练演示如何在网页中显示 XML 文档的信息。在本演练中，您将创建一个简单的 XML 文件。然后将使用 ASP.NET 服务器控件和 XSLT 转换在网页中显示 XML 文件的内容。

18az815d.alert_note(zh-cn,VS.90).gif说明：

也可以将 XML 文件用作数据源，使用 GridView 控件等控件显示其内容。有关详细信息，请参见 演练：创建网页以显示 XML 数据。

若要在网页中显示 XML 信息，必须提供格式设置和显示信息。例如，必须提供 table 元素、p 元素或显示信息时所要用的任何信息。另外，您必须说明 XML 文件中的数据如何适当地放入这些标记中。例如，您可能决定将 XML 文件中的每个元素显示为表中的一行。

提供这些说明的一种方式是在 ASP.NET 页面中使用代码来分析 XML 文件并将数据填充到适当的 HTML 标记中。此方法既费时又难以维护，但它也是对 XML 文件进行精确的编程控制的一种强有力的方式。

一种更好的方式是使用 XSL 转换语言并创建转换（即 XSL 文件）。XSL 转换包含以下信息：

  • 一个模板，类似于 HTML 页。该模板指定应如何显示 XML 信息。

  • XSL 处理指令，它精确地指定如何将 XML 文件中的信息放入模板中。

您可以定义多个转换，然后将它们应用于同一个 XML 文件。这样做能够以不同的方式使用 XML 信息、以不同的方式进行显示以及从 XML 文件中选择不同的数据等。

创建 XSL 转换后，必须将它们应用于 XML 文件。也就是说，应根据一个 XSL 文件对 XML 文件进行转换来处理该 XML 文件。输出是一个新文件，已根据转换文件对 XML 信息进行了格式设置。

这也是可以以编程方式执行的过程。但是，您还可以利用 Xml 服务器控件。（有关概述，请参见 XML Web 服务器控件 (Visual Studio)。） 此控件用作 ASP.NET 网页上的占位符。可将其属性设置为特定 XML 文件和 XSL 转换。处理网页时，控件会读取 XML，应用转换，然后显示结果。

有关 XSL 的更多信息，请参见XslTransform 类的 XSLT 转换。

本演练演示如何通过 XSL 转换使用 Xml 服务器控件显示 XML 信息。在此方案中，您将具有以下项：

  • 包含多个虚构电子邮件的 XML 文件。

  • 两个 XSL 转换。一个只显示电子邮件的日期、发件人和主题。另一个显示整个电子邮件。

    18az815d.alert_note(zh-cn,VS.90).gif说明：

    提供所有这些文件是演练的一部分。

您将创建一个网页，允许用户以两种不同的方式显示 XML 信息。该页包含一个**“仅标题”**复选框，该复选框是默认选中的。因此，默认转换是只显示电子邮件头的那个转换。如果用户清除该复选框，则重新显示具有完整电子邮件内容的 XML 信息。

先决条件

若要完成本演练，您需要：

  • Visual Studio 2008 或 Visual Web Developer。

您还应对 Visual Web Developer 的使用有大致了解。有关 Visual Web Developer 的简介，请参见演练：在 Visual Web Developer 中创建基本网页。

创建网站和网页

在本部分演练中，将创建一个网站并为其添加新页。在本演练中，您将创建一个不需要使用 Microsoft Internet 信息服务 (IIS) 的文件系统网站。相反，您将在本地文件系统中创建和运行页。

创建文件系统网站

  1. 打开 Visual Web Developer。

  2. 在**“文件”菜单上单击“新建网站”**。

  3. 在**“Visual Studio 已安装的模板”之下选择“ASP.NET 网站”**。

  4. 在**“位置”框中选择“文件系统”**，然后输入要在其中保存网站页面的文件夹的名称。

    例如，键入文件夹名“C:\WebSites”。

  5. 在**“语言”列表中，单击“Visual Basic”或“Visual C#”**。

  6. 单击**“确定”**。

添加 XML 文件和 XSL 转换

在本部分演练中，将创建一个 XML 文件和两个 XSLT 文件。

将 XML 文件添加到项目中

  1. 在解决方案资源管理器中，右击**“App_Data”文件夹，然后单击“添加新项”**。

    18az815d.alert_note(zh-cn,VS.90).gif说明：

    将 XML 文件放入“App_Data”文件夹时，XML 文件就自动具有了允许 ASP.NET 在运行时对其进行读写的相应权限。另外，“App_Data”文件夹标记为不可浏览，因此可防止在浏览器中查看该文件。

  2. 在**“Visual Studio 已安装的模板”之下单击“XML 文件”**。

  3. 在**“名称”**框中键入 Emails.xml。

  4. 单击**“添加”**。

    创建一个仅包含 XML 指令的新 XML 文件。

  5. 复制下面的 XML 数据，然后将其粘贴到文件中，并覆盖该文件中的内容。

    <?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. 保存文件并将其关闭。

下一步，将两个 XSL 转换添加到您的项目中。

将 XSL 转换添加到您的项目中

  1. 在解决方案资源管理器中，右击**“App_Data”文件夹，然后单击“添加新项”**。

  2. 在**“Visual Studio 已安装的模板”之下单击“文本文件”**。

    没有转换文件的模板。因此，可以通过创建具有正确扩展名的文本文件的方式来创建。

  3. 在**“名称”**框中键入 Email_headers.xslt。

    18az815d.alert_note(zh-cn,VS.90).gif说明：

    请务必使用 .xslt 扩展名。

  4. 单击**“添加”**。

    即创建了一个新的空白文件。

  5. 复制下面的代码示例并将其粘贴到该文件中。

    <?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>
    18az815d.alert_note(zh-cn,VS.90).gif说明：

    可以随意调整此模板；例如，可以更改颜色、字体大小、样式或其他功能。

  6. 保存文件并将其关闭。

  7. 重复第 1 步到第 4 步，但这一次将文件命名为“Email_all.xslt”。

  8. 将下面的代码示例粘贴到“Email_all.xslt”文件中。

    <?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. 保存文件并将其关闭。

向页添加 Xml 控件

具有一个 XML 文件和两个转换之后，即可使用它们在网页中显示信息。使用 Xml 服务器控件完成该操作。

添加 Xml 控件

  1. 打开或切换到 Default.aspx 页。

  2. 切换到“设计”视图。

  3. 从**“工具箱”的“标准”选项卡中，将一个“Xml”**控件拖到该页上。

    一个表示**“Xml”**控件的灰色框即添加到该页中。

  4. 选择该控件，然后在**“属性”**窗口中设置以下属性。

    属性

    设置

    DocumentSource

    ~/App_Data/Emails.xml

    TransformSource

    ~/App_Data/Email_headers.xslt

    这会使**“XML”**控件在默认情况下只显示电子邮件头。

添加控件以更改转换

在本部分演练中，您将使用一个复选框来使用户能够在转换间进行切换。Xml 控件当前应用只显示电子邮件标题的转换。

添加复选框以应用不同的转换

  1. 将光标移到**“Xml”控件前面，然后按几次 Enter，使“Xml”**控件上方生成空白。

  2. 从**“工具箱”的“标准”选项卡中，将一个“CheckBox”控件拖到“XML”**控件之上的页面中。

  3. 设置**“CheckBox”**控件的以下属性。

    属性 (Property)

    设置

    Text

    仅标题

    Checked

    True

    AutoPostBack

    True，使用此设置则会发送窗体，并且用户一单击该复选框就进行处理。

  4. 双击**“CheckBox”**控件。

    代码编辑器将打开，其中显示**“CheckBox”控件的 CheckChanged 事件的处理程序，该处理程序名为“CheckBox1_CheckedChanged”**。

  5. 添加根据复选框的状态在 Email_headers.xslt 和 Email_all.xslt 之间切换转换的代码。

    下面的代码示例演示整个 CheckChanged 处理程序。

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

测试

现在可以看到转换正在工作。

测试转换

  1. 按 Ctrl+F5 运行该页。

    默认情况下，您将看到电子邮件的日期、发件人和主题行。

  2. 清除“仅标题”复选框。

    重新显示该电子邮件，这一次具有不同的布局和完整的文本。

后续步骤

本演练只演示如何使用 XML 文档和转换的基础知识。在实际应用中，您经常要更加深入的使用 XML 文档。下面是进行进一步研究的建议：

  • 创建更复杂的转换。在本演练中，您只看到如何使用转换的一个示例。XSL 是一种强大的语言，它不仅为创建 HTML 页提供完善的支持，而且几乎支持从 XML 到另一种结构的任何种类的转换。

  • 以编程方式应用转换。在本演练中，您利用了 Xml Web 服务器控件将转换应用于原始 XML 数据。您可能发现在应用程序中亲自完成此工作很有用，例如，您的应用程序中不适合使用 Xml 控件时，即是如此。有关详细信息，请参见 XslTransform 类的 XSLT 转换。

  • 编写 XML 文档，而不只是阅读这类文档。通过 Xml 控件可以方便地在 ASP.NET 网页中显示 XML 文件的内容。但是，您可能要亲自创建或修改 XML 文件。有关详细信息，请参见 XML 文档和数据。有关编写 XML 文件的示例，请参见 演练：使用 AdRotator 控件显示和跟踪广告。

请参见

其他资源

XML Web 服务器控件 (Visual Studio)