ASP.NET - 演练：创建网页以显示 XML 数据

数据通常是以 XML 格式提供给 Web 应用程序的。但是，XML 数据本质上是分层的，因此您可能希望能够在基于列表的控件中使用 XML 数据，如 GridView 或 DropDownList 控件。此演练演示如何将 XML 数据视为表格数据库表中的数据进行处理。

 

通过此演练，您将学会如何执行以下任务：

·使用数据源控件读取 XML 数据并将数据提供给列表控件。

·将 GridView 和 DataList 控件绑定到 XML 数据。

·创建显示逻辑相关的 XML 数据的主详细信息页。

·对 .xml 文件应用转换以使该文件可用作表格数据。

 

一、创建网站

如果已经在 Visual Web Developer 中创建了一个网站（例如，按照 演练：在 Visual Web Developer 中创建基本网页 中的步骤），则可以使用该网站并转到下一部分。否则，按照下面的步骤创建一个新的网站和网页。创建文件系统网站：

1、打开 Visual Web Developer。

2、在“文件”菜单上指向“新建网站”。出现“新建网站”对话框。

3、在“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”。

4在“位置”框中单击“文件系统”，然后输入要保存网站的文件夹的名称。例如，键入文件夹名称“C:/WebSites/XMLWalkthrough”。

5、在“语言”列表中，单击要使用的编程语言，如“Visual Basic”或“Visual C#”。您选择的编程语言将是网站的默认语言，但您可以为每个页分别设置编程语言。

6、单击“确定”。Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

 

二、为数据创建 .xml 文件

若要使用 XML 数据，请在网站中创建一个 .xml 文件。

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

说明： 将 .xml 文件放入 App_Data 文件夹时，.xml 文件就具有了正确的权限，可以允许 ASP.NET 在运行时对该文件进行读写操作。此外，将文件保留在 App_Data 文件夹中可防止在浏览器中查看这些文件，因为 App_Data 文件夹被标记为不可浏览。

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

3、在“名称”框中键入“Bookstore.xml”。

4、单击“添加”。即创建了一个仅包含 XML 指令的新 .xml 文件。

5、复制下面的 XML 数据，然后将其粘贴到文件中，改写该文件中的内容。

<?xml version="1.0" standalone="yes"?>

<bookstore>

    <book ISBN="10-000000-001"

        title="The Iliad and The Odyssey"

        price="12.95">

    <comments>

        <userComment rating="4"

            comment="Best translation I've read." />

        <userComment rating="2"

            comment="I like other versions better." />

      </comments>

   </book>

   <book ISBN="10-000000-999"

        title="Anthology of World Literature"

        price="24.95">

   <comments>

      <userComment rating="3"

          comment="Needs more modern literature." />

      <userComment rating="4"

          comment="Excellent overview of world literature." />

   </comments>

   </book>

    <book ISBN="11-000000-002"

        title="Computer Dictionary"

        price="24.95" >

      <comments>

         <userComment rating="3"

             comment="A valuable resource." />

      </comments>

   </book>

    <book ISBN="11-000000-003"

        title="Cooking on a Budget"

        price="23.95" >

   <comments>

      <userComment rating="4"

          comment="Delicious!" />

    </comments>

    </book>

    <book ISBN="11-000000-004"

        title="Great Works of Art"

        price="29.95" >

   </book>

</bookstore>

      Bookstore.xml 文件包含网上书店可能提供的书籍的信息。请注意 .xml 文件的以下特点：

·元素的属性 (Property) 值都表示为属性 (Attribute)。

·该文件包含一个嵌套结构 -- 每本书可包含书的属性值，以及一个或多个注释作为独立元素。

6、保存 Bookstore.xml 文件，然后将其关闭。

 

三、在列表控件中显示 XML 数据

若要使数据可用于 ASP.NET 网页中的控件，需要使用数据源控件。

3.1、配置对 .xml 文件的数据访问权限

1、打开 Default.aspx 文件，然后切换到“设计”视图。

2、在“工具箱”中，从“数据”组中将“XmlDataSource”控件拖到页上。

3、在“XmlDataSource 任务”菜单中，单击“配置数据源”。出现“配置数据源<DataSourceName>”对话框。

4、在“数据文件”框中，键入“~/App_Data/Bookstore.xml”。

5、单击“确定”。

XmlDataSource 控件使 .xml 文件中的数据可供该页中的控件使用。这些数据可以两种格式使用：分层格式和表格格式。绑定到 XmlDataSource 控件的控件可以以它们的适用格式获取这些数据。

