ASP.NET - 演練：建立網頁以顯示 XML 數據

數據一般是以 XML 格式提供給 Web 應用程序的。可是，XML 數據本質上是分層的，所以您可能但願可以在基於列表的控件中使用 XML 數據，如 GridView 或 DropDownList 控件。此演練演示如何將 XML 數據視爲表格數據庫表中的數據進行處理。

 

經過此演練，您將學會如何執行如下任務：

·使用數據源控件讀取 XML 數據並將數據提供給列表控件。

·將 GridView 和 DataList 控件綁定到 XML 數據。

·建立顯示邏輯相關的 XML 數據的主詳細信息頁。

·對 .xml 文件應用轉換以使該文件可用做表格數據。

 

1、建立網站

若是已經在 Visual Web Developer 中建立了一個網站（例如，按照 演練：在 Visual Web Developer 中建立基本網頁 中的步驟），則可使用該網站並轉到下一部分。不然，按照下面的步驟建立一個新的網站和網頁。建立文件系統網站：

一、打開 Visual Web Developer。

二、在「文件」菜單上指向「新建網站」。出現「新建網站」對話框。

三、在「Visual Studio 已安裝的模板」之下單擊「ASP.NET 網站」。

4在「位置」框中單擊「文件系統」，而後輸入要保存網站的文件夾的名稱。例如，鍵入文件夾名稱「C:/WebSites/XMLWalkthrough」。

五、在「語言」列表中，單擊要使用的編程語言，如「Visual Basic」或「Visual C#」。您選擇的編程語言將是網站的默認語言，但您能夠爲每一個頁分別設置編程語言。

六、單擊「肯定」。Visual Web Developer 建立該文件夾和一個名爲 Default.aspx 的新頁。

 

2、爲數據建立 .xml 文件

若要使用 XML 數據，請在網站中建立一個 .xml 文件。

一、在解決方案資源管理器中，右擊 App_Data 文件夾，而後單擊「添加新項」。

說明： 將 .xml 文件放入 App_Data 文件夾時，.xml 文件就具備了正確的權限，能夠容許 ASP.NET 在運行時對該文件進行讀寫操做。此外，將文件保留在 App_Data 文件夾中可防止在瀏覽器中查看這些文件，由於 App_Data 文件夾被標記爲不可瀏覽。

二、在「Visual Studio 已安裝的模板」之下單擊「XML 文件」。

三、在「名稱」框中鍵入「Bookstore.xml」。

四、單擊「添加」。即建立了一個僅包含 XML 指令的新 .xml 文件。

五、複製下面的 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)。

·該文件包含一個嵌套結構 -- 每本書可包含書的屬性值，以及一個或多個註釋做爲獨立元素。

六、保存 Bookstore.xml 文件，而後將其關閉。

 

3、在列表控件中顯示 XML 數據

若要使數據可用於 ASP.NET 網頁中的控件，須要使用數據源控件。

3.一、配置對 .xml 文件的數據訪問權限

一、打開 Default.aspx 文件，而後切換到「設計」視圖。

二、在「工具箱」中，從「數據」組中將「XmlDataSource」控件拖到頁上。

三、在「XmlDataSource 任務」菜單中，單擊「配置數據源」。出現「配置數據源<DataSourceName>」對話框。

四、在「數據文件」框中，鍵入「~/App_Data/Bookstore.xml」。

五、單擊「肯定」。

XmlDataSource 控件使 .xml 文件中的數據可供該頁中的控件使用。這些數據能夠兩種格式使用：分層格式和表格格式。綁定到 XmlDataSource 控件的控件能夠以它們的適用格式獲取這些數據。

這種狀況下，Bookstore.xml 文件的層次結構有助於進行關係解釋。文件的兩個級別（書和註釋）可視爲兩個相關的表。

如今便可在列表控件中顯示 XML 數據。開始時，可在 GridView 控件中顯示一些 XML 數據。

 

3.二、使用 GridView 控件做爲 XML 數據的基本顯示工具

一、在「工具箱」中，從「數據」組中將「GridView」控件拖到頁上。

二、在「GridView 任務」菜單的「選擇數據源」列表中，單擊「XmlDataSource1」。

三、按 Ctrl+F5 運行該頁。

該頁在網格中顯示 XML 數據。GridView 控件中顯示的數據演示有關如何解釋 XML 數據的如下幾點：

·若是 XML 數據被表示爲一個數據記錄，則在默認狀況下，列是從屬性（如 ISBN）建立的。

·子元素被視爲獨立相關表的一部分。此示例中，GridView 控件沒有綁定到文件中的 comments 元素。

 

4、使用 XPath 表達式篩選 XML 數據

在此演練的第一部分中，使用的是 XmlDataSource 和 GridView 控件的默認行爲來提取 .xml 文件中的信息。可是，控件只顯示部分 XML 數據。

