ASP.NET MVC快速產生SiteMap的擴充程式 - MvcSiteMapProvider

WebForm有，MVC有沒有

在 WebForm 拜控制項所賜，讓我們可以快速且容易去設置與產出網頁的 SiteMap（中文稱巡覽列、導覽列），不過在 ASP.NET MVC 之下一開始並無控制項觀念，也經常碰到有 WebForm 經驗正在學習 ASP.NET MVC 的新手常問說：WebForm 有什麼控制項的功能，ASP.NET MVC 有沒有。SiteMap 就是常被問到的一項。

說實話，剛接觸 ASP.NET MVC 2 時是比較辛苦，因為沒提供的功能都必須自己手工刻。隨著時間的經過，後來有了 NuGet 的加持直到現在 ASP.NET MVC 4，整個 ASP.NET MVC 上的擴充套件（擴充程式）已經非常完整，今天要介紹的 MvcSiteMapProvider 都一套快速提供 MVC 專案使用的 Sitemap 擴充套件。

安裝與設置MvcSiteMapProvider擴充套件

首先我們先開一個測試用的 MVC - 網際網路專案，然後開啟【套件管理器主控台】：

PM> Install-Package MvcSiteMapProvider

安裝之後，會開啟一個 Mvc.sitemap 的檔案，如果讀者看過 Webform 的 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>

<mvcSiteMapNode> 是最主要設定段落，內容很簡單，就是設定 controller 與 action，依各位專案的需求去設計出自己的層次架構即可。例如，我們依 MVC - 網際網路專案去調整為 Home 的 Index 為主節點（程式裡稱 node），Home 的 About 與 Contact 為子節點。這樣我們就完成 MvcSiteMapProvider 的設置。

設置 SiteMap 出現位置

接下來我們必須設置 SiteMap 的出現位置，一般會設置在兩個位置：

_Layout.cshtml 或 _Layout.vbhtml
進行全網站的設置。
Views
進行各別頁面的設置。

開啟範例專案的 _Layout.vbhtml 並修改 <div id=body> 的內容：

   <div id="body">
       @Html.MvcSiteMap().Menu(False, False, True)
       目前位置：@Html.MvcSiteMap().SiteMapPath()
       @RenderSection("featured", required:=false)
       <section class="content-wrapper main-content clear-fix">
           @RenderBody()
       </section>
   </div>

@Html.MvcSiteMap().Menu(False, False, True) 會產生整個網站的連結清單。@Html.MvcSiteMap().SiteMapPath() 會產生麵包屑巡覽（breadcrumbs）。

由產生的 HTML 程式碼來看比較清楚：

   <ul id="menu">
       <li>
       <a href="/">Home</a>
     <ul>
         <li>
         <a href="/Home/About">About</a>
         </li>
         <li>
         <a href="/Home/Contact">Contact</a>
         </li>
     </ul>
       </li>
   </ul>
   目前位置：<a href="/">Home</a> > About

其他程式碼細部控制請參考MvcSiteMapProvider官方文件。

客製化 MvcSiteMapProvider 範本

如果各位想要客製化 MvcSiteMapProvider 的輸出結果，例如麵包屑巡覽（breadcrumbs）預設是使用 > 符號，但你想改為使用 | 符號或－符號，又或者想要修改 <ul id="menu"> 裡的 id 設置，可以到 ~/Shared/DisplayTemplates 之下進行修改，*.ascx 是給 ASPX 引擎使用，*.cshtml 是給 Razor 引擎使用，可依專案類型保留其中一種即可。以修改麵包屑巡覽符號而言，你必須修改 SiteMapTitleHelperModel.cshtml 這支檔案內容。

MvcSiteMapProvider for vbhtml 範本

MvcSiteMapProvider 沒有提供 *.vbhtml，雖然在MVC - VB專案內使用 *.cshtml 不會有任何問題，不過我還是順手給他轉換了一下，以保持專案內容的一致性。

MenuHelperModel.vbhtml

   @Modeltype MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
   @Imports System.Web.Mvc.Html
   @Imports MvcSiteMapProvider.Web.Html.Models

   <ul id="menu">
       @For Each node In Model.Nodes
           @<li>
               @Html.DisplayFor(Function(m) node)
               @If node.Children.Any() Then
                   Html.DisplayFor(Function(m) node.Children)
               End If
            </li>
       Next
   </ul>

SiteMapHelperModel.vbhtml

  @ModelType MvcSiteMapProvider.Web.Html.Models.SiteMapHelperModel
  @Imports System.Web.Mvc.Html
  @Imports MvcSiteMapProvider.Web.Html.Models

  <ul class="sitemap">
      @For Each node In Model.Nodes
          @<li>
              @Html.DisplayFor(Function(m) node)
              @If node.Children.Any() Then
                  Html.DisplayFor(Function(m) node.Children)
              End If
           </li>
      Next
  </ul>

SiteMapNodeModel.vbhtml

  @ModelType MvcSiteMapProvider.Web.Html.Models.SiteMapNodeModel
  @Imports System.Web.Mvc.Html
  @Imports MvcSiteMapProvider.Web.Html.Models

  @If Model.IsCurrentNode AndAlso Model.SourceMetadata("HtmlHelper").ToString() <> "MvcSiteMapProvider.Web.Html.MenuHelper" Then
      @<text>@Model.Title</text>
  ElseIf Model.IsClickable Then
      @<a href="@Model.Url">@Model.Title</a>
  Else
      @<text>@Model.Title</text>    
  End If

SiteMapNodeModelList.vbhtml

  @ModelType MvcSiteMapProvider.Web.Html.Models.SiteMapNodeModelList
  @Imports System.Web.Mvc.Html
  @Imports MvcSiteMapProvider.Web.Html.Models

  <ul>
      @For Each node In Model
      @<li>
          @Html.DisplayFor(Function(m) node)
          @If node.Children.Any() Then
              @Html.DisplayFor(Function(m) node.Children)
          End If
      </li>
      Next
  </ul>

SiteMapPathHelperModel.vbhtml

  @ModelType MvcSiteMapProvider.Web.Html.Models.SiteMapPathHelperModel
  @Imports System.Web.Mvc.Html
  @Imports System.Linq
  @Imports MvcSiteMapProvider.Web.Html.Models

  @For Each node In Model
      @Html.DisplayFor(Function(m) node)

      @If node IsNot Model.Last() Then
              @<text> > </text>
      End If
  Next

SiteMapTitleHelperModel.vbhtml

  @ModelType MvcSiteMapProvider.Web.Html.Models.SiteMapTitleHelperModel
  @Imports System.Web.Mvc.Html
  @Imports MvcSiteMapProvider.Web.Html.Models

  @Model.CurrentNode.Title

1 則留言:

Unknown2021年5月10日下午5:38
您好：
感謝您的教學，想請教這個方法可以提交給google SEO 讓搜尋去做優化嗎？
如果可以詳細應該怎麼做呢？
回覆刪除
回覆

新增留言

感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。

訂閱：張貼留言 (Atom)

KingKong Bruce記事

網頁