Question

您好我想为我的li添加一个“活动”类，如果它处于活动状态或者我在其下的页面上。我有以下代码

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}

<nav class="topNav">
    <ul>
        @foreach (var item in Model.Content.AncestorOrSelf(1).Children.Where(x => x.IsVisible() && x.IsDocumentType("Subfrontpage") || x.IsDocumentType("Procesguide")))
        {       
            <li>
                <a href="@item.Url">@item.Name</a>
            </li>
        }
    </ul>
</nav>

我想我可以对此做些什么，但它会出错

var isSelected = Model.Path.Contains(item.Id.ToString()) ? "active" : "";

            <li class="@Html.Raw(isSelected)">
                <a href="@item.Url">@item.Name</a>
            </li>

这是我得到的错误。第10行。

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

Compiler Error Message: CS1061: 'Umbraco.Web.Models.RenderModel' does not contain a definition for 'Path' and no extension method 'Path' accepting a first argument of type 'Umbraco.Web.Models.RenderModel' could be found (are you missing a using directive or an assembly reference?)

Source Error:


Line 8:         @foreach (var item in Model.Content.AncestorOrSelf(1).Children.Where(x => x.IsVisible() && x.IsDocumentType("Subfrontpage") || x.IsDocumentType("Procesguide")))
Line 9:         {       
Line 10:            var isSelected = Model.Path.Contains(item.Id.ToString()) ? "active" : "";
Line 11: 
Line 12: <li class="@Html.Raw(isSelected)">

我现在已经尝试了这个，但没有lunk

<ul>        
        <li>
            <a href="@home.Url">@home.Name</a>
        </li>

        @foreach (var item in Model.Content.AncestorOrSelf(1).Children.Where(x => x.IsVisible() && x.IsDocumentType("Subfrontpage") || x.IsDocumentType("Procesguide")))
        {       


            var isSelected = item.IsDescendant(Model,"active", "");

            <li class="@Html.Raw(isSelected)">
                <a href="@item.Url">@item.Name</a>
            </li>

        }


    </ul>

Answer 1

好的，这是解决方案。这是用于键入的，而不是动态的cshtml。

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
    var home = Model.Content.AncestorOrSelf(1);
}

<ul>    
    @*Render Home item*@

    @{ var homeActive = ""; }

    @if( home.Id == Model.Content.Id){
        homeActive = "active";
    }
    <li class="@homeActive">
        <a href="@home.Url">
            @home.Name               
        </a>
    </li>

    @*Render Home children*@    
    @foreach (var item in home.Children.Where(x => x.IsVisible()))
    {                       
        var active = "";

        if(home.Id != Model.Content.Id){ @* if NOT home *@
            if (item.Id == Model.Content.AncestorOrSelf(2).Id){ 
                @* if foreach id and currentpage ancestor id is equal  *@
                active = "active";
            }
        }          
        <li class="@active">                             
            <a href="@item.Url">
                @item.Name                   
            </a>
        </li>
    }
</ul>

Answer 2

您可以尝试这样的事情：

var isSelected = item.IsDescendant(Model,"active", "");

以下是您可以使用的功能列表：

@Model.AncestorOrSelf(string nodeTypeAlias)
@Model.AncestorOrSelf(int level)
@Model.AncestorOrSelf(Func<DynamicNode, bool> func)

和那些助手功能：

@Model.IsDescendant(DynamicNode[,valueIfTrue][,valueIfFalse])
@Model.IsDescendantOrSelf(DynamicNode[,valueIfTrue][,valueIfFalse])

参考：Is the current page a descendant of a specific node id?

以下是umbraco制作的导航的默认脚本：

@inherits umbraco.MacroEngines.DynamicNodeContext

@*
    Macro to display child pages below the root page of a standard website.
    Also highlights the current active page/section in the navigation with
    the css class "current". 
*@


@{ 
    @*Get the root of the website *@
    var root = Model.AncestorOrSelf(1);
}

<ul>
    @foreach (var page in root.Children.Where("Visible"))
    { 
        <li class="@page.IsAncestorOrSelf(Model, "current", "")">
            <a href="@page.Url">@page.Name</a>
        </li>
    }
</ul>

Answer 3

我自己创建了一个菜单，并且Home页面也需要active。仅使用方法IsAncestorOrSelf不适用于主页。

我创建的代码是：

@{ 
    var root = Model.AncestorOrSelf(1);

    var homeClass = root.Id == Model.Id ? "active" : "";
}

<ul id="nav" class="nav navbar-nav pull-right">
    <li class="@homeClass"><a href="/" >Home</a></li>
        @foreach (var page in root.Children.Where("Visible"))
    {
        <li class="@page.IsAncestorOrSelf(Model, "active", "")">
            <a href="@page.Url">@page.Name</a>
        </li>
    }
</ul>

这将遍历根节点（1）的所有子节点。为了能够发现您是否在Home页面上，我要检查页面的Id并相应地设置active类。

Umbraco 6剃须刀菜单

3 个答案: