如何使用ASP.net MVC实现动态面包屑？

如何使用ASP.net MVC实现动态面包屑？

如果你对面包屑是什么感到好奇:

什么是面包屑？好吧,如果您曾浏览过在线商店或在论坛中阅读帖子,您可能会遇到面包屑.它们提供了一种查看网站位置的简便方法.像Craigslist这样的网站使用面包屑来描述用户的位置.每页上面的列表上方都是这样的:

sf bayarea craigslist>旧金山市>自行车

编辑

我意识到SiteMapProvider可以实现的功能.我也知道网上的提供商可以让你将sitenodes映射到控制器和动作.

但是,当你想要一个breadcrumb的文本匹配一些动态值时,如下所示:

首页>产品>汽车>丰田

首页>产品>汽车>雪佛兰

首页>产品>执行器材>电动椅

主页>产品>执行设备>绞架

...产品类别和产品是数据库中的记录.应该静态定义一些链接(Home肯定).

我想弄清楚如何做到这一点,但我确信有人已经用ASP.net MVC完成了这个.

1> Sean Haddy..：

---

站点地图绝对是一种方式......或者,你可以自己写一个!(当然只要遵循标准的MVC规则)......我只写了一个,我想我会在这里分享.

@Html.ActionLink("Home", "Index", "Home")
@if(ViewContext.RouteData.Values["controller"].ToString() != "Home") {
    @:> @Html.ActionLink(ViewContext.RouteData.Values["controller"].ToString(), "Index", ViewContext.RouteData.Values["controller"].ToString()) 
}
@if(ViewContext.RouteData.Values["action"].ToString() != "Index"){
    @:> @Html.ActionLink(ViewContext.RouteData.Values["action"].ToString(), ViewContext.RouteData.Values["action"].ToString(), ViewContext.RouteData.Values["controller"].ToString()) 
}

希望有人会觉得这很有帮助,这正是我在寻找MVC面包屑时所寻找的.

---

多年以后,在MVC5中工作就像一个魅力!谢谢.

---

这是按预期的方式工作...我看不到这怎么有这么少的选票

2> vulcan raven..：

---

ASP.NET 5(又名ASP.NET Core),MVC核心解决方案

在ASP.NET Core中,事情进一步优化,因为我们不需要在扩展方法中对标记进行字符串化.

在~/Extesions/HtmlExtensions.cs:

using System.Text.RegularExpressions;
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace YourProjectNamespace.Extensions
{
    public static class HtmlExtensions
    {
        private static readonly HtmlContentBuilder _emptyBuilder = new HtmlContentBuilder();

        public static IHtmlContent BuildBreadcrumbNavigation(this IHtmlHelper helper)
        {
            if (helper.ViewContext.RouteData.Values["controller"].ToString() == "Home" ||
                helper.ViewContext.RouteData.Values["controller"].ToString() == "Account")
            {
                return _emptyBuilder;
            }

            string controllerName = helper.ViewContext.RouteData.Values["controller"].ToString();
            string actionName = helper.ViewContext.RouteData.Values["action"].ToString();

            var breadcrumb = new HtmlContentBuilder()
                                .AppendHtml("
")
                                .AppendHtml(helper.ActionLink("Home", "Index", "Home"))
                                .AppendHtml("
")
                                .AppendHtml(helper.ActionLink(controllerName.Titleize(),
                                                          "Index", controllerName))
                                .AppendHtml("
");


            if (helper.ViewContext.RouteData.Values["action"].ToString() != "Index")
            {
                breadcrumb.AppendHtml("
")
                          .AppendHtml(helper.ActionLink(actionName.Titleize(), actionName, controllerName))
                          .AppendHtml("
");
            }

            return breadcrumb.AppendHtml("
");
        }
    }
}

~/Extensions/StringExtensions.cs 保持不变如下(向下滚动以查看MVC5版本).

在剃刀视图中,我们不需要Html.Raw,因为Razor在处理时会处理转义IHtmlContent:

....
....


    
    @Html.BuildBreadcrumbNavigation()
    

    @RenderBody()
    

...
...

ASP.NET 4,MVC 5解决方案

===下面的原始/旧答案===

(扩展Sean Haddy的答案)

如果你想让它扩展驱动(保持视图干净),你可以做类似的事情:

在~/Extesions/HtmlExtensions.cs:

(与MVC5/bootstrap兼容)

using System.Text;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace YourProjectNamespace.Extensions
{
    public static class HtmlExtensions
    {
        public static string BuildBreadcrumbNavigation(this HtmlHelper helper)
        {
            // optional condition: I didn't wanted it to show on home and account controller
            if (helper.ViewContext.RouteData.Values["controller"].ToString() == "Home" ||
                helper.ViewContext.RouteData.Values["controller"].ToString() == "Account")
            {
                return string.Empty;
            }

            StringBuilder breadcrumb = new StringBuilder("
").Append(helper.ActionLink("Home", "Index", "Home").ToHtmlString()).Append("
");


            breadcrumb.Append("
");
            breadcrumb.Append(helper.ActionLink(helper.ViewContext.RouteData.Values["controller"].ToString().Titleize(),
                                               "Index",
                                               helper.ViewContext.RouteData.Values["controller"].ToString()));
            breadcrumb.Append("
");

            if (helper.ViewContext.RouteData.Values["action"].ToString() != "Index")
            {
                breadcrumb.Append("
");
                breadcrumb.Append(helper.ActionLink(helper.ViewContext.RouteData.Values["action"].ToString().Titleize(),
                                                    helper.ViewContext.RouteData.Values["action"].ToString(),
                                                    helper.ViewContext.RouteData.Values["controller"].ToString()));
                breadcrumb.Append("
");
            }

            return breadcrumb.Append("
").ToString();
        }
    }
}

在~/Extensions/StringExtensions.cs:

using System.Globalization;
using System.Text.RegularExpressions;

namespace YourProjectNamespace.Extensions
{
    public static class StringExtensions
    {
        public static string Titleize(this string text)
        {
            return CultureInfo.CurrentCulture.TextInfo.ToTitleCase(text).ToSentenceCase();
        }

        public static string ToSentenceCase(this string str)
        {
            return Regex.Replace(str, "[a-z][A-Z]", m => m.Value[0] + " " + char.ToLower(m.Value[1]));
        }
    }
}

然后使用它(例如在_Layout.cshtml中):

....
....


    
    @Html.Raw(Html.BuildBreadcrumbNavigation())
    

    @RenderBody()
    

...
...

3> ICodeForCoff..：

---

有一个工具可以在codeplex上执行此操作:http://mvcsitemap.codeplex.com/ [project moved to github]

编辑:

有一种方法可以从数据库派生SiteMapProvider:http: //www.asp.net/Learn/data-access/tutorial-62-cs.aspx

您可以修改mvcsitemap工具以使用它来获得所需内容.