Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • ThomasBrunbjerg 90 posts 182 karma points
    Aug 22, 2017 @ 09:37
    ThomasBrunbjerg
    0

    Displaying dropdown of links with query builder

    I am trying to create a dropdown in Umbraco 7, using the query builder. The dropdown is part of a navbar, which contains links to other pages as well. The page contains HTML with Razor code.

    @{
                                var selection = Model.Content.Site().FirstChild("Sprog").Children()
                                                    .Where(x => x.IsVisible());
                            }
                            <ul class="sf-menu well" data-type="navbar">
                                @foreach(var item in selection){
                                    if(item.Name == "Sommerhuse") {
                                        <li>
                                            <a href="@item.Url">Sommerhuse</a>
                                                @{
                                                    var selection2 = Umbraco.TypedContent(1090).Children()
                                                                        .Where(x => x.IsVisible());
                                                }
                                                <ul>
                                                    @foreach(var sommerhus in selection2){
                                                        <li>
                                                            <a href="@sommerhus.Url">@sommerhus.Name</a>
                                                        </li>
                                                    }
                                                </ul>
                                        </li>
                                    } else {
                                        <li>
                                        <a href="@item.Url">@item.Name</a>
                                    </li>
                                    }
    
                                }
                            </ul>
    

    I tried nesting another query builder with the content I need for the dropdown into my navbar query builder and iterating through that

    But this still doesn't create the dropdown. Instead it just returns a static link, where the dropdown should be shown. In my HTML prototype, the dropdown works fine using this code.

    <nav class="nav pull-right">
                            <ul class="sf-menu well" data-type="navbar">
                                <li class="active">
                                    <a href="index.html">Forside</a>
                                </li>
                                <li>
                                    <a href="index-1.html">Lejebetingelser</a>
    
                                </li>
                                <li>
                                    <a href="index-2.html">Sommerhuse</a>
                                    <ul>
                                        <li>
                                            <a href="sommerhus.html">Blokhus</a>
                                        </li>
                                        <li>
                                            <a href="#">Hvide Sande</a>
                                        </li>
                                        <li>
                                            <a href="#">Langeland</a>
                                        </li>
                                        <li>
                                            <a href="#">Marielyst</a>
                                        </li>
                                        <li>
                                            <a href="#">Ebeltoft</a>
                                        </li>
                                        <li>
                                            <a href="#">Rørvig</a>
                                        </li>
                                        <li>
                                            <a href="#">Bogense</a>
                                        </li>
                                    </ul>
                                </li>
    
                                <li class="">
                                    <a href="index-4.html">Kontakt</a>
                                </li>
                                <li>
    
                                </li>
                            </ul>
                        </nav>
    

    Apologies for the bad formatting, for some reason Visual Studio refuses to auto-format .cshtml files.

  • David Armitage 509 posts 2079 karma points
    Aug 22, 2017 @ 10:13
    David Armitage
    1

    Hi Thomas,

    I am not 100% what you are trying to do but.....

    if(item.Name == "Sommerhuse") {
    
    }
    

    Why would nodes have the same name in the first child "Sprog". Wouldn't there only me one item with the same name since this is unique based on its container?

    Are you trying to loop through all pages with DocType == "Sprog"? If this is the case maybe you want something like this...

    var selection = Model.Content.Site().DescendantsOrSelf("Sprog").Where(x => x.IsVisible());
    

    Again I am trying to understanding what you are trying to do here

    var selection2 = Umbraco.TypedContent(1090).Children()
                                                                        .Where(x => x.IsVisible());
    

    Why are you looping through items in selecting and generating a list of items from TypedContent(1090). This code will return values but it will mean that each item in selection will have the same children.

    Did you debug and inspect firstly selection to see if it contains items. If this is true then I guess you need to inspect selection2 and see if that contains any items.

    I am guessing your queries are not doing what you expect???

    If it helps here is a very simply dropdown navigation I have put together.

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @using Umbraco.Web;
    
    @{
        var site = Model.Content.Site();
        var selection = site.Children.Where(x => x.IsVisible());
    }
    
    <div class="header-navbar">
        <div class="collapse navbar-collapse" id="bs-slide-dropdown">
            <ul>
                <li class="dropdown">
                    <a href="/" class="@(site.IsAncestorOrSelf(Model.Content) ? "active" : "")">
                        Home
                    </a>
                </li>
    
                @foreach (var page in selection)
                {
                    <li class="dropdown">
                        <a href="@page.Url" data-toggle="dropdown">
                            @page.GetPropertyValue("menuName", page.Name)
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            @foreach (IPublishedContent subPage in page.Children)
                            {
                                <li>
                                    <a href="@subPage.Url">
                                        @subPage.GetPropertyValue("menuName", subPage.Name)
                                    </a>
                                </li>
                            }
                        </ul>
                    </li>
                }
            </ul>
        </div>
    </div>
    

    Hope this helps.

    Kind Regards

    David

  • ThomasBrunbjerg 90 posts 182 karma points
    Aug 22, 2017 @ 10:38
    ThomasBrunbjerg
    0

    Hi David

    Thanks for taking the time to answer, and sorry for the confusing explanation.

    I am looping through all the child content nodes og "Sprog", to display links to those pages in my navbar, which currently looks like this: http://i.imgur.com/477VkxK.png

    What i want, is to have "Sommerhuse" as a dropdown, containing links to all the child content nodes of "Sommerhuse".

    My content tree is structured like this: http://i.imgur.com/bVaAn4D.png

    I'm trying to create a dropdown that contains all the items under "Sommerhuse".

    For this I thought I needed to have 2 query builders, one for the content nodes under "DK" and one for the content nodes under "Sommerhuse"

    I hope that cleared up some of the confusion.

    I'll have a look at the dropdown navigation you sent.

  • David Armitage 509 posts 2079 karma points
    Aug 22, 2017 @ 11:01
    David Armitage
    1

    And just to understand the tree structure. Does it look like something like this?

    Page1 - DocType: (Sprog)
         Sub Page1 - DocType: (Sommerhuse)
         Sub Page1 - DocType: (Sommerhuse)
         Sub Page1 - DocType: (Sommerhuse)
    
    Page2 - Sprog
         Sub Page1 - DocType: (Sommerhuse)
         Sub Page2 - DocType: (Sommerhuse)
         Sub Page3 - DocType: (Sommerhuse)
    
    Page3 - Sprog
         Sub Page1 - DocType: (Sommerhuse)
         Sub Page2 - DocType: (Sommerhuse)
         Sub Page3 - DocType: (Sommerhuse)
    
  • ThomasBrunbjerg 90 posts 182 karma points
    Aug 22, 2017 @ 11:10
    ThomasBrunbjerg
    0

    There is no "Sommerhuse" DocType. My tree structure for the DocTypes might looks a bit strange since I am using an XML package, which auto-generated most of them.

    http://i.imgur.com/R0WvWwX.png

    The children of "Sommerhuse" uses a "Sommerhus" DocType.

    These are my queries that i built using the backoffice query builder:

    http://i.imgur.com/OGcmjKg.png

    http://i.imgur.com/hvbaGpM.png

    "DK" has the DocType of "Sprog".

  • David Armitage 509 posts 2079 karma points
    Aug 22, 2017 @ 11:33
    David Armitage
    1

    Try this...

    <ul class="sf-menu well" data-type="navbar">
        @foreach(var item in selection){
            if(item.Name == "Sommerhuse") {
                <li>
                    <a href="@item.Url">Sommerhuse</a>
                        @{
                            var selection2 = item.Children().Where(x => x.IsVisible() && x.DocumentTypeAlias == "sommerhus");
                        }
                        <ul>
                            @foreach(var sommerhus in selection2){
                                <li>
                                    <a href="@sommerhus.Url">@sommerhus.Name</a>
                                </li>
                            }
                        </ul>
                </li>
            } else {
                <li>
                <a href="@item.Url">@item.Name</a>
            </li>
            }
    
        }
    

    if you don't care about the DocType and want to return all the children try this.

    <ul class="sf-menu well" data-type="navbar">
        @foreach(var item in selection){
            if(item.Name == "Sommerhuse") {
                <li>
                    <a href="@item.Url">Sommerhuse</a>
                        @{
                            var selection2 = item.Children().Where(x => x.IsVisible());
                        }
                        <ul>
                            @foreach(var sommerhus in selection2){
                                <li>
                                    <a href="@sommerhus.Url">@sommerhus.Name</a>
                                </li>
                            }
                        </ul>
                </li>
            } else {
                <li>
                <a href="@item.Url">@item.Name</a>
            </li>
            }
    
        }
    </ul>
    
Please Sign in or register to post replies

Write your reply to:

Draft