共用方式為

逐步解說：在 Web 網頁上顯示功能表

  • 發行項

更新：2007 年 11 月

此逐步解說說明如何在網頁上放置和設定 ASP.NET Menu 控制項。

不論多複雜的網站，它都有一個通用方面，即巡覽功能表。您可以使用 ASP.NET 中的 Menu 控制項輕鬆地設定複雜的巡覽功能表，而不需撰寫程式碼。

Menu 控制項允許多個顯示選項，包括功能表完全公開的靜態顯示，和以滑鼠指標顯示之部分的功能表在父功能表項目上移動的動態顯示。控制項也提供靜態和動態顯示模式的組合，此組合允許一系列靜態的，但具有以動態方式顯示之子功能表項目的根項目。

您可以在設計工具中使用頁面的靜態連結設定 ASP.NET Menu 控制項，或者，也可以將其自動繫結至階層式資料來源，例如 XmlDataSource 或 SiteMapDataSource 控制項。

逐步解說將說明的工作包括：

  • 建立基本功能表並設定它靜態連結至頁面。

  • 建立繫結至 Web.sitemap XML 檔案之較為複雜的功能表。

  • 調整功能表的方向。

  • 設定多個層級的靜態顯示還是動態顯示。

必要條件

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

  • Microsoft Visual Web Developer (Visual Studio)。

  • .NET Framework。

建立網站

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

若要建立檔案系統網站

  1. 開啟 Visual Web Developer。

  2. 在 [檔案] 功能表上，按一下 [新網站]。

    [新網站] 對話方塊隨即出現。

  3. 請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。

  4. 在 [位置] 方塊中，輸入您想要用來保存網站頁面的資料夾名稱。

    例如，輸入資料夾名稱 C:\WebSites。

  5. 在 [語言] 清單中，請按一下您想要操作的程式語言。

  6. 按一下 [確定]。

    Visual Web Developer 會建立資料夾和命名為 Default.aspx 的新頁面。

建立基本功能表

為頁面建立功能表的第一個步驟是放置 Menu 控制項。

若要將功能表控制項加入至頁面

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

  2. 從 [工具箱] 的 [巡覽] 控制項群組中，將 [功能表] 控制項拖曳至頁面。

在這個範例中，您將建立水平而非垂直放置的功能表。

若要水平放置功能表控制項

  • 以滑鼠右鍵按一下 [功能表] 控制項，然後按一下 [屬性]，再將 [方向] 設定為水平。

設定基本功能表

在本章節中，您將使用「功能表項目編輯器」定義功能表項目。

若要編輯功能表控制項目

  1. 以滑鼠右鍵按一下 [功能表] 控制項，然後按一下 [編輯功能表項目]。

    [功能表項目編輯器] 隨即出現。

  2. 請在 [項目] 底下，按一下 [加入根項目] 圖示。

  3. 在新項目的 [屬性] 下方，將 [文字] 設定為 Home，並將 [NavigateURL] 設定為 Default.aspx。

  4. 請在 [項目] 底下，按一下 [加入根項目] 圖示。

  5. 在 [屬性] 下方，將 [文字] 設定為 Products，並將 [NavigateURL] 設定為 Products.aspx。

  6. 請在 [項目] 底下，按一下 [加入根項目] 圖示。

  7. 在 [屬性] 下方，將 [文字] 設定為 Services，並將 [NavigateURL] 設定為 Services.aspx。

  8. 按一下 [確定]。

如果您查看 Default.aspx 的來源，則將看到功能表項目和連結在控制項中都是以宣告方式陳述。

若要建立目標頁面

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

  2. 按一下 [Web Form]，將檔案命名為 Products.aspx，然後再按 [加入]。

  3. 重複前面的步驟，並建立名稱為 Services.aspx 的檔案。

測試功能表

只要頁面和功能表都已就定位，您就可以放手一試。

若要測試功能表控制項

  1. 在 [方案總管] 中按一下 [Default.aspx]，然後再按 CTRL+F5 執行 Default.aspx 頁面。

  2. 在項目上移動指標；頁面底部之瀏覽器的狀態列 (如果可見) 將顯示連結的頁面。

  3. 按一下連結跳至該頁面。

建立繫結至網站導覽的功能表

在最後的章節中，您建立了在頁面中以宣告方式設定的簡單靜態功能表。在本章節中，您會略過直接編輯 Menu 控制項目，而是將該控制項繫結至 Web.sitemap 檔案做為 XML 資料來源。這可讓 Menu 控制項的結構在不同的 XML 檔案中維護，此檔案可輕鬆地進行更新，而不需修改頁面或使用設計工具。

對於這個範例，您將使用第二個 Menu 控制項。

若要建立第二個功能表控制項

  • 從 [工具箱] 的 [巡覽] 群組中，將第二個 [功能表] 控制項拖曳至 Default.aspx 頁面。

接著，您將需要要繫結的 Web.sitemap 檔案。

若要建立網站導覽檔案

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

  2. 在 [加入新項目 <Websitename>] 對話方塊中，按一下 [網站導覽]。

  3. 按一下 [加入]。

  4. 將下列 XML 程式碼放置於 Web.sitemap 檔案中。

    XML 表示功能表的結構。巢狀節點則成為父節點功能表項目的子功能表項目。

    <siteMap>
  <siteMapNode title="Home" description="Home" url="default.aspx" >
    <siteMapNode title="Products" description="Our products" 
     url="Products.aspx">
      <siteMapNode title="Hardware" 
       description="Hardware choices"
       url="Hardware.aspx" />
      <siteMapNode title="Software" 
       description="Software choices" 
       url="Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" 
     description="Services we offer" 
     url="Services.aspx">
      <siteMapNode title="Training" 
       description="Training classes" 
       url="Training.aspx" />
      <siteMapNode title="Consulting" 
       description="Consulting services" 
       url="Consulting.aspx" />
      <siteMapNode title="Support" 
       description="Support plans" 
       url="Support.aspx" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

  5. 儲存檔案。

繫結至網站導覽

現在，您可以建立指向 Web.sitemap 檔案的巡覽資料來源，並將 Menu 控制項與它繫結起來。

若要將功能表控制項繫結至網站導覽

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

  2. 按一下智慧標籤顯示 [功能表工作] 對話方塊。

  3. 在 [功能表工作] 對話方塊的 [選擇資料來源] 下拉式清單中，按一下 [新增資料來源]。

    [資料來源組態精靈] 對話方塊便會出現。

  4. 按一下 [網站導覽]。

    在 [指定資料來源的 ID] 下方，預設名稱 [SiteMapDataSource1] 隨即出現。

  5. 按一下 [確定]。

測試網站導覽繫結

只要頁面和功能表都已就定位，您就可以放手一試。

若要測試網站導覽繫結

  1. 按 CTRL+F5 執行 Default.aspx 頁面。

  2. 在第二個垂直功能表的 [Home] 功能表項目上移動指標。

    [Products] 和 [Services] 隨即出現。

  3. 在 [Products] 上移動指標。

    [Hardware] 和 [Software] 隨即出現。

    如果您查看 Default.aspx 的來源程式碼，則將會注意到，與第一個功能表項目不同，項目不以宣告方式指定；而是由 Menu 控制項參考資料來源。

調整靜態和動態層級

在前一章節中建立的垂直功能表會使用完全動態顯示，只是最頂層保持靜態。使用 Menu 控制項，您可以根據暫停滑鼠指標來指定行為，以及指定功能表應該為動態還是靜態。在本章節中，您將調整 Menu 控制項的動態和靜態品質。

若要將功能表控制項的兩個層級設為靜態

  1. 在 [設計] 檢視中的 Default.aspx 頁面上，以滑鼠右鍵按一下第二個 [功能表] 控制項，然後按一下 [屬性]。

  2. 將 [StaticDisplayLevels] 設定為 2。

測試動態功能表

只要頁面和功能表都已就定位，您就可以放手一試。

若要測試動態功能表

  • 按 CTRL+F5 執行 Default.aspx 頁面。

    功能表的前兩個層級會顯示，而第三個層級是動態的。

後續步驟

Menu 控制項可讓您輕鬆地建立巡覽功能表。您可以設定動態或靜態顯示的控制項，並將其繫結至網站導覽 XML 檔案。您可能也會想要實驗下列其他選項：

請參閱

工作

逐步解說：以程式設計方式控制 ASP.NET 功能表

概念

功能表控制項概觀