MvcSiteMap generating a Menu without messing the breadcumbs

Question

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?

Answer 1

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.