这种情况下，Bookstore.xml 文件的层次结构有助于进行关系解释。文件的两个级别（书和注释）可视为两个相关的表。

现在即可在列表控件中显示 XML 数据。开始时，可在 GridView 控件中显示一些 XML 数据。

 

3.2、使用 GridView 控件作为 XML 数据的基本显示工具

1、在“工具箱”中，从“数据”组中将“GridView”控件拖到页上。

2、在“GridView 任务”菜单的“选择数据源”列表中，单击“XmlDataSource1”。

3、按 Ctrl+F5 运行该页。

该页在网格中显示 XML 数据。GridView 控件中显示的数据演示有关如何解释 XML 数据的以下几点：

·如果 XML 数据被表示为一个数据记录，则在默认情况下，列是从属性（如 ISBN）创建的。

·子元素被视为独立相关表的一部分。此示例中，GridView 控件没有绑定到文件中的 comments 元素。

 

四、使用 XPath 表达式筛选 XML 数据

在此演练的第一部分中，使用的是 XmlDataSource 和 GridView 控件的默认行为来提取 .xml 文件中的信息。但是，控件只显示部分 XML 数据。

在演练的这一部分中，将添加另一个 GridView 控件并使用该控件显示主/详细信息。用户将可以在第一个 GridView 控件中选择一本书，而第二个 GridView 控件将显示该书的相关用户注释（如果有）。若要显示注释，需要使用 XPath 表达式，该表达式允许您指定要提取的 XML 数据文件的级别。由于只想显示某特定书的注释，因此将动态创建 XPath 表达式，具体取决于用户所选的书。

开始时，向页中添加另一个 GridView 控件，然后配置 GridView 控件以便它显示用户注释。

 

4.1、添加 GridView 控件以显示用户注释

1、切换到“设计”视图。

2、在“工具箱”中，从“数据”组中将“GridView”控件拖到页上，并将其置于第一个“GridView”控件之下。出现“GridView 任务”菜单。

3、在“选择数据源”框中，单击“新建数据源”。出现“数据源配置向导”。

4、单击“XML 文件”作为数据源。

5、在“为数据源指定 ID”框中，保留默认值“XmlDataSource2”。

6、单击“确定”。出现“配置数据源”对话框。

7、在“数据文件”框中，键入“~/App_Data/Bookstore.xml”。您将使用在本演练中已使用过的 .xml 文件，但将为第二个 GridView 控件从该文件中提取不同的信息。

8、在“XPath 表达式”框中，键入下面的表达式：/bookstore/book/comments/userComment稍后，您将在代码中动态更改 XPath 属性。但是，现在通过为数据源定义 XPath 表达式，将帮助 Visual Web Designer 中的工具确定控件中最终显示的信息。

9、单击“确定”。出现第二个 GridView 控件，将分级和用户注释显示为示例数据。

10、选择“GridView2”控件，在“属性”中将“可见”设置为“False”。仅当用户在第一个 GridView 控件中选择了书时，才会显示第二个 GridView 控件。

现在可以配置第一个 GridView 控件以允许用户选择书。您还将添加一段代码（该代码基于用户的选择创建一个 XPath 表达式），并将该表达式指定给 XmlDataSource2 控件。最终结果是第二个 GridView 控件显示选定的书的用户注释。

 

4.2、为选定内容配置 GridView 控件

1、切换到“设计”视图，然后选择第一个“GridView”控件。

2、在“GridView 任务”菜单中，选择“启用选定内容”。一个新列即添加到 GridView 控件中，该列包含一个链接按钮，其文本为“选择”。

3、在“属性”中，将“DataKeyNames”设置为“ISBN”。可以单击属性框以选择该值。GridView 控件经过这样配置后，即将 ISBN 属性视为 XML 数据中每个元素的主键。

4、单击“GridView”控件。在“属性”窗口中，从“属性”窗口顶部的下拉列表中选择“事件”。即会显示与该控件关联的所有事件。

5、双击“SelectedIndexChanged”事件的框。即可切换到代码编辑器，并为 SelectedIndexChanged 事件创建一个主干处理程序。

6、将下面突出显示的代码添加到处理程序中。

protected void GridView1_SelectedIndexChanged(Object sender, EventArgs e)

{

String isbn = (String)       

GridView1.DataKeys[GridView1.SelectedIndex].Value;

XmlDataSource2.XPath = String.Format("/bookstore/book[@ISBN='{0}']/comments/userComment",isbn);

GridView2.Visible = true;

}

      这段代码执行下面的操作：

·使用 SelectedIndex 属性（属于 GridView 控件）对数据键的数组进行索引，然后返回选定行的主键。此前，已将 DataKeyNames 属性设置为包含 ISBN 号。

