MVC5 using MvcSiteMapProvider to build twitter bootstrap menu

Question

Default menu section in MVC5 template looking like that:

     

            


        
                      

              相关标签:
       
      

Answer 1

Rowan's answer is pretty close to what you need to do, and should have led you down the correct path. The template MyMenu.cshtml can contain any logic you need to output the desired HTML. You simply need to modify the template to meet your requirement. Note that you can also modify the default templates if desired, but you will have to be careful to select "no" when asked to replace them during an upgrade of MvcSiteMapProvider, or your customizations will be overwritten.

@model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
@using MvcSiteMapProvider.Web.Html.Models

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        @foreach (var node in Model.Nodes) { 
            <li>@Html.DisplayFor(m => node)</li>
        }
    </ul>
    @Html.Partial("_LoginPartial")
</div>

And then this line will produce the desired output:

@Html.MvcSiteMap().Menu("MyMenu")

Answer 2

If I recall correctly you can specify the DisplayTemplate in the Menu() method.

Navigate to ~/Views/Shared/DisplayTemplates and create a new view called MyMenu.cshtml.

Set the model type to MvcSiteMapProvider.Web.Html.Models.MenuHelperModel and then specify the menu structure (with HTML).

MyMenu.cshtml

@model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
@using MvcSiteMapProvider.Web.Html.Models

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

Now change your Menu() method.

@Html.MvcSiteMap().Menu("MyMenu")