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");
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.
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 .
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
Hi Kyle, This might Help you
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
Rows Partial View
Cols Partial View being called from the rows
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
is working on a reply...