I'm configuring my asp.net mvc 5 app to use MvcSiteMap library. So, far I could successfully configure the breadcumbs.
However, the template for a menu is rather more complicated than the breadcumbs. I have the mustache version of the menu (I didn't show the ul tag):
<li{{#class}} class="{{class}}" {{ />class}}>{{! print class name (active, open, etc) if it exists }}
<a href="{{#link}}{{#createLinkFunction}}{{link}}{{/createLinkFunction}}{{/link}} {{^link}}#{{/link}}" {{#submenu?}} class="dropdown-toggle" {{ />submenu?}}>
{{#icon}}<i class="{{icon}}"></i>{{/icon}}
{{#level-1}}
<span class="menu-text">
{{/level-1}}
{{#level-2}}{{! if level-2 and no icon assigned, use this icon}}
{{^icon}}<i class="icon-double-angle-right"></i>{{/icon}}
{{/level-2}}
{{title}}
{{#badge}}
<span class="badge {{badge-class}} {{tooltip-class}}" {{#tooltip}} title="{{{tooltip}}}" {{ />tooltip}}>{{{badge}}}
</span>
{{/badge}}
{{#label}}
<span class="label {{label-class}}" {{#label-title}} title="{{label-title}}" {{ />label-title}}>{{{label}}}</span>
{{/label}}
{{#level-1}}
</span>
{{/level-1}}
{{#submenu?}}<b class="arrow icon-angle-down"></b>{{/submenu?}}
</a>
{{#submenu?}}{{! if we have submenu items, print them recursively }}
<ul class="submenu">
{{#submenu}}
{{> layout.sidenav.items}}
{{/submenu}}
</ul>
{{/submenu?}}
</li>
So, for every node, this is the logic to apply. I need to know if the node has subnodes (submenu), if it is a level 1 or level 2 node.
1) How can I know that?
2) If I need to change the SiteMapNodeModel.cshtml, which I think I need to change, how to not mess with the breadcumbs, since they use the same template?
Make a template for the MenuHelperModel
and give it a custom name, and put it in the /Views/Shared/DisplayTemplates/
folder. Then you can make a template for the SiteMapNodeModel
and SiteMapNodeModelList
and give them custom names. Copy the contents of MenuHelperModel.cshtml
, SiteMapNodeModel.cshtml
, and SiteMapNodeModelList.cshtml
into your new custom helpers.
Then, change the overrides in each of the HTML helpers within the templates so they call the custom templates instead of the built-in templates.
// MyMenu.cshtml
@* // This template is for the root level *@
@model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
@using System.Web.Mvc.Html
@using MvcSiteMapProvider.Web.Html.Models
<ul id="menu">
@foreach (var node in Model.Nodes) {
<li>@Html.DisplayFor(m => node, "MyMenuNode") @* <-- // Custom Node Helper Name *@
@if (node.Children.Any()) {
@Html.DisplayFor(m => node.Children, "MyMenuNodeList") @* <-- // Custom Node Helper Name *@
}
</li>
}
</ul>
// MyMenuNodeList.cshtml
@* // This template is for the descendent lists below the root level *@
@model MvcSiteMapProvider.Web.Html.Models.SiteMapNodeModelList
@using System.Web.Mvc.Html
@using MvcSiteMapProvider.Web.Html.Models
<ul>
@foreach (var node in Model) {
<li>@Html.DisplayFor(m => node, "MyMenuNode") @* <-- // Custom Node Helper Name *@
@if (node.Children.Any()) {
@Html.DisplayFor(m => node.Children, "MyMenuNodeList") @* <-- // Custom Node Helper Name *@
}
</li>
}
</ul>
// MyMenuNode.cshtml
@* // This template is for the node *@
@model MvcSiteMapProvider.Web.Html.Models.SiteMapNodeModel
@using System.Web.Mvc.Html
@using MvcSiteMapProvider.Web.Html.Models
Testing @* <-- // If configured right, Testing will appear before every node *@
@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 {
<text>@Model.Title</text>
}
Then call your root template from the menu.
@Html.MvcSiteMap().Menu("MyMenu")
You can use this as a starting point, and then make the changes to the views accordingly to output your desired HTML.
Do note that the SiteMapNodeListHelper
template ("MySiteMapNodeList
" in this case) recursively calls itself for each successive level of nodes.