Question

我在DNN的DDRMenu中使用nav.cshtml。在本网站的页面上，我想在页面顶部显示一个菜单，该菜单仅显示当前页面的子页面（如果有），如果没有则显示当前页面的兄弟页面。

以下是代码：

@using DotNetNuke.Web.DDRMenu;
@using System.Dynamic;
@inherits DotNetNuke.Web.Razor.DotNetNukeWebPage<dynamic>

@{
	var root = Model.Source.root;
}

@helper RenderNodes(IList<MenuNode> nodes)
{
if (nodes.Count > 0)
{
		<ul class="navbar-nav ml-auto">
			@foreach (var node in nodes)
			{
				String isActive = "";
				string isDisabled = "";
				if (node.Selected) { isActive = "active"; }
				if (!node.Enabled) { isDisabled = "disabled"; }

				if (node.HasChildren())
				{
					<li class="nav-item parent">
						<a href="@node.Url" class="@isActive @isDisabled nav-link">@node.Text</a>
						<button class="submenuButton" onclick="$(this).toggleClass('active'); return false;">
							<i class="fa fa-caret-down" aria-hidden="true"></i>
						</button>
						@RenderChildNodes(node.Children)
					</li>
				}
				else
				{
					<li class="nav-item"><a href="@node.Url" class="@isActive @isDisabled nav-link">@node.Text</a></li>
				}
			}<!-- ./ for loop -->
		</ul>
}<!-- ./ node count -->
}<!-- ./ helper -->

@helper RenderChildNodes(IList<MenuNode> nodes)
{
if (nodes.Count > 0)
{
		<ul class="children bg-primary text-white rounded list-unstyled text-left ml-0">
			@foreach (var node in nodes)
			{
				String isActive = "";
				string isDisabled = "";
				if (node.Selected) { isActive = "active"; }
				if (!node.Enabled) { isDisabled = "disabled"; }

				if (node.HasChildren())
				{
					<li class="nav-item px-1">
						<button class="submenuButton" onclick="$(this).toggleClass('active'); return false;">
							<i class="fa fa-caret-down" aria-hidden="true"></i>
						</button>
						<a href="@node.Url" class="@isActive @isDisabled nav-link">@node.Text</a>
						@RenderChildNodes(node.Children)
					</li>
				}
				else
				{
					<li class="nav-item px-1 "><a href="@node.Url" class="@isActive @isDisabled nav-link">@node.Text</a></li>
				}
 

<!-- begin snippet: js hide: true console: true babel: false -->

基本上，如果当前页面被选中但没有孩子，我需要弄清楚如何显示兄弟姐妹：

if (!node.HasChildren() && node.Selected) {
    <!--Display Sibling nodes-->
}

非常感谢任何帮助。

Answer 1

我在编写Razorpages脚本时并不完美，但我会尝试一下：

@using DotNetNuke.Web.DDRMenu;
@using System.Dynamic;
@using System.Linq;
@inherits DotNetNuke.Web.Razor.DotNetNukeWebPage<dynamic>

@{
   var root = Model.Source.root;
}

@helper RenderNodes(IList<MenuNode> nodes)
{
   if (nodes.Count > 0)
   {
      //Check if the selected node is in the nodes & hasChildren.
      var activeNode= nodes.FirstOrDefault(n=>n.Selected);
      if(activeNode != null && activeNode.HasChildren())
      {
         <li class="nav-item parent">
              <a href="@node.Url" class="@isActive @isDisabled nav-link">@node.Text</a>
              <button class="submenuButton" onclick="$(this).toggleClass('active'); return false;">
              <i class="fa fa-caret-down" aria-hidden="true"></i>
              </button>
              @RenderChildNodes(node.Children)
         </li>

      }
      else
      {
        <ul class="navbar-nav ml-auto">
            @foreach (var node in nodes)
            {
                String isActive = "";
                string isDisabled = "";
                if (node.Selected) { isActive = "active"; }
                if (!node.Enabled) { isDisabled = "disabled"; }

                if (node.HasChildren())
                {
                    <li class="nav-item parent">
                        <a href="@node.Url" class="@isActive @isDisabled nav-link">@node.Text</a>
                        <button class="submenuButton" onclick="$(this).toggleClass('active'); return false;">
                            <i class="fa fa-caret-down" aria-hidden="true"></i>
                        </button>
                        @RenderChildNodes(node.Children)
                    </li>
                }
                else
                {
                    <li class="nav-item"><a href="@node.Url" class="@isActive @isDisabled nav-link">@node.Text</a></li>
                }
            }<!-- ./ for loop -->
        </ul>
      }
   }<!-- ./ node count -->
}<!-- ./ helper -->

这是你需要的，还是有什么遗漏？

Answer 2

这是我们最终的结果。

@using DotNetNuke.Web.DDRMenu;
@using System.Dynamic;
@using DotNetNuke.Entities.Portals;
@inherits DotNetNuke.Web.Razor.DotNetNukeWebPage<dynamic>

@{
	var root = Model.Source.root;
}

@helper RenderNodes(IList<MenuNode> nodes)
{
	if (nodes.Count > 0)
	{
		<ol class="breadcrumb">
			@foreach (var node in nodes)
			{
				foreach (var child in node.Children)
				{
					if (child.Text == PortalSettings.Current.ActiveTab.TabName)
					{
						if (node.Parent.Children.Count > 0)
						{
							@RenderChildNodes(node.Children)
						}
					}
				}

				if(node.Selected && node.Depth == 0 && node.HasChildren())
				{
					@RenderChildNodes(node.Children)
				}
			}<!-- ./ for loop -->
		</ol>
	}<!-- ./ node count -->
}<!-- ./ helper -->

@helper RenderChildNodes(IList<MenuNode> nodes)
{
	if (nodes.Count > 0)
	{
		foreach (var node in nodes)
		{
			string isActive = "";
			string isDisabled = "";
			if (node.Selected) { isActive = "active"; }
			if (!node.Enabled) { isDisabled = "disabled"; }

			<li class="breadcrumb-item @isActive">
				<a href="@node.Url" class=" @isDisabled">@node.Text</a>
			</li>
		}
	}
}

@RenderNodes(root.Children)

<script>
	if ($('.breadcrumb-item').length > 0)
		$('.breadcrumb').show();
	else
		$('.breadcrumb').hide();
</script>

如何在DDRMenu中的菜单对象中显示同级菜单项

2 个答案: