逐步解說：將網站巡覽加入至網站中

  • 發行項

更新：2007 年 11 月

在不僅僅包含數個網頁的任何網站中，很難建構讓使用者在網頁之間可自由移動的巡覽系統，尤其是在您變更網站時。ASP.NET 站台巡覽可讓您建立網頁的集中式網站導覽。

這個逐步解說會示範如何設定網站導覽，以及如何使用依賴網站導覽的控制項將巡覽加入網站中的網頁。

在此逐步解說期間，您將了解如何進行下列作業：

  • 建立具有範例網頁和描述網頁的配置之網站導覽檔案的網站。

  • 使用 TreeView 控制項做為可讓使用者跳至網站中任何網頁的巡覽功能表。

  • 使用 SiteMapPath 控制項以加入巡覽路徑 (也稱為 Breadcrumb)，該巡覽路徑可讓使用者從目前網頁檢視並向上移動網站階層。

  • 使用 Menu 控制項以加入巡覽功能表，該功能表可讓使用者一次檢視一層節點。將滑鼠指標停留在具有子節點的節點上會產生子節點的子功能表。

  • 在主版頁面 (Master Page) 上使用站台巡覽和控制項，以便您只需定義站台巡覽一次。

必要條件

若要完成這個逐步解說，您必須進行下列步驟：

  • Microsoft Visual Web Developer Web 開發工具。

  • .NET Framework。

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

建立具有範例網頁和網站導覽的網站

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

建立檔案系統網站

若要建立檔案系統網站

  1. 開啟 Visual Web Developer。

  2. 在 [檔案] 功能表上，按一下 [新網站] (或在 [檔案] 功能表上，按一下 [新增]，再按 [網站])。

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

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

  4. 在最左邊的 [位置] 方塊中，按一下 [檔案系統]，然後在最右邊的 [位置] 方塊中，輸入您想要用來保存網站網頁的資料夾名稱。

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

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

    您選擇的程式語言將成為網站的預設值，不過您可以為每個網頁分別設定程式語言。

  6. 按一下 [確定]。

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

建立網站導覽

若要使用站台巡覽，您需要一種方法描述如何配置網站的網頁。預設方法是建立包含網站階層的 .xml 檔，該網站階層包含網頁標題和 URL。

.xml 檔案的結構反映了網站的結構。每個網頁都表示為網站導覽中的 siteMapNode 項目。最上層的節點表示首頁，而子節點則表示網站深層的網頁。

若要建立網站導覽

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

  2. 在 [加入新項目 <路徑>] 對話方塊中：

    1. 在 [Visual Studio 安裝的範本] 下，按一下 [網站導覽]。

    2. 請確定 [名稱] 方塊中的名稱為 Web.sitemap。

      注意事項：

      檔案必須命名為 Web.sitemap，且必須出現在網站的根目錄中。

    3. 按一下 [加入]。

  3. 複製下列 XML 內容至 Web.sitemap 檔中，覆寫預設內容。

    <siteMap>
  <siteMapNode title="Home" description="Home" url="~/home.aspx" >
    <siteMapNode title="Products" description="Our products"
         url="~/Products.aspx">
        <siteMapNode title="Hardware" 
             description="Hardware we offer" 
             url="~/Hardware.aspx" />
        <siteMapNode title="Software" 
             description="Software for sale" 
             url="~/Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" description="Services we offer" 
        url="~/Services.aspx">
        <siteMapNode title="Training" description="Training" 
            url="~/Training.aspx" />
        <siteMapNode title="Consulting" description="Consulting" 
            url="~/Consulting.aspx" />
        <siteMapNode title="Support" description="Support" 
            url="~/Support.aspx" />
      </siteMapNode>
  </siteMapNode>
</siteMap>

    Web.sitemap 檔包含一組巢狀 (Nest) 為三層的 siteMapNode 項目。每個項目的結構都相同。它們之間的唯一區別是在 XML 階層中的位置。

    在範例 .xml 檔中定義之網頁的 URL 不合格。這表示將所有網頁都視為具有相對於應用程式根目錄的 URL。然而，您可為特定的網頁指定任何 URL，也就是說，您在網站導覽中定義的邏輯結構無需與資料夾中網頁的實體配置相符。

  4. 儲存檔案，然後關閉檔案。

建立要巡覽的網頁

在本小節中，您只會建立前一節所定義之網站導覽中所描述的一些網頁 (該網站導覽較完整，因此在測試此逐步解說中的網頁時，您將能夠檢視完整的階層架構)。

若要建立要巡覽的網頁

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

  2. 在 [加入新項目 <路徑>] 對話方塊中：

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

    2. 在 [名稱] 方塊中，輸入 Home.aspx，然後按一下 [加入]。

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

  4. 在 Home.aspx 網頁上，輸入首頁，然後將其格式化為 [標題 1]。

    重複這個程序並建立四個名為 Products.aspx、Hardware.aspx、Software.aspx 和 Training.aspx 的其他網頁。使用網頁的名稱 (例如，產品) 做為標題，以便您在瀏覽器顯示該網頁時可以辨認每個網頁。

    您要特別建立哪個網頁並不重要。這個程序中列出的這些網頁只是建議，以便讓您查看巢狀為三層的網站階層。

使用 TreeView 控制項建立巡覽功能表

既然已經具有網站導覽和部分網頁，您就可以將巡覽加入網站。您將使用 TreeView 控制項做為可摺疊的巡覽功能表。

vbVenusSiteNavigation_TreeView1 影像

若要加入樹狀目錄樣式巡覽功能表

  1. 開啟 Home.aspx 網頁。

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

    在其預設的組態中，SiteMapDataSource 控制項會從您之前在這個逐步解說之「建立網站導覽」中建立的 Web.sitemap 檔中，擷取其相關資訊，以便您無需指定控制項的任何其他資訊。

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

  4. 在 [TreeView 工作] 功能表上的 [選擇資料來源] 方塊中，按一下 [SiteMapDataSource1]。

  5. 儲存 Web 網頁。

測試樹狀目錄樣式巡覽功能表

您現在可以執行巡覽系統的過渡測試。

若要測試巡覽功能表

  1. 按 CTRL+F5 執行 Home.aspx 網頁。

    樹狀目錄顯示兩層節點。

  2. 按一下 [產品] 以檢視產品網頁。

    • 如果您未建立 Products.aspx 網頁，請按一下您已建立之網頁的連結。

在網站的目前狀態中，巡覽功能表只在首頁上出現。您可以對應用程式中的每個頁面加入相同的 SiteMapDataSource 和 TreeView 控制項，以便在每個頁面上都顯示巡覽功能表。然而，稍後在本逐步解說中，您將看到如何將巡覽功能表置於主版頁面上，以便巡覽功能表自動出現在每一網頁上。

使用 SiteMapPath 控制項顯示巡覽記錄

除了使用 TreeView 控制項建立巡覽功能表之外，您還可以在顯示網頁於目前階層中所處位置的每一網頁上，加入巡覽。這種巡覽控制項也稱為 Breadcrumb。ASP.NET 會提供可以自動實作頁面巡覽的 SiteMapPath 控制項。

若要顯示巡覽記錄

  1. 開啟 Products.aspx 網頁，並切換至 [設計] 檢視。

  2. 從 [工具箱] 的 [巡覽] 群組中，將 SiteMapPath 控制項拖曳至網頁，將游標置於 SiteMapPath 控制項之前，然後按 ENTER 建立新行。

    SiteMapPath 控制項會顯示目前網頁在頁面階層中的位置。根據預設，SiteMapPath 控制項表示在 Web.sitemap 檔中建立的階層。例如，顯示 Products.aspx 網頁時，SiteMapPath 控制項會顯示下列路徑：

    首頁 > 產品

  3. 為您已在這個逐步解說中建立的其他網頁 (首頁除外)，重複這個程序。

    即使您沒有將 SiteMapPath 控制項置於每個網頁上，但是為了進行測試，在網站階層之每個層級的網頁上 (例如，在 Products.aspx 和 Hardware.aspx 網頁上) 都需要有控制項。

測試巡覽記錄

您可藉由檢視處於階層之第二和第三層上的網頁，測試頁面巡覽。

若要測試頁面巡覽

  1. 開啟 Home.aspx 網頁，然後按 CTRL+F5 執行頁面。

  2. 使用 TreeView 控制項以移至產品網頁。

    在您放置 SiteMapPath 控制項之網頁所在的位置上，會看到與下列相似的路徑：

    首頁 > 產品

  3. 按一下 [首頁] 以返回首頁。

  4. 使用 TreeView 控制項以移至硬體頁面。

    此時您會看到與下列相似的路徑：

    首頁 > 產品 > 硬體

