Copied to clipboard

Flag this post as spam?

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


  • Kyle Goulding 30 posts 192 karma points
    Jun 08, 2016 @ 12:23
    Kyle Goulding
    0

    Calling Child Nodes of a Child node Partial Views

    Hi,

    I am really new to Umbraco but very keen to learning... I am looking at how to incorporate bootstrap columns and rows dynamically for ease for the content editor.

    I have created the following Document Types

    -Rows and Column

    and have created partial view for each and in my page template I am calling the Rows partial View and from the Rows Partial View I am calling the Columns partial View

    But it seem to call all of the columns whether they are under Row A or Row B, where I want the partial view for columns to only call the columns which are a direct child of the row.

    i.e .

    • HomePage
    • Row A - Column A1, Column A2
    • Row B - Column B1, Column B2, Column B3

    When I do this it is displaying the two rows but each row is displaying all of the cols

    I think it is the bit in bold below where I need to specify to only call the child elements of that particular row

    var root = Model.Content; var columns = root.Descendants("col");

    Any help would be fantastic.

    Thanks in Advance

  • Sagar 74 posts 275 karma points
    Jun 09, 2016 @ 11:21
    Sagar
    0

    Hi Kyle, This might Help you

    @{ 
        var site = CurrentPage.Site();
        if (site != null) {
            <ul>
                <li class="@(CurrentPage.Id == site.Id ? "selected" : "")"><a href="@(site.Url)">@site.Name</a></li>
                @traverse(site)
            </ul>         
        }
    }                                                      
    
    @helper traverse(dynamic parent)
    {
        <ul>
            @foreach (IPublishedContent node in parent.Children.Where("Visible"))
            {                
                    <li>
                        <a class="@(CurrentPage.Id == node.Id ? "selected" : "")" href="@node.Url">@node.Name</a>                                       
                        @traverse(node)
                    </li>            
            }
        </ul>                                                            
    }
    
  • Kyle Goulding 30 posts 192 karma points
    Jun 09, 2016 @ 11:36
    Kyle Goulding
    0

    Hi Sagar,

    Thanks for providing this... I am very new to Umbraco so am trying to get my head around things but I am not quite sure what the above means.

    I think the below link is where I need to be but I am not sure what each of the Traversing methods mean - https://our.umbraco.org/documentation/reference/templating/mvc/querying

    Can you point me in the direction for further information?

    The partial views seem to be working as I getting the 2 rows returned but I just need to know how to only call the child nodes of each row as at the moment it calls all the 'col' nodes of the page instead of each row.

    Calling rows from the page template

    @(Html.Partial("Rows")
    

    Rows Partial View

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
            var root = Model.Content;
            var rowsPage = root.Descendants("Row"); //Child Element Name
            if(rowsPage.Count()>0)
            {
                <div class="container">
                    @foreach(var node in rowsPage)
                    {
                    <div class="row clearfix">
                        @(Html.Partial("Columns"))
                    </div><!--/.row-->
                    }
                </div><!--container-->
            }
      }
    

    Cols Partial View being called from the rows

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
        var root = Model.Content;
        var columns = root.Descendants("col"); //Child Element Name
        if(columns.Count()>0)
        {
            <div class="">  
                @foreach(var node in columns)
                {
                <div class="@(node.GetPropertyValue("columnSize"))">                            <h2>@(node.GetPropertyValue("colTitle"))</h2>                               <p>@(node.GetPropertyValue("colBody"))</p>                                  <p><a class="btn btn-default"              href="@(node.GetPropertyValue("colButtonLink"))" role="button">@(node.GetPropertyValue("colButtonText"))</a></p>                             </div><!--/.col-->
                }
            </div><!--/.-->
        }
    }
    

    I think it is to do with where I am calling the nodes from the root as opposed to the parent node but I can't seem to find any information which explains how to specific from the root or specific nodes.

    I think it would be something like -

    var root = root.Model; var rows = root.Descendants("Row") var columns = rows.Descendants("col");

    So I can get the root, then specify to look and the descendants called rows, then look and the descendants of the rows, to get the columns, but it doesnt work.

    Thanks

Please Sign in or register to post replies

Write your reply to:

Draft