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 文件的格式不同，也是如此。
轉載于:https://www.cnblogs.com/ranran/p/3866056.html
總結
以上是生活随笔為你收集整理的ASP.NET - 演练：创建网页以显示 XML 数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python 性能剖分工具
- 下一篇： WPF数据绑定(1-简单数据绑定)