共用方式為

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

  • 發行項

更新：2007 年 11 月

這個逐步解說說明如何藉由使用程式碼協調同一網頁上的兩個功能表，以程式方式使用 ASP.NET Menu 控制項。

您可以使用 ASP.NET Menu 控制項，建立網站的巡覽功能表。在這個逐步解說中，您會探索 ASP.NET Menu 控制項的程式設計方面，並建立一起運作之繫結至同一 Web.sitemap 檔的兩個功能表。第一個功能表是靜態顯示的分類功能表，例如產品，服務和支援。它將水平出現在網頁頂部。第二個功能表會水平顯示在第一個功能表的下面。第二個功能表的內容是根據第一個選取的功能表項目決定的。根據第一個功能表的目前選取，您可以程式得方式調整第二個功能表的網站導覽資料來源，以僅顯示與所選分類相關的該部分 Web.sitemap 檔。

必要條件

若要完成這個逐步解說，您將需要：

  • 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 的新頁面。

製作網站導覽檔案

兩個功能表都從站台的 Web.sitemap 檔衍生其內容。您建立的 SiteMapDataSource 物件用於兩個功能表，以確保每一個功能表都顯示網站導覽的適當部分。

若要建立 Web.sitemap 檔

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

  2. 在 [加入新項目] 對話方塊中，選擇 [網站導覽]，然後按一下 [新增]。

  3. 加入下列 XML 程式碼至新檔案。該 XML 表示功能表選擇的階層架構。<siteMapNode> 項目會列入巢狀結構。每個節點都是包含子功能表的功能表項目，而有些子項目本身也具有子項目。在 Home 節點下面有三個次級節點：Hardware、Software 和 Support。它們的下面是各種子分類。

    <?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="Home">
    <siteMapNode title="Products">
      <siteMapNode title="Hardware" url="Default.aspx?node=hardware">
        <siteMapNode title="Mouse"/>
        <siteMapNode title="Keyboard"/>
        <siteMapNode title="NetCard"/>
        <siteMapNode title="Monitor"/>
        <siteMapNode title="PC"/>
      </siteMapNode>
      <siteMapNode title="Software" url="Default.aspx?node=software">
        <siteMapNode title="Spreadsheet"/>
        <siteMapNode title="Word Processor"/>
        <siteMapNode title="Presentation"/>
        <siteMapNode title="Mail"/>
        <siteMapNode title="Games"/>
      </siteMapNode>
      <siteMapNode title="Books" url="Default.aspx?node=books">
        <siteMapNode title="Programming"/>
        <siteMapNode title="Debugging"/>
        <siteMapNode title="Testing"/>
        <siteMapNode title="Web Apps"/>
        <siteMapNode title="WinForm Apps"/>
      </siteMapNode>
    </siteMapNode>
    <siteMapNode title="Services">
      <siteMapNode title="Consulting" url="Default.aspx?node=consulting">
        <siteMapNode title="Processes"/>
        <siteMapNode title="Management"/>
        <siteMapNode title="Recruiting"/>
      </siteMapNode>
      <siteMapNode title="Development" url="Default.aspx?node=development">
        <siteMapNode title="Web Apps"/>
        <siteMapNode title="Enterprise Apps"/>
        <siteMapNode title="Database"/>
      </siteMapNode>
    </siteMapNode>
    <siteMapNode title="Support">
      <siteMapNode title="Drivers" url="Default.aspx?node=drivers">
        <siteMapNode title="Audio"/>
        <siteMapNode title="Network"/>
        <siteMapNode title="Printer"/>
        <siteMapNode title="Modem"/>
      </siteMapNode>
      <siteMapNode title="Manuals" url="Default.aspx?node=manuals">
        <siteMapNode title="Applications"/>
        <siteMapNode title="Troubleshooting"/>
        <siteMapNode title="Installation"/>
        <siteMapNode title="Internet"/>
      </siteMapNode>
      <siteMapNode title="Updates" url="Default.aspx?node=updates">
        <siteMapNode title="Release 1"/>
        <siteMapNode title="Game Package"/>
      </siteMapNode>
    </siteMapNode>
  </siteMapNode>
</siteMap>

  4. 儲存檔案。

製作第一個功能表

第一個功能表會顯示單一層級的靜態 (Static) 功能表項目。它會水平顯示在網頁頂部。

若要建立第一個功能表

  1. 在 [方案總管] 中，按兩下 Default.aspx 網頁以開啟它。

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

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

  4. 在 [屬性] 視窗中，將 [Orientation] 屬性設為 [Horizontal]。

  5. 將 [MaximumDynamicDisplayLevels] 設為 0。

    如此會確定不會有部分功能表以動態 (Dynamic) 飛出方式出現。

  6. 請注意，[StaticDisplayLevels] 會設定為 1。

    這樣只會允許功能表中顯示一個層級。

  7. 按一下 [功能表] 控制項上的智慧標籤。

    [功能表工作] 對話方塊便會出現。

  8. 選擇 [選擇資料來源] 下拉式清單中的 [新增資料來源]。

  9. 在 [資料來源組態精靈] 中，選擇 [網站導覽]。

  10. 接受 [SiteMapDataSource1] 的預設名稱，並按一下 [確定]。

設定第一個資料來源

因為第一個功能表只顯示單一層級的靜態功能表項目，所以您需要設定其資料來源，以顯示 Web.sitemap 檔的適當部分。在這種情況下，它是次級項目：Products、Services 和 Support。

