Question

您能否一步一步地向我提供如何使用MVCSiteMap MVC5创建Bootstrap 3菜单导航栏和面包屑？

将此代码更改为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变换读入导航菜单。

Answer 1

您可能遇到问题，因为您只解决了部分CSS问题。菜单使用了3种不同的模板，其中2种也被其他HTML帮助程序使用。因此，创建命名模板（如下面的示例答案中）为每个HTML帮助程序（Menu，SiteMapPath，SiteMap等）创建单独的模板可能是个好主意。对于每个级别的节点，Menu递归调用SiteMapNodeListHelper，它可能不会生成Bootstrap期望的HTML（取决于您使用的导航选项）。

请参阅this answer作为起点，然后您可以从那里修改HTML和类属性。

请记住，您还可以使用custom attributes根据所选节点提供其他数据（例如CSS类名称），或者您可以使用SiteMapNodeModel的IsCurrentNode和IsInCurrentPath属性来确定当前节点如果需要，它是活跃的。

Answer 2

以下是如何设置Sitemap样式的教程：

Tutorial

安装Bootstrap并将这些类应用到教程中：

Nav Bootstrap

如何使用MVCSiteMap创建Bootstrap导航菜单

2 个答案: