[MVC] 使用 MvcSiteMapProvider 基本設置

開始寫ASP.Net MVC之後,原本在Web Form有許多控制項在MVC大部分都不能用了,包含好用的SiteMapProvider在MVC也不能用了。好在網路上已經有MVC可以用的套件,那就是MvcSiteMapProvider,筆者在這邊分享實作的經驗。

前置作業:

首先先新增一個MVC的專案,筆者在這裡用VS11 beta和MVC 4做示範。
接著我們使用 Manage NuGet Packages… 來安裝MvcSiteMapProvider。

Using 'Manage NuGet Packages...' to install MvcSiteMapProvider

或者使用 Package Manager Console 下指令直接下載安裝。

[code]PM> Install-Package MvcSiteMapProvider[/code]

安裝完之後,方案就會自動加入下方那些檔案。

After Install 'MvcSiteMapProvider', it Added files in Visual Studio Solution Explorer.

  • 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去呈現。

參考資料:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>