web-dev-qa-db-ja.com

Bootstrapを使用したC＃MVC Webサイトのブレッドクラム

私は自分のサイトにパンくずリストを追加しようとしていますが、それをどうやって行うのかよくわかりません。私は次のコードで基本的な動作をすることができました：

<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の履歴を使用してブレッドクラムトレイルをどのように作成しますか？

私が探しているのは次のようなものだと思います。

Home > Controller1 > PreviousItem > ... > CurrentItem

例えばブログを開いてから特定のブログアイテムを開き、作成者の名前をクリックした場合、パンくずリストは次のようになります。

Home > Blog > SomeBlogTitle > AuthorName

ただし、作成者のリストを開いて特定の作成者を選択した場合、同じコントローラーを使用してレンダリングされた同じビューが表示されますが、ブレッドクラムには次のように表示されます。

Home > Authors > AuthorName
c#asp.net-mvcasp.net-mvc-4twitter-bootstrapbreadcrumbs
8
Greg

簡単な解決策が必要な場合は、このコードを使用できます。これは、デフォルトのルーティング構成専用です。

ホーム/コントローラー/ページ

  @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>
   }
6
agenc

私は自分で問題を解決するためにOSSプロジェクトを作成しました。ブレッドクラムのラベルをより動的に制御する必要がありました。

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

または、ここで貢献してください：

https://github.com/thelarz/MvcBreadCrumbs

6
Larz

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

GetSiteMapData：

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>
6
Sirwan Afifi
<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>

ブートストラップであなたのために働く

1
Thanhnx