I'm using the spanking new Umbraco 6.0.0 for this project i'm doing. We're trying to do a parallax site (you know, staying very fashionate and modern..!)
This caused a problem for me when I realized I have to read all first level child nodes in to my first page to create the looong scrolling page we're after.. I solved this using a Macro Script in razor:
@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco.NodeFactory;
@{
var node = @Model;
}
@* Check the current page has children *@
@if (node.Children().Any())
{
foreach (var page in node.Children().Where("NodeTypeAlias == \"Section\"").Where("Visible").OrderBy("Level").OrderBy("SortOrder"))
{
var backgroundImage = Html.Raw("");
if (@page.GetProperty("backgroundImage").Value != "")
{
int mediaId;
if (!int.TryParse(@page.GetProperty("backgroundImage").Value, out mediaId))
{
return;
}
var media = Library.MediaById(mediaId);
if (media == null || media.NodeTypeAlias != "Image")
{
return;
}
string mediaPath = media.UmbracoFile;
if (string.IsNullOrEmpty(mediaPath))
{
return;
}
backgroundImage = @Html.Raw("style=\"background-image: url('" + mediaPath + "')\"");
}
<sectionid="@page.GetProperty("sectionAlias").Value"@backgroundImage class="page-section">
<divclass="container">
<divclass="row">
<h2>@page.GetProperty("headerText").Value</h2>
<divclass="text-content">
<p>@page.GetProperty("bodyText").Value</p>
</div>
</div>
</div>
</section>
}
}
Et viola, that's working for all child nodes now.
But obviously this only shows all child nodes the same and I can't apply any special looks to the subnodes or add even more subnodes or well.. Do anything!
So now when I want to add some content to my child node, other than heading and body text, I'd like to create another child node of this node and add some images and so on.. How can I do this? I'd like to "Read the entire page template" in, and allow the subchilds of this child to be able to poplulate the page, as I define in my template..
Am I making any sense? How can I read the entire child node into a parent node?
The answer is partials- but how you achieve this with webforms or macroscript razor you will need to check.
In simple terms, for each docTypeAlias, create the display as a partial, run whatever loops you need there, add properties and styling and pull into main page with @Html.Partial("xxx").
That is my understanding of what you would like to do, but I have been wrong before.
This is the third time I'm writing an answer, it seems I couldn't do a post from my phone.. The answer is getting shorter each time..
Anyway, I just wanted to thank you for your quick and good answer! It seems that's exacly what I'm looking for! Do you know of anywhere where I could read more about "Partial" thingies in Umbraco? Can I just get any node and load it as a Partial, or is it the masterpage i render as a partial? I read and it seems to me like it's for printing something like a View, how do I tell it what model/data to use?
Thanks again, you're really pushing me in the right direction! Can't wait to get to the office and try it our in the morning!
Thank you - my experience with webforms(masterpages) in Umbraco is not very much, so it is difficult for me to explain if you wish to use that method.
My preferred route is to use the Mvc version which basically means you can use razor templates, layouts, views and partials as you would in Mvc.
If you have Layout that calls RenderBody(), that is in fact a view (page), then I would describe a partial as another, smaller, or sub- RenderBody() call, so from the explanation you gave, if you could achieve four page calls (one for each document type) you would have your main page.
<div> @Html.Partial("something") </div>
<div> @Html.Partial("somethingElse") </div>
The code within something and somethingElse could be identical to what you have above, but then you can add an extra property to somethingElse, or call a completely different docType which would essentially give you a different view within your page.
I really hope that makes some sense, I have tried to be very basic, but hope that I have helped. There is a pluralsight video that is MVC3, but it explains far better than I just have about partial views and why and how to use them, it's six minutes, but you should only need the first 3 minutes to understand.
Once you decide whether you would prefer to use webforms or Mvc, someone will help you from there to move forward.
Best regards G
Another way to describe is that in a current site I have 4 different navigation views, these are all in Partials and I call them when needed, ie the mobile navigation is different to the desktop and there are two main sections to the site.
Muchas gracias! I'm sorry for my bad choice of words, I'm trying to stay all MVC here as well, so no master pages will be used, it's all Layouts I suppose! Also a big thanks for the video, it was very clear, as well as your reply. I'll get crackin' on this and maybe I'll get back to you if I'm still not getting it :) Thanks a bunch!
That's great Niclas - just remember t put into Mvc before you do anything, open the config, then umbracoSettings config, find this line and replace as below. Save and then run to install database. Using Mvc in Visual Studio or even WebMatrix is just as you would use Mvc, just remember to create documentType, create matching template and you have the base. Best also to set up the content tree with, Content (already there) then a siteRoot Node, then "home" page, for many reasons this helps with all of the calls to your document types as you move on to build more. It is worth taking the time to get the structure correct and an understanding of where you would like the project to go. Muchas gracias is fine but as my second language is Portuguese, obrigado would be preferred. Boa sorte, good luck, will help if I can. Regards Gary
Reading entire child node into another node
Hi!
I'm using the spanking new Umbraco 6.0.0 for this project i'm doing. We're trying to do a parallax site (you know, staying very fashionate and modern..!)
This caused a problem for me when I realized I have to read all first level child nodes in to my first page to create the looong scrolling page we're after.. I solved this using a Macro Script in razor:
Et viola, that's working for all child nodes now.
But obviously this only shows all child nodes the same and I can't apply any special looks to the subnodes or add even more subnodes or well.. Do anything!
So now when I want to add some content to my child node, other than heading and body text, I'd like to create another child node of this node and add some images and so on.. How can I do this? I'd like to "Read the entire page template" in, and allow the subchilds of this child to be able to poplulate the page, as I define in my template..
Am I making any sense? How can I read the entire child node into a parent node?
Hi Niclas
The answer is partials- but how you achieve this with webforms or macroscript razor you will need to check.
In simple terms, for each docTypeAlias, create the display as a partial, run whatever loops you need there, add properties and styling and pull into main page with @Html.Partial("xxx").
That is my understanding of what you would like to do, but I have been wrong before.
Regards G
Hi Gary!
This is the third time I'm writing an answer, it seems I couldn't do a post from my phone.. The answer is getting shorter each time..
Anyway, I just wanted to thank you for your quick and good answer! It seems that's exacly what I'm looking for! Do you know of anywhere where I could read more about "Partial" thingies in Umbraco? Can I just get any node and load it as a Partial, or is it the masterpage i render as a partial? I read and it seems to me like it's for printing something like a View, how do I tell it what model/data to use?
Thanks again, you're really pushing me in the right direction! Can't wait to get to the office and try it our in the morning!
Hi Niclas
Thank you - my experience with webforms(masterpages) in Umbraco is not very much, so it is difficult for me to explain if you wish to use that method.
My preferred route is to use the Mvc version which basically means you can use razor templates, layouts, views and partials as you would in Mvc.
If you have Layout that calls RenderBody(), that is in fact a view (page), then I would describe a partial as another, smaller, or sub- RenderBody() call, so from the explanation you gave, if you could achieve four page calls (one for each document type) you would have your main page.
<div> @Html.Partial("something") </div>
<div> @Html.Partial("somethingElse") </div>
The code within something and somethingElse could be identical to what you have above, but then you can add an extra property to somethingElse, or call a completely different docType which would essentially give you a different view within your page.
I really hope that makes some sense, I have tried to be very basic, but hope that I have helped. There is a pluralsight video that is MVC3, but it explains far better than I just have about partial views and why and how to use them, it's six minutes, but you should only need the first 3 minutes to understand.
http://pluralsight.com/training/players/PSODPlayer?author=scott-allen&name=mvc3-building-views&mode=live&clip=0&course=aspdotnet-mvc3-intro
Once you decide whether you would prefer to use webforms or Mvc, someone will help you from there to move forward.
Best regards G
Another way to describe is that in a current site I have 4 different navigation views, these are all in Partials and I call them when needed, ie the mobile navigation is different to the desktop and there are two main sections to the site.
Muchas gracias! I'm sorry for my bad choice of words, I'm trying to stay all MVC here as well, so no master pages will be used, it's all Layouts I suppose! Also a big thanks for the video, it was very clear, as well as your reply. I'll get crackin' on this and maybe I'll get back to you if I'm still not getting it :) Thanks a bunch!
That's great Niclas - just remember t put into Mvc before you do anything, open the config, then umbracoSettings config, find this line and replace as below. Save and then run to install database. Using Mvc in Visual Studio or even WebMatrix is just as you would use Mvc, just remember to create documentType, create matching template and you have the base. Best also to set up the content tree with, Content (already there) then a siteRoot Node, then "home" page, for many reasons this helps with all of the calls to your document types as you move on to build more. It is worth taking the time to get the structure correct and an understanding of where you would like the project to go. Muchas gracias is fine but as my second language is Portuguese, obrigado would be preferred. Boa sorte, good luck, will help if I can. Regards Gary
is working on a reply...