共用方式為

逐步解說：使用轉換在 Web Form 網頁中顯示 XML 文件

  • 發行項

更新：2007 年 11 月

此逐步解說將說明如何在 Web 網頁上顯示來自 XML 文件的資訊。您將在逐步解說中建立一個簡單的 XML 檔案。然後使用 ASP.NET 伺服器控制項和 XSLT 轉換，在 Web 網頁上顯示 XML 檔案的內容。

注意事項：

您也可以將 XML 檔案做為資料來源，並使用控制項 (例如 GridView 控制項) 顯示其內容。如需詳細資訊，請參閱逐步解說：建立可以顯示 XML 資料的 Web 網頁。

在 Web 網頁上顯示 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 Web 伺服器控制項 (Visual Studio))。這個控制項就像您 ASP.NET Web 網頁上的預留位置。您可以把它的屬性設定成某一個 XML 檔或 SXL 轉換。在處理頁面時，此控制項會讀取 XML、套用轉換，並顯示結果。

如需 XSL 的詳細資訊，請參閱 使用 XslTransform 類別進行 XSLT 轉換。

本逐步解說說明如何使用 Xml 伺服器控制項，透過 XSL 轉換，來顯示 XML 資訊。這個案例中有下列項目：

  • 一個 XML 檔，內含數個虛構電子郵件訊息。

  • 兩個 XSL 轉換。一個只顯示電子郵件訊息的日期、傳送者和主旨。另一個則顯示完整的電子郵件訊息。

    注意事項：

    所有這些檔案都是逐步解說提供的一部分。

您將建立一個 Web 網頁，讓使用者以兩種不同方式來顯示 XML 資訊。網頁內含一個 [僅標題] 核取方塊，預設中，此核取方塊會勾起來。因此，轉換的預設會只顯示電子郵件訊息的標題。如果使用者清除該核取方塊，則會重新顯示包含完整電子郵件訊息的 XML 資訊。

必要條件

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

  • Visual Studio 2008 或 Visual Web Developer。

您也應該對 Visual Web Developer 的運作有一般了解。如需 Visual Web Developer 的簡介，請參閱逐步解說：在 Visual Web Developer 中建立基本 Web 網頁。

建立網站和 Web 網頁

在這部分的逐步解說中，將會建立一個網站，並在此網站中加入新頁面。在此逐步解說中，您將建立檔案系統網站，不需要使用 Microsoft Internet Information Services (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] 資料夾，然後按一下 [加入新項目]。

    注意事項：

    當您將 XML 檔案放入 [App_Data] 資料夾時，它便自動具有正確的使用權限，允許 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。

    注意事項：

    請確定副檔名是 .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>
    注意事項：

    您可依自己的需求調整這個樣板；例如，您可變更色彩、字型大小、樣式或其他功能。

  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 檔案和兩個轉換，就可以使用它們在 Web 網頁中顯示資訊。您可使用 Xml 伺服器控制項來這麼做。

若要加入 XML 控制項

  1. 開啟或切換至 Default.aspx 網頁。

  2. 切換至 [設計] 檢視。

  3. 從 [工具箱] 的 [標準] 索引標籤中，將 [Xml] 控制項拖曳至頁面。

    用以表示 [Xml] 控制項的灰色方塊會被加入至頁面。

  4. 選取控制項，然後在 [屬性] 視窗中設定下列屬性。

    Property

    設定

    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 Web 網頁中顯示 XML 檔案的內容。不過您可能想要自己建立或修改 XML 檔。如需詳細資訊，請參閱 XML 文件和資料。如需寫入 XML 檔案的範例，請參閱逐步解說：使用 AdRotator 控制項顯示和追蹤廣告。

請參閱

其他資源

XML Web 伺服器控制項 (Visual Studio)