·创建包含所选 ISBN 的新 XPath 表达式。

·将这一新 XPath 表达式指定给 XPath 属性（属于 XmlDataSource2 控件）。将新 XPath 表达式指定给 XPath 属性会导致 XmlDataSource 控件重新计算它的返回数据。从而使 GridView 控件重新绑定到数据。

·将 Visible 属性设置为 true，从而显示第二个 GridView 控件。创建第二个 GridView 控件时，以声明方式将可视性设置为 false，以便在用户选择书之前不会显示该控件。

现在可以测试该页。

 

4.3、使用 XPath 表达式测试筛选

1、查看 Default.aspx 页然后按 Ctrl+F5 运行该页。即会显示该页，其中网格中是书的信息。

2、单击第一本书旁边的“选择”链接。该书的注释即显示在第二个网格中。

3、单击最后一本书旁边的“选择”链接。不会显示任何注释，因为该书没有注释。

 

五、使用自定义布局显示 XML 数据

若要创建数据的自定义布局，可以使用 DataList 控件。在 DataList 控件中，可以定义一个或多个模板。每个模板都包含静态文本和若干控件的组合，其中文本和控件的布局可以随意安排。

在这部分演练中，将使用一个 DataList 控件来显示原来用 GridView2 控件显示的信息。但是，您可以为用户注释创建自定义布局。

 

5.1、使用自定义布局显示 XML 数据

1、切换到“设计”视图，单击“GridView2”控件，然后按 Delete 将其从页中移除。

2、在“工具箱”中，从“数据”组中将“DataList”控件拖到页上。

3、在“DataList 任务”菜单的“选择数据源列表”中，单击“XmlDataSource2”。用于 GridView2 控件的数据源将用于 DataList 控件。

4、在“属性”中，将“可见”设置为“false”。

5、如果智能标记未出现，则请右击“DataList”控件，然后单击“显示智能标记”。

6、在“DataList 任务”菜单中，单击“编辑模板”，然后在“显示”框中单击“项模板”。DataList 控件出现，其中有一个用于项模板的可编辑区域。该模板包含由静态文本和 Label 控件组成的默认布局，这些控件被绑定到数据记录中的 Rating 和 Comment 列。（DataList 控件能够推断它将显示的数据结构，因为在本演练前面部分中为 XmlDataSource2 控件定义了一个静态 XPath 表达式。）

7、在可编辑区域中，将第一个标题更改为“用户分级：”。

8、将标题“注释”更改为“注释：”。

9、右击“DataList”控件的标题栏，指向“编辑模板”，然后单击“分隔符模板”。DataList 控件中显示另一个可编辑区域，该区域用于定义将在每个数据记录之间显示的元素的布局。

10、在“工具箱”中，从“HTML”组中将“水平标尺”控件拖到该可编辑区域中。

11、右击“DataList”控件，然后单击“结束模板编辑”。

12、右击该页，然后单击“查看代码”，切换到该页的代码。

13、在“GridView1_SelectedIndexChanged”处理程序中，更改下面的行：

      GridView2.Visible = true; 更改为下面的内容：DataList1.Visible = true;

     

5.2、测试自定义布局

1、查看 Default.aspx 页然后按 Ctrl+F5 运行该页。即会显示该页，其中网格中是书的信息。

2、单击第一本书旁边的“选择”链接。列表中显示第一本书的注释。

3、单击最后一本书旁边的“选择”链接。不会显示任何注释，因为该书没有注释。

 

六、使用转换来重构 XML 数据

本演练中使用的 .xml 文件已结构化，因此，每个元素的属性 (Property) 都表示为属性 (Attribute)。在许多情况下，所使用的 .xml 文件在结构上完全不同。例如，.xml 文件中的值通常是作为具有内部文本的元素创建的。

如果 .xml 文件中属性 (Property) 值不是表示为属性 (Attribute) 格式，则可以创建一个转换文件 (.xslt)，该文件可以动态重新设置 .xml 文件的格式，以使其与 XmlDataSource 控件兼容。

在本部分演练中，将使用一个 .xml 文件，它包含的数据与前面使用的 Bookstore.xml 文件中的数据相同。但是，这些数据的结构与 Bookstore.xml 文件中的结构不同，因此，需要使用转换来动态重新设置数据格式。

 

开始时，将创建另一个 .xml 文件。

 

6.1、创建第二个 .xml 文件

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

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

3、在“名称”框中键入“Bookstore2.xml”。

