LiuLyndon Look For: [MVC] Using Site Map Provider (Drop Down Menu)

Site Map Provider

主要方便開發者，快速建立網站選單與導覽地圖
STEP 1. 安裝 Site Map Provider 套件

STEP 2. 安裝完成會自動產生 DisplayTemplates 與 Mvc.sitemap 相關檔案

STEP 3. 在 Shared\_Layout.cshtml 加入

@Html.MvcSiteMap().Menu() 產生表單，表單資料在 Mvc.sitemap 進行修改
@Html.MvcSiteMap().SiteMapPath() 顯示目前位置

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("應用程式名稱", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                @Html.MvcSiteMap().Menu()
            </div>
        </div>
    </div>
    <div class="container body-content">
        <div>
            @Html.MvcSiteMap().SiteMapPath()
        </div>
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - 我的 ASP.NET 應用程式</p>
        </footer>
    </div>

STEP 4. 所呈現的方式，未加入 bootstrap 的樣式，MenuHelperModel.cshtml 加入樣式


<ul id="menu" class="nav navbar-nav">
    @foreach (var node in Model.Nodes)
    {
        <li>
            @Html.DisplayFor(m => node)
        @if (node.Children.Any())
        {
            @Html.DisplayFor(m => node.Children)
        }
        </li>
    }
</ul>

Drop Down Menu

因目前的架構不支援，因此需要修改或者新增 Drop Down Menu 的方法
網路上有提供此方法 ASP.NET MVC 5 Menu using Site Map Provider & Bootstrap 3 Navbar
下列為修改 DisplayTemplates 的 cshtml 檔案
STEP 1. 修改 SiteMapNodeModel.cshtml

@if (Model.IsCurrentNode && Model.SourceMetadata["HtmlHelper"].ToString() != "MvcSiteMapProvider.Web.Html.MenuHelper")
{
    <text>@Model.Title</text>
}
else if (Model.IsClickable)
{
    if (string.IsNullOrEmpty(Model.Description))
    {
        <a href="@Model.Url">@Model.Title</a>
    }
    else
    {
        <a href="@Model.Url" title="@Model.Description">@Model.Title</a>
    }
}
else
{
    <a class="dropdown-toggle" data-toggle="dropdown" href="@Model.Url">
        <text>@Model.Title</text>
        <span class="caret"></span>
    </a>
}

STEP 2. 修改 SiteMapNodeModelList.cshtml

<ul class="dropdown-menu">
    @foreach (var node in Model)
    {
        <li>
            @Html.DisplayFor(m => node)
            @if (node.Children.Any())
            {
                @Html.DisplayFor(m => node.Children)
            }
        </li>
    }
</ul>

STEP 3. 修改 Mvc.sitemap 增加對應的網頁


  <mvcSiteMapNode title="Home" controller="Home" action="Index">
    <mvcSiteMapNode title="About" controller="Home" action="About"/>
    <mvcSiteMapNode title="Contact" controller="Home" action="Contact" />
    <mvcSiteMapNode title="Administration" clickable="false">
      <mvcSiteMapNode title="User Mgmt" controller="Administration" action="About" />
      <mvcSiteMapNode title="Role Mgmt" controller="Administration" action="Contact" />
    </mvcSiteMapNode>
  </mvcSiteMapNode>