Menu 控制項至 SiteMapDataSource 控制項的預設繫結是讓每個功能表項目成為巡覽連結。因為您想要以程式的方式控制另一個功能表的行為，所以您可以使用自訂繫結，以便這些功能表項目不是充當巡覽連結，而是引發回傳以更新第二個功能表。

若要設定第一個資料來源

  1. 在 [設計] 檢視中檢視 Default.aspx 網頁，然後按一下 [功能表] 控制項上的智慧標籤。

    [功能表工作] 對話方塊便會出現。

  2. 按一下 [編輯 MenuItem Databindings]。

  3. 在 [功能表 DataBindings 編輯器] 的 [可用的資料繫結] 下拉式清單中，選取 [SiteMapNode]，並按一下 [加入]。

  4. 在 [資料繫結屬性] 下拉式清單中選取 [TextField]，並從下拉式功能表中選取 [標題]。按一下 [確定]。

  5. 選取 [SiteMapDataSource] 控制項。

  6. 在 [屬性] 中，將 [ShowStartingNode] 設為 [False]。

建立第二個功能表

第二個功能表是動態的，且其資料來源僅使用部分網站導覽檔案，根據在第一個功能表上所選內容以程式的方式決定。之前您想要功能表靜態顯示其第一個層級，然而您現在想要動態顯示剩餘的 Web.sitemap 檔。

若要建立第二個功能表

  1. 在 [設計] 檢視中檢視 Default.aspx 網頁，然後將第二個 [功能表] 控制項拖曳至網頁的第一個 [功能表] 控制項下。

  2. 在 [屬性] 中，將 [Orientation] 設為 [Horizontal]。

  3. 按一下第二個 [功能表] 控制項上的智慧標籤。

    [功能表工作] 對話方塊便會出現。

  4. 選擇 [選擇資料來源] 下拉式清單中的 [新增資料來源]。

  5. 在 [資料來源組態精靈] 中，選擇 [網站導覽]。

  6. 接受 [SiteMapDataSource2] 的預設名稱，並按一下 [確定]。

設定第二個資料來源

在本節中，您會設定資料來源以僅選取 Web.sitemap 檔的特定區段。若要這樣做，請以第一個功能表中預設的第一個分類開始，這是 Web.sitemap 檔的 Products 區段。然後，您可以使用 [StartingNodeURL] 屬性 (Property) 指示檔案內的特定 URL 屬性 (Attribute)。

若要設定第二個資料來源的起點

  1. 選取 [SiteMapDataSource2]，並將其 [StartingNodeURL] 屬性設為 "Default.aspx?node=hardware"。

  2. 將 [StartingNodeOffset] 設為 -1。

  3. 將 [ShowStartingNode] 設為 [False]。

加入程式碼以協調功能表

若要基於第一個功能表的狀態控制第二個功能表，請攔截第一個功能表的 MenuItemClick 事件，並在程式碼中指示網站導覽之第二個功能表的檢視。

若要在程式碼中協調功能表

  1. 在 [設計] 檢視中檢視 Default.aspx 網頁，並選取 [Menu1]。

  2. 在 [屬性] 中，將 [MenuItemClick] 事件設為 [Menu1_MenuItemClick]。

    如果使用單一檔案的頁面模型，則會在程式碼後置 (Code-Behind) 檔案中針對 Default.aspx 網頁頁面，或在 .aspx 網頁的 he <script> 標記內，建立名為 Menu1_MenuItemClick 的方法。

  3. 將下列反白顯示的程式碼加入至方法。

    Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
  ByVal e As System.Web.UI.WebControls.MenuEventArgs) _
  Handles Menu1.MenuItemClick
  Select Case e.Item.Value
    Case "Products"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware"
    Case "Services"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting"
    Case "Support"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers"
  End Select
End Sub

    protected void Menu1_MenuItemClick(Object sender,    
      System.Web.UI.WebControls.MenuEventArgs e)
{
  switch(e.Item.Value)
  {
    case "Products":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware";
      return;
    case "Services":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting";
      return;
    case "Support":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers";
      return;
  }
}

    先前的程式碼會攔截 [Menu1] 的 Click 事件。不是巡覽至任何位置，而是使用該值決定第二個 Menu 控制項的顯示內容。完成方法是，調整第二個 Menu 控制項之 SiteMapDataSource 控制項的 StartingNodeUrl 屬性。

  4. 儲存檔案。

測試功能表

若要測試兩個功能表之間的互動，請按一下第一個功能表上的項目，並觀察第二個功能表的相應變更。第二個功能表是動態的，包含 Web.sitemap 檔的第三層級。

若要測試功能表

  1. 按 CTRL+F5 執行頁面。

    第一個功能表隨即出現，而第二個功能表的功能表項目位於 Web.sitemap 檔的 [產品] 下。

  2. 按一下第一個功能表中的 [服務]。

    第二個功能表現在會顯示 [查閱] 和 [開發] 動態功能表。

  3. 按一下 [支援]。

    第二個功能表會顯示 [驅動程式]、[手動] 和 [更新] 動態功能表項目。

後續步驟

Menu 控制項可讓您輕鬆建立巡覽功能表，並為更複雜的案例提供程式設計支援。您可能還想要以下列選項進行實驗：

請參閱

工作

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

概念

功能表控制項概觀