這是使用 SqlSiteMapProvider 元件製作網站導覽的簡易教學,包含一個現成可用的 SqlSiteMapProvider 元件可供下載,以及從建立資料庫到撰寫程式的逐步教學和動畫演示。

簡介

ASP.NET 網站導覽元件很好用,幾個簡單的滑鼠拖拉點選動作就可以完成網站的選單或樹狀導覽介面了。只是 ASP.NET 內建的網站導覽元件的資料必須來自 XML 檔,比較不實用。我們可以依照 ASP.NET 的提供者模型自行撰寫網站導覽提供者類別,讓網站導覽的資料來自資料庫。

要撰寫自訂的網站導覽提供者,必須先了解 ASP.NET 網站導覽提供者模型,請參考下圖:

SiteMapProvider 架構

資 料提供者扮演顯示層和資料層之間轉接資料的角色,當顯示層的元件需要資料時,就透過預先指定(在 Web.config 中指定)的 provider 類別取得所需的資料,而資料提供者則會到特定的資料來源中將資料取出,供顯示層的元件取用。也因為這樣,所以稱它為提供者。

ASP.NET 提供者模型好用的地方,就在於中間這層資料提供者可任意抽換掉,只要修改應用程式的組態檔就行了。不只是網站導覽提供者,其他提供者類別也有類似的機制。

我不打算說明如何設計自訂的 SiteMapProvider,因此,基本的觀念就大致說到這裡,如果您有興趣了解 ASP.NET provider model 的運作架構與設計模型,建議您閱讀 Dino Esposito 的 Programming Microsoft ASP.NET 2.0 Applications: Advanced Topics。接下來就介紹如何使用 SqlSiteMapProvider 元件來建立網站導覽選單。要特別聲明的是,這個元件的原始作者是 Jeff Prosise,只是我稍微修改過。你也可以參考 Prosise 的文章:The SQL Site Map Provider You've Been Waiting For

逐步教學

1. 首先必須將網站導覽的資料建立於資料庫中,以下是建立 SiteMap 資料表的 SQL 命令:

  CREATE TABLE [SiteMap](
[ID] nvarchar(8) NOT NULL,
[ParentID] nvarchar(8) NULL,
[Title] nvarchar(30) NOT NULL,
[Url] nvarchar(50) NULL,
[Description] nvarchar(256) NULL,
[Roles] nvarchar]256) NULL,
CONSTRAINT [PK_SiteMap] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]

2. 資料表建立好之後,增加幾筆測試資料,可以使用以下 SQL 命令:

  insert into [SiteMap] (ID, ParentID, Title, Url, Description, Roles)
values ('0', NULL, '首頁', '~/Default.aspx', NULL, NULL)

insert into [SiteMap] (ID, ParentID, Title, Url, Description, Roles)
values ('1000', '0', '基本資料維護', NULL, NULL, NULL)

insert into [SiteMap] (ID, ParentID, Title, Url, Description, Roles)
values ('1100', '1000', '員工基本資料維護', "Employee.aspx", NULL, NULL)

insert into [SiteMap] (ID, ParentID, Title, Url, Description, Roles)
values ('1200', '1000', '客戶基本資料維護', "Customer.aspx", NULL, NULL)

insert into [SiteMap] (ID, ParentID, Title, Url, Description, Roles)
values ('2000', '0', '日常作業', NULL, NULL, NULL)

insert into [SiteMap] (ID, ParentID, Title, Url, Description, Roles)
values ('2100', '2000', '進貨作業', "Purchase.aspx", NULL, NULL)


3. 用 SQL Server 工具檢視一下 SiteMap 資料表的內容,以確定之前的操作沒問題。參考以下畫面:

SiteMapProvider 資料

4. 把 SqlSiteMapProvider.cs 放到網站的 App_Code 資料夾底下

註1:App_Code 是網站的特殊資料夾,放在這裡的程式碼可直接在網站中的任何地方使用)。
註2:如果操作步驟不熟,從這個步驟開始可以改看「SqlSiteMapProvider 動畫教學」。(要安裝 Flash 才能觀看)

5. 修改 Web.config,加入連線字串以及網站地圖的設定,例如:

  <configuration>
<connectionStrings>
<add name="SiteMapConnectionString" connectionString="你的連線字串"/>
</connectionStrings>
<system.web>
<siteMap enabled="true" defaultProvider="AspNetSqlSiteMapProvider">
<providers>
<add name="AspNetSqlSiteMapProvider" type="SqlSiteMapProvider"
description="SQL Server site map provider"
securityTrimmingEnabled="true" connectionStringName="SiteMapConnectionString"/>
</providers>
</siteMap>
</system.web>
</configuration>

6. 從 Toolbox 拉一個 SiteMapDataSource 和 TreeView 到網頁上,設定 TreeView1 的 DataSourceID 屬性為 SiteMapDataSource1。

7. 用瀏覽器檢視網頁。

這樣就能快速建立網站的導覽功能了,你可以根據自己的需求修改資料庫的欄位結構和程式碼。

原始程式碼可以在此下載:SqlSiteMapProvider.cs

註:此元件有一個已知的問題,就是當 SiteMap 資料表的資料有變動時,不會反映到網頁上,必須重新啟動 IIS(或回收應用程式集區),才會到資料庫中讀取新的資料。