在演練的這一部分中，將添加另外一個 GridView 控件並使用該控件顯示主/詳細信息。用戶將能夠在第一個 GridView 控件中選擇一本書，而第二個 GridView 控件將顯示該書的相關用戶註釋（若是有）。若要顯示註釋，須要使用 XPath 表達式，該表達式容許您指定要提取的 XML 數據文件的級別。因爲只想顯示某特定書的註釋，所以將動態建立 XPath 表達式，具體取決於用戶所選的書。

開始時，向頁中添加另外一個 GridView 控件，而後配置 GridView 控件以便它顯示用戶註釋。

 

4.一、添加 GridView 控件以顯示用戶註釋

一、切換到「設計」視圖。

二、在「工具箱」中，從「數據」組中將「GridView」控件拖到頁上，並將其置於第一個「GridView」控件之下。出現「GridView 任務」菜單。

三、在「選擇數據源」框中，單擊「新建數據源」。出現「數據源配置嚮導」。

四、單擊「XML 文件」做爲數據源。

五、在「爲數據源指定 ID」框中，保留默認值「XmlDataSource2」。

六、單擊「肯定」。出現「配置數據源」對話框。

七、在「數據文件」框中，鍵入「~/App_Data/Bookstore.xml」。您將使用在本演練中已使用過的 .xml 文件，但將爲第二個 GridView 控件從該文件中提取不一樣的信息。

八、在「XPath 表達式」框中，鍵入下面的表達式：/bookstore/book/comments/userComment稍後，您將在代碼中動態更改 XPath 屬性。可是，如今經過爲數據源定義 XPath 表達式，將幫助 Visual Web Designer 中的工具肯定控件中最終顯示的信息。

九、單擊「肯定」。出現第二個 GridView 控件，將分級和用戶註釋顯示爲示例數據。

十、選擇「GridView2」控件，在「屬性」中將「可見」設置爲「False」。僅當用戶在第一個 GridView 控件中選擇了書時，纔會顯示第二個 GridView 控件。

如今能夠配置第一個 GridView 控件以容許用戶選擇書。您還將添加一段代碼（該代碼基於用戶的選擇建立一個 XPath 表達式），並將該表達式指定給 XmlDataSource2 控件。最終結果是第二個 GridView 控件顯示選定的書的用戶註釋。

 

4.二、爲選定內容配置 GridView 控件

一、切換到「設計」視圖，而後選擇第一個「GridView」控件。

二、在「GridView 任務」菜單中，選擇「啓用選定內容」。一個新列即添加到 GridView 控件中，該列包含一個連接按鈕，其文本爲「選擇」。

三、在「屬性」中，將「DataKeyNames」設置爲「ISBN」。能夠單擊屬性框以選擇該值。GridView 控件通過這樣配置後，即將 ISBN 屬性視爲 XML 數據中每一個元素的主鍵。

四、單擊「GridView」控件。在「屬性」窗口中，從「屬性」窗口頂部的下拉列表中選擇「事件」。即會顯示與該控件關聯的全部事件。

五、雙擊「SelectedIndexChanged」事件的框。便可切換到代碼編輯器，併爲 SelectedIndexChanged 事件建立一個主幹處理程序。

六、將下面突出顯示的代碼添加處處理程序中。

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.三、使用 XPath 表達式測試篩選

一、查看 Default.aspx 頁而後按 Ctrl+F5 運行該頁。即會顯示該頁，其中網格中是書的信息。

二、單擊第一本書旁邊的「選擇」連接。該書的註釋即顯示在第二個網格中。

三、單擊最後一本書旁邊的「選擇」連接。不會顯示任何註釋，由於該書沒有註釋。

 

5、使用自定義佈局顯示 XML 數據

若要建立數據的自定義佈局，可使用 DataList 控件。在 DataList 控件中，能夠定義一個或多個模板。每一個模板都包含靜態文本和若干控件的組合，其中文本和控件的佈局能夠隨意安排。

在這部分演練中，將使用一個 DataList 控件來顯示原來用 GridView2 控件顯示的信息。可是，您能夠爲用戶註釋建立自定義佈局。

 

5.一、使用自定義佈局顯示 XML 數據

一、切換到「設計」視圖，單擊「GridView2」控件，而後按 Delete 將其從頁中移除。

二、在「工具箱」中，從「數據」組中將「DataList」控件拖到頁上。

三、在「DataList 任務」菜單的「選擇數據源列表」中，單擊「XmlDataSource2」。用於 GridView2 控件的數據源將用於 DataList 控件。

四、在「屬性」中，將「可見」設置爲「false」。

五、若是智能標記未出現，則請右擊「DataList」控件，而後單擊「顯示智能標記」。

六、在「DataList 任務」菜單中，單擊「編輯模板」，而後在「顯示」框中單擊「項模板」。DataList 控件出現，其中有一個用於項模板的可編輯區域。該模板包含由靜態文本和 Label 控件組成的默認佈局，這些控件被綁定到數據記錄中的 Rating 和 Comment 列。（DataList 控件可以推斷它將顯示的數據結構，由於在本演練前面部分中爲 XmlDataSource2 控件定義了一個靜態 XPath 表達式。）

