Как отобразить одноуровневые пункты меню в объекте меню в DDRMenu

Question

Я работаю с nav.cshtml в DDRMenu DNN. На страницах этого веб-сайта я хотел бы отобразить меню в верхней части страницы, в котором отображаются только дочерние страницы текущей страницы, если они есть, а если нет, то страницы-близнецы текущей страницы.

Вот код:

@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>