6

現在のノードとその親を css クラスでマークしたいと思います。私は周りを検索していて、これらのリンクを見つけました：

http://mvcsitemap.codeplex.com/discussions/257786 http://mvcsitemap.codeplex.com/discussions/245000

そのため、SiteMapNodeModelList.cshtml を変更すると、現在のノードが強調表示されます。しかし、親ノードを強調表示する方法がわかりません。

<ul>
    @foreach (var node in Model) { 
        <li class="@(node.IsCurrentNode ? "current" : "")" >@Html.DisplayFor(m => node) 
            @if (node.Children.Any()) {
                @Html.DisplayFor(m => node.Children)
            }
        </li>
    }
</ul>

親ノードをマークするために、すべての直接の子要素をチェックする拡張メソッドを作成しました (2 つのレベルしかありません)。

    public static bool IsCurrentNodeOrChild(this SiteMapNodeModel node)
    {
        if (node.IsCurrentNode) return true;

        return node.Children.Any(n => n.IsCurrentNode);
    }

MenuHelperModel.cshtml を次のように変更しました。

<ul id="menu">
    @foreach (var node in Model.Nodes) { 
        <li class="@(node.IsCurrentNodeOrChild() ? "current" : "d")" >@Html.DisplayFor(m => node) 
            @if (node.Children.Any()) {
                @Html.DisplayFor(m => node.Children)
            }
        </li>
    }
</ul>

これで完全に機能するようになりました。しかし、もっと簡単なアプローチは本当にないのでしょうか? これを必要とする人は地球上で初めてではないでしょうか?

4

3 に答える 3

0

これは素晴らしい投稿です！

別の投稿者からのコメントには同意しませんが、このページにはまさに私が探していたものがありました。私の顧客は、サブメニューのサブメニューを含む大きなメニューで迷子になっていました...私はそれが好きではありませんが、それが彼らが望んでいたことです。

テオドールが提案したことを改善したいと思います。node.Children を使用する代わりに、node.Descendants を使用します。そうすれば、2番目のサブリストにいる場合でも、一番上に表示されます!

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

@helper  TopMenu(List<SiteMapNodeModel> nodeList)
{
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    @foreach (SiteMapNodeModel node in nodeList)
                    {
                        string url = node.IsClickable ? node.Url : "#";

                        if (!node.Children.Any())
                        {
                            <li class="@((node.IsCurrentNode || node.Descendants.Any(n => n.IsCurrentNode)) ? "active" : "")"><a href="@url">@node.Title</a></li>
                        }
                        else
                        {
                            <li class="dropdown @((node.IsCurrentNode || node.Descendants.Any(n => n.IsCurrentNode)) ? "active" : "")"><a class="dropdown-toggle" data-toggle="dropdown">@node.Title <span class="caret"></span></a>@DropDownMenu(node.Children)</li>
                        }

                        if (node != nodeList.Last())
                        {
                            <li class="divider-vertical"></li>
                        }
                    }
                </ul>
            </div>
        </div>
    </nav>
}

@helper DropDownMenu(SiteMapNodeModelList nodeList)
{
    <ul class="dropdown-menu" role="menu">
        @foreach (SiteMapNodeModel node in nodeList)
        {
            if (node.Title == "Separator")
            {
                <li class="divider"></li>
                continue;
            }

            string url = node.IsClickable ? node.Url : "#";

            if (!node.Children.Any())
            {
                <li class="@((node.IsCurrentNode || node.Descendants.Any(n => n.IsCurrentNode)) ? "active" : "d")"><a href="@url">@node.Title</a></li>
            }
            else
            {
                <li class="dropdown-submenu @((node.IsCurrentNode || node.Descendants.Any(n => n.IsCurrentNode)) ? "active" : "d")"><a href="@url">@node.Title</a>@DropDownMenu(node.Children)</li>
            }
        }
    </ul>
}

@TopMenu(Model.Nodes)
于 2015-10-16T21:30:54.243 に答える