DDRMenuのメニューオブジェクトに兄弟メニューアイテムを表示する方法

Question

DNNのDDRMenuでnav.cshtmlを使用しています。このウェブサイトのページでは、現在のページの子ページのみが表示されているページがある場合はそのページを表示し、現在のページの兄弟ページを表示しない場合は、メニューを表示します。

ここでは、コードです：

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

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

 
@helper RenderNodes(IList<MenuNode> nodes) 
 
{ 
 
if (nodes.Count > 0) 
 
{ 
 
\t \t <ul class="navbar-nav ml-auto"> 
 
\t \t \t @foreach (var node in nodes) 
 
\t \t \t { 
 
\t \t \t \t String isActive = ""; 
 
\t \t \t \t string isDisabled = ""; 
 
\t \t \t \t if (node.Selected) { isActive = "active"; } 
 
\t \t \t \t if (!node.Enabled) { isDisabled = "disabled"; } 
 

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

 
@helper RenderChildNodes(IList<MenuNode> nodes) 
 
{ 
 
if (nodes.Count > 0) 
 
{ 
 
\t \t <ul class="children bg-primary text-white rounded list-unstyled text-left ml-0"> 
 
\t \t \t @foreach (var node in nodes) 
 
\t \t \t { 
 
\t \t \t \t String isActive = ""; 
 
\t \t \t \t string isDisabled = ""; 
 
\t \t \t \t if (node.Selected) { isActive = "active"; } 
 
\t \t \t \t if (!node.Enabled) { isDisabled = "disabled"; } 
 

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

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

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

 
@helper RenderNodes(IList<MenuNode> nodes) 
 
{ 
 
\t if (nodes.Count > 0) 
 
\t { 
 
\t \t <ol class="breadcrumb"> 
 
\t \t \t @foreach (var node in nodes) 
 
\t \t \t { 
 
\t \t \t \t foreach (var child in node.Children) 
 
\t \t \t \t { 
 
\t \t \t \t \t if (child.Text == PortalSettings.Current.ActiveTab.TabName) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t if (node.Parent.Children.Count > 0) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t @RenderChildNodes(node.Children) 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 

 
\t \t \t \t if(node.Selected && node.Depth == 0 && node.HasChildren()) 
 
\t \t \t \t { 
 
\t \t \t \t \t @RenderChildNodes(node.Children) 
 
\t \t \t \t } 
 
\t \t \t }<!-- ./ for loop --> 
 
\t \t </ol> 
 
\t }<!-- ./ node count --> 
 
}<!-- ./ helper --> 
 

 
@helper RenderChildNodes(IList<MenuNode> nodes) 
 
{ 
 
\t if (nodes.Count > 0) 
 
\t { 
 
\t \t foreach (var node in nodes) 
 
\t \t { 
 
\t \t \t string isActive = ""; 
 
\t \t \t string isDisabled = ""; 
 
\t \t \t if (node.Selected) { isActive = "active"; } 
 
\t \t \t if (!node.Enabled) { isDisabled = "disabled"; } 
 

 
\t \t \t <li class="breadcrumb-item @isActive"> 
 
\t \t \t \t <a href="@node.Url" class=" @isDisabled">@node.Text</a> 
 
\t \t \t </li> 
 
\t \t } 
 
\t } 
 
} 
 

 
@RenderNodes(root.Children) 
 

 
<script> 
 
\t if ($('.breadcrumb-item').length > 0) 
 
\t \t $('.breadcrumb').show(); 
 
\t else 
 
\t \t $('.breadcrumb').hide(); 
 
</script>