逐步解說：建立可以顯示 XML 資料的 Web 網頁

  • 發行項

更新：2007 年 11 月

資料通常以 XML 格式供 Web 應用程式使用。不過，XML 資料原本是階層式資料，而您可能想要在清單架構的控制項 (例如 GridView 或 DropDownList 控制項) 中使用 XML 資料。此逐步解說顯示如何使用 XML 資料，視其存在於表格式資料庫資料表中。

在瀏覽這份逐步解說期間，您將瞭解如何：

  • 使用資料來源控制項讀取 XML 資料並讓其可用於清單控制項。

  • 將 GridView 和 DataList 控制項繫結至 XML 資料。

  • 建立顯示邏輯相關之 XML 資料的主版詳細資料頁面。

  • 將轉換套用至 .xml 檔案，使該檔案可用做表格式資料。

注意事項：

您還可以階層式形式使用 XML。如需詳細資訊，請參閱逐步解說：顯示 TreeView 控制項中的階層式資料。

必要條件

若要完成這個逐步解說，您必須要有：

  • Microsoft Visual Web Developer

  • .NET Framework

此逐步解說假設您知道如何使用 Visual Web Developer。

建立網站

如果您已經在 Visual Web Developer 中建立了網站 (例如，藉由遵循逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟)，可以使用該網站，並繼續進行下一節的步驟。否則，依照下列這些步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

  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 檔案。

若要建立 .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 Web 網頁上的控制項能夠使用資料，請使用資料來源控制項。

若要設定 .xml 檔案的資料存取

  1. 開啟 Default.aspx 檔案，然後切換至 [設計] 檢視。

  2. 從 [工具箱] 的 [資料] 群組中，將 [XmlDataSource] 控制項拖曳至頁面。

  3. 在 [XmlDataSource 工作] 功能表上，按一下 [設定資料來源]。

    [設定資料來源<DataSourceName>] 對話方塊隨即出現。

  4. 在 [資料檔案] 方塊中，輸入 ~/App_Data/Bookstore.xml。

  5. 按一下 [確定]。

XmlDataSource 控制項讓頁面上的控制項能夠使用 .xml 檔案中的資料。可以使用兩種格式的資料：階層式和表格式。繫結至 XmlDataSource 控制項的控制項可取得使用其適用格式的資料。

在這種情形下，Bookstore.xml 檔案的階層會將其自身提供給關聯式解譯。檔案的兩個層級 (書籍和註解) 可視為兩個關聯資料表。

現在，您就可以在清單控制項中顯示 XML 資料。若要開始，請在 GridView 控制項中顯示 XML 資料。

若要將 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 控制項，使其顯示使用者註解。

若要加入 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 設計工具」中的工具判斷最終顯示在控制項中的資訊。

  9. 按一下 [確定]。

    第二個 GridView 控制項隨即出現，將評比和使用者註解顯示為範例資料。

  10. 選取 [GridView2] 控制項，然後在 [屬性] 中，將 [可見] 設定為 [False]。

    只有在使用者於第一個 GridView 控制項中選取了書籍時，第二個 GridView 控制項才會出現。

現在，您可以設定第一個 GridView 控制項，讓使用者選取書籍。您還可以根據使用者所做的選取加入建立 XPath 運算式的程式碼，並將其指派給 XmlDataSource2 控制項。最後結果是第二個 GridView 控制項將顯示所選書籍的使用者註解。

若要為選取設定 GridView 控制項

  1. 切換至 [設計] 檢視，然後選取第一個 [GridView] 控制項。

  2. 在 [GridView 工作] 功能表上選取 [樞紐分析表選取模式]。

    新資料行會加入至 GridView 控制項，包含具有文字 [選取] 的連結按鈕。

  3. 在 [屬性] 中，將 [DataKeyNames] 設定為 [ISBN]。

    您可以按一下屬性方塊選取值。

    這會設定 GridView 控制項，將 ISBN 屬性視為 XML 資料中之每個項目的主索引鍵。

  4. 按一下 [GridView] 控制項。在 [屬性] 視窗中，從 [屬性] 視窗頂端的下拉式清單中選取 [事件]。這會顯示與該控制項關聯的所有事件。

  5. 按兩下 [SelectedIndexChanged] 事件的方塊。

    這會切換至程式碼編輯器，並為 SelectedIndexChanged 事件建立基本架構處理常式。

  6. 將下列以粗體顯示的程式碼加入至處理常式：

    Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, _
    ByVal e As System.EventArgs) _
    Handles GridView1.SelectedIndexChanged
        Dim currentIndex As Integer        currentIndex = GridView1.SelectedIndex        Dim isbn As String        isbn = CStr(GridView1.DataKeys(currentIndex).Value)        XmlDataSource2.XPath = _            String.Format( _            "/bookstore/book[@ISBN='{0}']/comments/userComment", _            isbn)        GridView2.Visible = true
End Sub

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

    程式碼會執行下列事項：

    • 使用 GridView 控制項的 SelectedIndex 屬性對資料索引鍵陣列進行索引，然後傳回選取之資料列的主索引鍵。在這之前，您要將 DataKeyNames 屬性設定為含有 ISBN 編號。

    • 建立包含選取之 ISBN 的新 XPath 運算式。

    • 將新 XPath 運算式指派給 XmlDataSource2 控制項的 XPath 屬性。將新的 XPath 運算式指派給 XPath 屬性會導致 XmlDataSource 控制項重新評估其傳回的資料。而 GridView 控制項又會重新繫結至資料。

    • 將 Visible 屬性設定為 true，這會顯示第二個 GridView 控制項。當建立第二個 GridView 控制項時，以宣告方式將可視性設定為 false，使該控制項在使用者選取書籍前不會出現。

您現在可以測試網頁。

若要使用 XPath 運算式測試篩選

  1. 檢視 Default.aspx 頁面並按 CTRL+F5 以執行該頁面。

    頁面隨即顯示，其中包含書籍相關資訊的方格。

  2. 按一下第一本書旁邊的 [選取] 連結。

    有關該書籍的註解隨即顯示在第二個方格中。

  3. 按一下最後一本書旁邊的 [選取] 連結。

    不會顯示任何註解，因為這本書沒有註解。

以自訂配置顯示 XML 資料

若要建立資料的自訂配置，可以使用 DataList 控制項。在 DataList 控制項中，您可以定義一或多個樣板。每個樣板都包含靜態文字和控制項的組合，您可以以想要的任何配置排列它們。

在這部分的逐步解說中，您將使用 DataList 控制項顯示先前使用 GridView2 控制項顯示的相同資訊。不過，您還可以為使用者註解建立自訂配置。

若要以自訂配置顯示 XML 資料

  1. 切換至 [設計] 檢視，按一下 [GridView2] 控制項，然後再按 DELETE 從頁面將其移除。

  2. 從 [工具箱] 的 [資料] 群組中，將 [DataList] 控制項拖曳至頁面。

  3. 在 [DataList 工作] 功能表上的 [選擇資料來源] 清單中，按一下 [XmlDataSource2]。

    您可以對 DataList 控制項使用與 GridView2 控制項相同的資料來源。

  4. 在 [屬性] 中，將 [可見] 設定為 [false]。

  5. 如果智慧標籤沒有出現，請以滑鼠右鍵按一下 [DataList] 控制項，然後按一下 [顯示智慧標籤]。

  6. 在 [DataList 工作] 功能表上，按一下 [編輯樣板]，然後再於 [顯示] 方塊中，按一下 [項目樣板]。

    DataList 控制項隨即出現，包含項目樣板的可編輯區域。樣板包含由靜態文字和 Label 控制項組成的預設配置，它們會繫結至資料錄中的 [評分] 和 [註解] 資料行。(DataList 控制項可以推斷資料將顯示的結構，因為您先前在此逐步解說中已定義 XmlDataSource2 控制項的靜態 XPath 運算式)。

  7. 在可編輯區域中，將第一個標題變更為使用者評分：。

  8. 將標題註解變更為註解：。

  9. 以滑鼠右鍵按一下 [DataList] 控制項的標題列，指向 [編輯樣板]，然後按一下 [分隔符號樣板]。

    其他可編輯區域會顯示在 DataList 控制項中，此區域用於定義將在每個資料錄之間出現之項目的配置。

  10. 從 [工具箱] 中的 [HTML] 群組中，將 [水平尺規] 控制項拖曳至可編輯區域。

  11. 以滑鼠右鍵按一下 [DataList] 控制項，然後按一下 [結束樣板編輯]。

  12. 以滑鼠右鍵按一下頁面，然後按一下 [檢視程式碼] 以切換至頁面的程式碼。

  13. 在 [GridView1_SelectedIndexChanged] 處理常式中，將下列程式碼行：

    GridView2.Visible = True

    GridView2.Visible = true;

    變更為下列程式碼行：

    DataList1.Visible = True

    DataList1.Visible = true;

