使用 Bootstrap 的 C# MVC 网站中的面包屑答案

【问题标题】：Breadcrumbs in C# MVC Website using Bootstrap使用 Bootstrap 的 C# MVC 网站中的面包屑
【发布时间】：2014-02-24 23:23:10
【问题描述】：

我希望将面包屑添加到我的网站，但我不太确定如何去做。我已经能够使用以下代码获得一些基本的工作：

<ol class="breadcrumb">
    <li class="active">
        @Html.ActionLink("Home", "Index", "Home")
        @if (ViewContext.RouteData.Values["controller"] != "Home" && ViewContext.RouteData.Values["action"] != "Index")
        {
            @:> @Html.ActionLink(ViewContext.RouteData.Values["controller"].ToString(), "Index", ViewContext.RouteData.Values["controller"].ToString())
        }

        > @ViewBag.SubTitle
    </li>
</ol>

但我遇到的问题是，这实际上并没有跟踪您的历史记录，它只是向您显示

Home > ControllerName > CurrentItem

例如

Home > Members > Greg Dodd

当您来自会员搜索页面时，这很有效，但是如果您来自其他页面，那么您会丢失该历史记录。如何在 MVC 中使用 History 创建面包屑路径？

我想我正在寻找类似的东西：

Home > Controller1 > PreviousItem > ... > CurrentItem

例如如果您打开一个博客，然后打开一个特定的博客项目，然后单击作者姓名，您的面包屑应该是：

Home > Blog > SomeBlogTitle > AuthorName

如果您打开作者列表然后选择特定作者，您将看到使用相同控制器呈现的相同视图，但面包屑应该显示：

Home > Authors > AuthorName

【问题讨论】：

你试过MvcSiteMapProvider吗？
我看了看，但不知道如何使用它来做我所追求的。我无法映射动态数据库中的每个对象。是否有教程说明如何操作？
我已经更新了我的答案。

标签： c# asp.net-mvc asp.net-mvc-4 twitter-bootstrap breadcrumbs

【解决方案1】：

通过 nuget 安装后：

PM> Install-Package MvcSiteMapProvider

然后你可以把这条线放在你的布局中：

@Html.MvcSiteMap().Menu(false, true, true)

您也可以自定义它以从数据库中获取数据，首先您需要创建一个派生自DynamicNodeProviderBase 的类：

   public class PostDetailsDynamicNodeProvider : DynamicNodeProviderBase
    {
        private readonly IPostService _postService;

        public PostDetailsDynamicNodeProvider()
        {
            _postService = new PostService(new MyDbContext());
        }

        public override IEnumerable<DynamicNode> GetDynamicNodeCollection()
        {
            var returnValue = new List<DynamicNode>();

            foreach (var post in _postService.GetSiteMapData(20))
            {
                var node = new DynamicNode
                {
                    Title = post.Title,
                    Controller = "Post",
                    Action = "Index",
                    Area = "",
                    LastModifiedDate = post.ModifiedDate

                };
                node.RouteValues.Add("id", post.Id);
                node.RouteValues.Add("title", node.Title);
                returnValue.Add(node);
            }

            // Return 
            return returnValue;
        }
    }

获取站点地图数据：

public IList<SiteMapModel> GetSiteMapData(int count)
        {
            return _posts.AsNoTracking().OrderByDescending(post => post.CreatedDate).Take(count).
                          Select(post => new SiteMapModel
                              {
                                  Id = post.Id,
                                  CreatedDate = post.CreatedDate,
                                  ModifiedDate = post.ModifiedDate,
                                  Title = post.Title
                              }).ToList();
        }

然后更改项目中的 MvcSiteMap 文件：

<?xml version="1.0" encoding="utf-8" ?>
<mvcSiteMap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xmlns="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0"
            xsi:schemaLocation="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0 MvcSiteMapSchema.xsd"
            enableLocalization="true">
  <mvcSiteMapNode title="">
    <mvcSiteMapNode clickable="true"  title="" dynamicNodeProvider="yourCustomClassNamespace" />
  </mvcSiteMapNode>
</mvcSiteMap>

【讨论】：

感谢您的更新，但我仍然缺少一块拼图。 GetSiteMapData(int) 是什么样的？
这是一个使用select new 返回匿名类型实例的方法，我们需要在DynamicNode中使用它们，现在检查答案。
我不认为这是在回答这个问题。我想要一个浏览器历史记录来告诉我我来自哪里，而不是最近 20 篇博客文章的历史记录，这就是我认为这让我得到的结果
刚刚发现它不适用于 MVC 5。它会创建面包屑，但如果我查看帖子/文章，它不会显示面包屑...
任何与此相关的许可证？开放给每个开发者使用？

【解决方案2】：

<ol class="breadcrumb">


        @if (ViewContext.RouteData.Values["controller"].ToString() != "Home")
        {
            @Html.ActionLink("Home", "Index", "Home")
            <li class="active">
                / @ViewBag.Title
            </li>
        }
        else
        {
            <li class="active">
                Home
            </li>
        }

    </ol>

使用引导程序为您工作

【讨论】：

【解决方案3】：

对于 MVC 5，您必须使用：Install-Package MvcSiteMapProvider.MVC5

【讨论】：

【解决方案4】：

我创建了一个 OSS 项目来为自己解决问题。我需要对面包屑中的标签进行更多动态控制：

https://www.nuget.org/packages/MvcBreadCrumbs

或者，在这里贡献：

https://github.com/thelarz/MvcBreadCrumbs

【讨论】：

请不要只是在这里发布链接，而是发布帮助开启者解决他/她问题的代码。
好的，所以我写了一个完整的解决方案来解决这个问题，可以用 nuget 安装到他的应用程序中，这根本不够。明白了。
@Larz 他的意思是也发布一些代码 sn-ps。
请注意，这个包是在 GPL 下的。这意味着如果您将其包含在您的项目中，您还必须根据 GPL 许可项目的其余部分。
如果你把你的项目拿下来，这个答案将变得毫无意义。

【解决方案5】：

如果您想要一个简单的解决方案，您可以使用此代码。它仅用于默认路由配置。

主页/控制器/页面

  @if (ViewContext.RouteData.Values["controller"].ToString().ToLower() != "home")
  {
       <ol class="breadcrumb">
             <li>
              @Html.ActionLink("Home", "Index", "Home")
             </li>
             <li> @Html.ActionLink(ViewContext.RouteData.Values["controller"].ToString(), "Index")
             </li>                                
             <li class="active"> @Html.ActionLink(ViewContext.RouteData.Values["action"].ToString(), ViewContext.RouteData.Values["action"].ToString())
             </li>                                                       
        </ol>
   }

【讨论】：