SiteMapPath 控制項顯示的所有網頁名稱都是連結，但最後一個除外，它表示目前網頁。您可藉由將 SiteMapPath 控制項的 RenderCurrentNodeAsLink 屬性設為 true，讓目前節點成為連結。

SiteMapPath 控制項可讓使用者向上移動網站階層，但不允許他們跳至不處於目前階層路徑中的網頁。

使用 Menu 控制項建立巡覽功能表

除了使用 TreeView 控制項建立巡覽功能表之外，您還可以使用 Menu 控制項以顯示可讓使用者一次檢視一層節點之可展開的巡覽功能表。將滑鼠指標停留在具有子節點的節點上會產生子節點的子功能表。

若要加入功能表樣式巡覽功能表

  1. 開啟 Products.aspx 網頁，並切換至 [設計] 檢視。

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

  3. 在 [功能表工作] 功能表的 [選擇資料來源] 方塊中，按一下 [NewDataSource]。

  4. 在 [設定資料來源 - <Datasourcename>] 精靈中，按一下 [網站導覽]，再按 [確定]。

  5. 儲存 Web 網頁。

測試功能表樣式巡覽功能表

您現在可以執行巡覽系統的過渡測試。

若要測試巡覽功能表

  1. 關閉 [功能表工作]。

  2. 開啟 Home.aspx。

  3. 按 CTRL+F5 執行 Home.aspx 網頁。

    樹狀目錄顯示兩層節點。

  4. 按一下 [產品] 以檢視產品網頁。

    • 如果您未建立 Products.aspx 網頁，請按一下您已建立之網頁的連結。

  5. 在巡覽功能表上，將滑鼠指標停留在 [首頁] 連結上，以展開功能表。

在網站的目前狀態中，巡覽功能表只在首頁上出現。您可以對應用程式中的每個頁面加入相同的 SiteMapDataSource 和 Menu 控制項，以便在每個頁面上都顯示巡覽功能表。然而，在這個逐步解說的下一節中，您將看到如何將巡覽功能表置於主版頁面上，以便它自動出現在每一網頁上。

將站台巡覽與主版頁面結合

到目前為止，在這個逐步解說中建立的網頁中，您已將站台巡覽控制項分別加入每個網頁。這樣做並不是特別複雜，因為您無需對每個網頁分別設定控制項。然而，這會增加網站的維護成本。例如，若要變更網站中網頁之 SiteMapPath 控制項的位置，您必須分別變更每個網頁。

您可以將站台巡覽控制項與主版頁面搭配使用，以建立包含將巡覽控制項置於一個位置的配置。然後您可以將網頁做為主版頁面中的內容顯示。

若要建立用於巡覽的主版頁面

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

  2. 在 [加入新項目 <路徑>] 對話方塊中：

    1. 在 [Visual Studio 安裝的範本] 下，按一下 [主版頁面]。

    2. 在 [名稱] 方塊中，輸入 Navigation.master，然後按一下 [加入]。

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

    會出現具有預設 ContentPlaceHolder 控制項的主版頁面。

在下列程序中，您將建立具有巡覽控制項之簡單配置的主版頁面。在實際的應用程式中，您可能會使用更複雜的格式，但在主版頁面上使用巡覽控制項的技術都是相似的。

若要將巡覽控制項加入主版頁面

  1. 選取 [ContentPlaceHolder] 控制項，按向左鍵，然後按 ENTER。

    這會在 ContentPlaceHolder 控制項之前插入空白行。

  2. 從 [工具箱] 的 [資料] 群組中，將 SiteMapDataSource 控制項拖曳至主版頁面，並將其置於 [ContentPlaceHolder] 控制項之上。

    注意事項：

    不要將 SiteMapDataSource 控制項置於 ContentPlaceHolder 控制項之上。

    根據預設，SiteMapDataSource 控制項會使用之前在這個逐步解說之「建立網站導覽」中建立的 Web.sitemap 檔。

  3. 按一下 [SiteMapDataSource] 控制項，然後按向右鍵，再按 ENTER 鍵。

    這會在 SiteMapDataSource 控制項之下插入空白行。

  4. 按一下 [表格] 功能表上的 [插入表格]，然後插入一個具有一列二行、寬度為百分之百的表格。

  5. 從 [工具箱] 的 [巡覽] 群組中，將 [TreeView] 控制項拖曳至表格的左儲存格。

  6. 在 [TreeView 工作] 功能表上的 [選擇資料來源] 方塊中，按一下 [SiteMapDataSource1]。

  7. 從 [工具箱] 的 [巡覽] 群組中，將 [SiteMapPath] 控制項拖曳至表格的右儲存格。

  8. 在右儲存格中，按一下空白區域，再按 SHIFT+ENTER 建立新行。

  9. 將 [ContentPlaceholder] 控制項拖曳至表格的右儲存格，並將它置於 [SiteMapPath] 控制項之下。

使用主版頁面時，在網站中建立網頁做為內容頁面。內容頁面會使用 Content 控制項，以定義在主版頁面之 ContentPlaceholder 控制項中所顯示的文字和控制項。因此，您必須重新建立首頁、產品和硬體網頁做為內容頁面。

若要建立網站的內容頁面

  1. 在 [方案總管] 中，以滑鼠右鍵按一下 [Home.aspx] 網頁，按一下 [刪除]，然後按一下 [確定]。

  2. 對 Products.aspx、Software.aspx、Training.aspx 和 Hardware.aspx 網頁，以及您已建立的任何其他網頁重複步驟 1。

    您會重新建立網頁，做為使用主版頁面的內容頁面。

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

  4. 在 [加入新項目] 對話方塊中：

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

    2. 在 [名稱] 方塊中，輸入 Home.aspx。

    3. 選取 [選取主版頁面] 核取方塊。

    4. 按一下 [加入]。

    [選擇主版頁面] 對話方塊隨即出現。

  5. 在 [資料夾內容] 下，按一下 [Navigation.master]，再按 [確定]。

    您所建立的內容頁面會繫結至您在上一節中建立的主版頁面。

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

    在 [設計] 檢視中，您會看到為主版頁面建立的配置，其中的可編輯區域會對應至主版頁面上的 ContentPlaceHolder1 控制項。

  7. 按一下 [Content] 視窗內部。

    這是您可加入此特定網頁之內容的位置。

  8. 輸入首頁，然後將文字格式化為 [標題 1]。

    您已建立首頁的靜態 (Static) 文字 (特別是，標題)。

  9. 重複步驟 3 到 8 以建立 Products.aspx 內容頁面和 Hardware.aspx 內容頁面。在步驟 8 中，分別輸入產品和硬體，而不是首頁。

測試主版頁面中的巡覽控制項

測試主版頁面和內容頁面等同於測試個別網頁。

若要測試主版頁面中的巡覽控制項

  1. 開啟 Products.aspx 網頁，然後按 CTRL+F5 執行頁面。

    產品內容頁面會與主版頁面合併。在瀏覽器中，您會看到包含已加入至主版頁面之產品標題和巡覽控制項的網頁。

  2. 在 TreeView 控制項中，按一下 [硬體]。

    硬體網頁與產品網頁顯示的配置相同，但 SiteMapPath 控制項顯示的路徑不同。

後續步驟

這個逐步解說說明 ASP.NET 站台巡覽和巡覽控制項的基本功能。您可能會想要實驗其他的巡覽功能。例如，您可能會想要進行下列動作：

  • 格式化 SiteMapPath 控制項以自訂其外觀。該控制項支援管理如何顯示連結的許多選項。如需詳細資訊，請參閱 SiteMapPath。

  • 在 TreeView 控制項中自訂網頁的顯示畫面。例如，您可能會反白顯示樹狀檢視節點中的目前網頁。

  • 以程式的方式使用站台巡覽資訊。目前網頁上有 SiteMapPath 控制項，您可使用它以程式的方式顯示巡覽資訊。

  • 使用不同的資料存放區儲存網站導覽資訊。您可能要使用現有的網站導覽，或將網站導覽資訊儲存在資料庫中，而不是使用預設 XML 網站導覽檔案。ASP.NET 狀態巡覽會使用提供者模式。您可建立管理網站導覽資訊的元件，然後將應用程式設定為使用該元件，而不是預設網站導覽提供者。如需詳細資訊，請參閱 ASP.NET 網站巡覽提供者。

請參閱

工作

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

逐步解說：在 Visual Web Developer 中建立和使用 ASP.NET 主版頁面

概念

ASP.NET 網站巡覽概觀

ASP.NET 網站導覽

ASP.NET 主版頁面概觀

設定 ASP.NET 網站巡覽的安全性

設定資料存取的安全性

其他資源

裝載環境中 ASP.NET 應用程式的安全性

ASP.NET Web 應用程式的基本安全性實務