開始寫ASP.Net MVC之後,原本在Web Form有許多控制項在MVC大部分都不能用了,包含好用的SiteMapProvider在MVC也不能用了。好在網路上已經有MVC可以用的套件,那就是MvcSiteMapProvider,筆者在這邊分享實作的經驗。
前置作業:
首先先新增一個MVC的專案,筆者在這裡用VS11 beta和MVC 4做示範。
接著我們使用 Manage NuGet Packages… 來安裝MvcSiteMapProvider。
或者使用 Package Manager Console 下指令直接下載安裝。
[code]PM> Install-Package MvcSiteMapProvider[/code]
安裝完之後,方案就會自動加入下方那些檔案。
- Mvc.sitemap – 定義網站的SiteMap,XML格式。
- MvcSiteMapSchema.xsd – 定義SiteMap的XML Schema。
- Views/Shared/DisplayTemplates/***.cshtml – 設定Menu的樣式,Razor格式。
- Views/Shared/DisplayTemplates/***.ascx – 設定Menu的樣式,ASPX格式。
在 Web.config 方面,自動幫我們加入相對應的 SiteMapProvider 設定。詳細設定可參考官方的 Registering the provider 這篇設定。
[xml title="Web.config"] <siteMap defaultProvider="MvcSiteMapProvider" enabled="true">
<providers>
<clear />
<add name="MvcSiteMapProvider"
type="MvcSiteMapProvider.DefaultSiteMapProvider, MvcSiteMapProvider"
siteMapFile="~/Mvc.Sitemap"
securityTrimmingEnabled="true"
cacheDuration="5"
enableLocalization="true"
scanAssembliesForSiteMapNodes="true"
includeAssembliesForScan=""
excludeAssembliesForScan=""
attributesToIgnore="visibility"
nodeKeyGenerator="MvcSiteMapProvider.DefaultNodeKeyGenerator, MvcSiteMapProvider"
controllerTypeResolver="MvcSiteMapProvider.DefaultControllerTypeResolver, MvcSiteMapProvider"
actionMethodParameterResolver="MvcSiteMapProvider.DefaultActionMethodParameterResolver, MvcSiteMapProvider"
aclModule="MvcSiteMapProvider.DefaultAclModule, MvcSiteMapProvider"
siteMapNodeUrlResolver="MvcSiteMapProvider.DefaultSiteMapNodeUrlResolver, MvcSiteMapProvider"
siteMapNodeVisibilityProvider="MvcSiteMapProvider.DefaultSiteMapNodeVisibilityProvider, MvcSiteMapProvider"
siteMapProviderEventHandler="MvcSiteMapProvider.DefaultSiteMapProviderEventHandler, MvcSiteMapProvider" />
</providers>
</siteMap>[/xml]
開始實作:
一開始我們建立的預設專案,我們把他執行起來看一下預設的畫面。我們將要把nav這裡面的節點全部替換成MvcSiteMapProvider實現。
首先要先來設定 Mvc.sitemap 檔案,此檔案和 Web Form 作法相同,設定各節點的路徑。在這裡我們設定相對應的Controller和Action。
[xml title="Mvc.sitemap"]<?xml version="1.0" encoding="utf-8" ?>
<mvcSiteMap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0"
xsi:schemaLocation="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0 MvcSiteMapSchema.xsd"
enableLocalization="true">
<mvcSiteMapNode title="Home" controller="Home" action="Index">
<mvcSiteMapNode title="About" controller="Home" action="About" />
<mvcSiteMapNode title="Contact" controller="Home" action="Contact" />
</mvcSiteMapNode>
</mvcSiteMap>[/xml]
接著到預設的 /Views/Shared/_Layout.cshtml 把原本的nva節點替換成MVC的Menu產生語法。
[code title="_Layout.cshtml"]@Html.MvcSiteMap().Menu()[/code]
接著我們再次執行網頁看原始碼可以發現這次的選單是由 MvcSiteMapProvider 產生出來的。
自訂選單樣版:
預設的產生出來的樣板比較陽春,有時我們需要進階的選單或特效就要在特別處理了。MvcSiteMapProvider可以透過修改樣板的方式,達到自訂選單樣式的功能。自訂選單的檔案就位於Views/Shared/DisplayTemplates/底下,預設底下有 Razor 和 ASPX 兩種格式,看個人開發習慣,可以將另一種格式的檔案通通刪除只保留自己的。在這裡我們用 Razor 做示範。
此時我們想要判斷如果目前的連結是某個節點的話,把那個選單變其他顏色。此時我們打開SiteMapNodeModel.cshtml修改目前如果節點相同則加入高量的class
這樣子點到相對應的節點,則那個節點就會依照設定的CSS去呈現。