4、单击“添加”。即创建了一个仅包含 XML 指令的新 .xml 文件。

5、复制下面的 XML 数据，然后将其粘贴到文件中，改写该文件中的内容。

<?xml version="1.0" standalone="yes"?>

<bookstore>

    <book ISBN="10-000000-001">

        <title>The Iliad and The Odyssey</title>

        <price>12.95</price>

        <comments>

            <userComment rating="4">

                Best translation I've read.

            </userComment>

            <userComment rating="2">

                I like other versions better.

            </userComment>

        </comments>

    </book>

    <book ISBN="10-000000-999">

        <title>Anthology of World Literature</title>

        <price>24.95</price>

        <comments>

            <userComment rating="3">

                Needs more modern literature.

            </userComment>

            <userComment rating="4">

                Excellent overview of world literature.

            </userComment>

        </comments>

    </book>

    <book ISBN="11-000000-002">

        <title>Computer Dictionary</title>

        <price>24.95</price>

        <comments>

            <userComment rating="3">

               A valuable resource.

            </userComment>

        </comments>

    </book>

    <book ISBN="11-000000-003">

        <title>Cooking on a Budget</title>

        <price>23.95</price>

        <comments>

            <userComment rating="4">Delicious!</userComment>

        </comments>

    </book>

    <book ISBN="11-000000-004">

        <title>Great Works of Art</title>

        <price>29.95</price>

    </book>

</bookstore>

      6、保存 Bookstore2.xml 文件，然后将其关闭。

现在需要一个转换文件，将 Bookstore2.xml 文件中的数据转换为 XmlDataSource 控件所使用的基于属性的格式。

 

6.2、创建转换文件

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

2、在“Visual Studio 已安装的模板”之下单击“文本文件”。没有转换文件模板，因此可以通过创建具有正确扩展名的文本文件的方式来创建。

3、在“名称”框中键入“Bookstore2.xsl”。说明： 请务必使用 .xsl 扩展名。

4、单击“添加”。即创建了一个新的空白文件。

5、复制下面的转换代码，然后将其粘贴到该文件中。

<?xml version="1.0"?>

<xsl:stylesheet

   version="1.0"

   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

   xmlns:xsd="http://www.w3.org/2001/XMLSchema"

   xmlns:msxsl="urn:schemas-microsoft-com:xslt"

> 

   <xsl:strip-space elements="*"/>

   <xsl:output method="xml"

       omit-xml-declaration="yes"

       indent="yes"

       standalone="yes" />

 

   <xsl:template match="/">

      <xsl:for-each select="bookstore">

         <xsl:element name="bookstore">

            <xsl:for-each select="book">

               <xsl:element name="book">

                  <xsl:attribute name="ISBN">

                     <xsl:value-of select="@ISBN"/>

                  </xsl:attribute>

                  <xsl:attribute name="title">

                     <xsl:value-of select="title"/>

                  </xsl:attribute>

                  <xsl:attribute name="price">

                     <xsl:value-of select="price"/>

                  </xsl:attribute>

               </xsl:element>

            </xsl:for-each>

         </xsl:element>

      </xsl:for-each>

   </xsl:template>

</xsl:stylesheet>

      6、保存 Bookstore2.xsl 文件，然后将其关闭。

从现在开始，可以用类似于本演练前面部分的方式处理 XML 数据，不同之处在于，在配置 XmlDataSource 控件时可以指定该转换文件。在本演练的最后部分，将创建一个新页，然后重复本演练第一部分中的某些步骤。但是，这次将显示 Bookstore2.xml 文件中的数据。

 

6.3、配置对 .xml 文件的数据访问权限

1、在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。

2、在“Visual Studio 已安装的模板”之下单击“Web 窗体”。

3、在“名称”框中键入“Bookstore2.aspx”。

4、单击“添加”。

5、切换到“设计”视图。

6、在“工具箱”中，从“数据”组中将“XmlDataSource”控件拖到页上。

7、在“XmlDataSource 任务”菜单中，单击“配置数据源”。出现“配置数据源”对话框。

8、在“数据文件”框中，键入“~/App_Data/Bookstore2.xml”。

9、在“转换文件”框中，键入“~/App_Data/Bookstore2.xsl”。

10、单击“确定”。

11、在“工具箱”中，从“数据”组中将“GridView”控件拖到页上。

12、在“GridView 任务”菜单的“选择数据源”列表中，单击“XmlDataSource1”。

13、按 Ctrl+F5 运行该页。该页在网格中显示 XML 数据。像以前一样，这些数据将显示在第一页的网格中，即使这次基础 .xml 文件的格式不同，也是如此。