In Umbraco there is no built-in Nested Elements renderer. Here is one way to automatically setup a renderer. It supports strongly type models from ModelsBuilder and IPublishedElement. It also supports a custom controller, so you can use ViewModel, and it supports if you only want a razor partial file.
It's magic! :)
@inherits UmbracoViewPage<HomePage>
<! -- Render elements: -->
@Html.Elements(Model.Elements)
<!-- Or... -->
@{ Html.RenderElements(Model.Elements); }
You have two IPublishedElements (Nested Content): HeaderAndTextElement and ContactElement
Views/Elements/HeaderAndTextElement.cshtml (ModelsBuilder model. No controller needed)
@model HeaderAndTextElement
<div>
<h2>@Model.Header</h2>
@Model.Text
</div>
Views/Elements/ContactElement.cshtml (View model from controller)
@model ContactElementViewModel
<div>
<h2>@Model.Name</h2>
@if (Model.ImageUrl.IsValid())
{
<img src="@Model.ImageUrl" alt="Contact image"/>
}
</div>
Controller for ContactElement
public class ContactElementController : SurfaceController
{
public ActionResult Index(IPublishedElement element)
{
return PartialView(new ContactElementViewModel(element));
}
}
..or you can have a default controller with many elements:
public class ElementsController : SurfaceController
{
public ActionResult ContactElement(IPublishedElement element)
{
return PartialView(new ContactElementViewModel(element));
}
}