七、在可編輯區域中，將第一個標題更改成「用戶分級：」。

八、將標題「註釋」更改成「註釋：」。

九、右擊「DataList」控件的標題欄，指向「編輯模板」，而後單擊「分隔符模板」。DataList 控件中顯示另外一個可編輯區域，該區域用於定義將在每一個數據記錄之間顯示的元素的佈局。

十、在「工具箱」中，從「HTML」組中將「水平標尺」控件拖到該可編輯區域中。

十一、右擊「DataList」控件，而後單擊「結束模板編輯」。

十二、右擊該頁，而後單擊「查看代碼」，切換到該頁的代碼。

1三、在「GridView1_SelectedIndexChanged」處理程序中，更改下面的行：

      GridView2.Visible = true; 更改成下面的內容：DataList1.Visible = true;

     

5.二、測試自定義佈局

一、查看 Default.aspx 頁而後按 Ctrl+F5 運行該頁。即會顯示該頁，其中網格中是書的信息。

二、單擊第一本書旁邊的「選擇」連接。列表中顯示第一本書的註釋。

三、單擊最後一本書旁邊的「選擇」連接。不會顯示任何註釋，由於該書沒有註釋。

 

6、使用轉換來重構 XML 數據

本演練中使用的 .xml 文件已結構化，所以，每一個元素的屬性 (Property) 都表示爲屬性 (Attribute)。在許多狀況下，所使用的 .xml 文件在結構上徹底不一樣。例如，.xml 文件中的值一般是做爲具備內部文本的元素建立的。

若是 .xml 文件中屬性 (Property) 值不是表示爲屬性 (Attribute) 格式，則能夠建立一個轉換文件 (.xslt)，該文件能夠動態從新設置 .xml 文件的格式，以使其與 XmlDataSource 控件兼容。

在本部分演練中，將使用一個 .xml 文件，它包含的數據與前面使用的 Bookstore.xml 文件中的數據相同。可是，這些數據的結構與 Bookstore.xml 文件中的結構不一樣，所以，須要使用轉換來動態從新設置數據格式。

 

開始時，將建立另外一個 .xml 文件。

 

6.一、建立第二個 .xml 文件

一、在解決方案資源管理器中，右擊 App_Data 文件夾，而後單擊「添加新項」。

二、在「Visual Studio 已安裝的模板」之下單擊「XML 文件」。

三、在「名稱」框中鍵入「Bookstore2.xml」。

四、單擊「添加」。即建立了一個僅包含 XML 指令的新 .xml 文件。

五、複製下面的 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>

      六、保存 Bookstore2.xml 文件，而後將其關閉。

如今須要一個轉換文件，將 Bookstore2.xml 文件中的數據轉換爲 XmlDataSource 控件所使用的基於屬性的格式。

 

6.二、建立轉換文件

一、在解決方案資源管理器中，右擊 App_Data 文件夾，而後單擊「添加新項」。

二、在「Visual Studio 已安裝的模板」之下單擊「文本文件」。沒有轉換文件模板，所以能夠經過建立具備正確擴展名的文本文件的方式來建立。

三、在「名稱」框中鍵入「Bookstore2.xsl」。說明： 請務必使用 .xsl 擴展名。

四、單擊「添加」。即建立了一個新的空白文件。

五、複製下面的轉換代碼，而後將其粘貼到該文件中。

<?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>

      六、保存 Bookstore2.xsl 文件，而後將其關閉。

從如今開始，能夠用相似於本演練前面部分的方式處理 XML 數據，不一樣之處在於，在配置 XmlDataSource 控件時能夠指定該轉換文件。在本演練的最後部分，將建立一個新頁，而後重複本演練第一部分中的某些步驟。可是，此次將顯示 Bookstore2.xml 文件中的數據。

 

6.三、配置對 .xml 文件的數據訪問權限

一、在解決方案資源管理器中，右擊網站的名稱，而後單擊「添加新項」。

二、在「Visual Studio 已安裝的模板」之下單擊「Web 窗體」。

三、在「名稱」框中鍵入「Bookstore2.aspx」。

四、單擊「添加」。

五、切換到「設計」視圖。

六、在「工具箱」中，從「數據」組中將「XmlDataSource」控件拖到頁上。

七、在「XmlDataSource 任務」菜單中，單擊「配置數據源」。出現「配置數據源」對話框。

八、在「數據文件」框中，鍵入「~/App_Data/Bookstore2.xml」。

九、在「轉換文件」框中，鍵入「~/App_Data/Bookstore2.xsl」。

十、單擊「肯定」。

十一、在「工具箱」中，從「數據」組中將「GridView」控件拖到頁上。

十二、在「GridView 任務」菜單的「選擇數據源」列表中，單擊「XmlDataSource1」。

1三、按 Ctrl+F5 運行該頁。該頁在網格中顯示 XML 數據。像之前同樣，這些數據將顯示在第一頁的網格中，即便此次基礎 .xml 文件的格式不一樣，也是如此。