您現在可以測試自訂配置。

若要測試自訂配置

  1. 檢視 Default.aspx 頁面並按 CTRL+F5 以執行該頁面。

    頁面隨即顯示，其中包含書籍相關資訊的方格。

  2. 按一下第一本書旁邊的 [選取] 連結。

    有關第一本書的註解隨即顯示在清單中。

  3. 按一下最後一本書旁邊的 [選取] 連結。

    不會顯示任何註解，因為這本書沒有註解。

使用轉換重組 XML 資料

結構化您在此逐步解說中使用的 .xml 檔案，使每個項目的屬性 (Property) 都以屬性 (Attribute) 表示。在許多情況下，您使用的 .xml 檔案會以不同的方式進行結構化。例如，.xml 檔案中的值通常會建立為具有內部文字的項目。

如果您的 .xml 檔案中，屬性 (Property) 值以屬性 (Attribute) 之外的格式表示，則可以建立能夠動態重新格式化 .xml 檔案的轉換檔案 (.xslt)，使其與 XmlDataSource 控制項相容。

在這部分的逐步解說中，您將使用其中包含的資料與先前使用之 Bookstore.xml 檔案相同的 .xml 檔案。不過，資料的結構化方式將與在 Bookstore.xml 檔案中不同，因此您將使用轉換對其進行動態重新格式化。

若要開始本章節，您將建立第二個 .xml 檔案。

若要建立第二個 .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 控制項使用的屬性架構格式。

若要建立轉換檔案

  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 檔案中的資料。

若要設定 .xml 檔案的資料存取

  1. 在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後按一下 [加入新項目]。

  2. 請在 [Visual Studio 安裝的範本] 下方，按一下 [Web Form]。

  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 檔案的格式不同，資料也將如同在第一頁中一樣地出現在方格內。

後續步驟

這份逐步解說只說明了如何使用 XML 文件和轉換的基本步驟。在真正的應用程式中，您常需要更進一步地使用 XML 文件。下列是進一步使用的一些建議：

  • 建立更複雜的轉換。在此逐步解說中，您只看到如何使用轉換的一個範例。XSL 是一種功能強大的語言，不但對建立 HTML 網頁具有完整的支援，而且幾乎可以支援任何從 XML 到其他結構的轉換。

  • 寫入 XML 文件 (而非只是讀取它們)。Xml 控制項簡化了在 ASP.NET Web 網頁中顯示 XML 檔案的內容。不過您可能想要自己建立或修改 XML 檔。如需詳細資訊，請參閱 XML 文件和資料。如需寫入 XML 檔案的範例，請參閱逐步解說：使用 AdRotator 控制項顯示和追蹤廣告。

請參閱

工作

逐步解說：顯示 TreeView 控制項中的階層式資料

逐步解說：在 Visual Web Developer 中建立基本 Web 網頁