Как создать навигационное меню Bootstrap с помощью MVCSiteMap

Не могли бы вы предоставить мне пошаговое руководство по созданию панели навигации меню Bootstrap 3 и Breadcrumb с использованием MVCSiteMap MVC5?

У меня проблема при изменении этого кода на модель Bootstrap

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

<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>

то, что я хочу, есть BootstrapMenuHelperModel, который читает преобразование mvcSiteMapNode в меню навигации.

Источник

2 ответа

Решение

Вероятно, у вас возникли проблемы, потому что вы решили только часть проблемы CSS. Есть 3 различных шаблона, которые используются в меню, и 2 из них также используются другими помощниками HTML. По этой причине может быть полезно создать именованные шаблоны (как в примере ответа ниже), чтобы создать отдельные шаблоны для каждого помощника HTML (Menu, SiteMapPath, SiteMap и т. Д.). Для каждого уровня узлов Меню рекурсивно вызывает SiteMapNodeListHelper, который может не создавать HTML-код, ожидаемый Bootstrap (в зависимости от того, какие параметры навигации вы используете).

Посмотрите этот ответ для начальной точки, а затем вы можете изменить HTML и атрибуты класса оттуда.

Помните, что вы также можете использовать пользовательские атрибуты для предоставления дополнительных данных (таких как имена классов CSS) на основе выбранного узла, или вы можете использовать свойства IsCurrentNode и IsInCurrentPath объекта SiteMapNodeModel, чтобы определить, активен ли текущий узел, если это необходимо.

Источник

Вот учебник, как стилизовать ваш файл Sitemap:

Руководство

Установите Bootstrap и примените классы к учебнику:

Nav Bootstrap

Источник
Другие вопросы по тегам