MvcSiteMap generating a Menu without messing the breadcumbs

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}}" rel="nofollow noreferrer noopener" {{#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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">@Model.Title</a>
    }
    else
    {
        <a href="@Model.Url" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0