rendering nested content with multiple partial views

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

John C Scott 473 posts 1183 karma points

Sep 01, 2016 @ 18:44
0

Rendering Nested Content with Multiple Partial Views
Is there a good way you could recommend to use a separate partial view for each element within the nested content?

The pattern used here is to deliver a Partial View to the Front End Developer for each "component", also it would be good to reuse where a doctype is used "normally" outside of Nested Content.

So imagine I can add either a Paragraph, a YouTube video, or a Carousel to my nested content. The end user adds Paragraph 1, then a You Tube Video, then another paragraph, then a Carousel and then a final paragraph.

So then following the example in the excellent documentation I have the bit where I "Do my thang". That's great and I get it.

Should I just put a switch in there ? like
```
var things =
Model.GetPropertyValue<IEnumerable<IPublishedContent>>
(“myNestedContent”)    
foreach(var thang in things) {
        Switch (thang.DocTypeAlias) {
            case "YouTube" :
                 @Html.Partial("_YouTube",thang);
        *etc.*
        }
    }
```
or is there a neater cleverer way to do this that I'm not seeing?

I know it's a huge mistake to mention XSLT templates so I won't.

Also - really in this case this would be done in the controller, so really @Html.Partial would only exist in the View and I wouldn't really want to put this logic in the view. This is mean't for illustrative purposes only.
Copy Link
David Peck 690 posts 1896 karma points c-trib

Sep 01, 2016 @ 19:38
1
I don't think you need a switch. Just use the DocTypeAlias as part of a naming convention.
```
var things = Model.GetPropertyValue<IEnumerable<IPublishedContent>>(myNestedContent);
foreach(var thang in things) {
    @Html.Partial("NestedContent/"+thang.DocTypeAlias, thang);
}
```
Copy Link

Paul 89 posts 167 karma points

Sep 01, 2016 @ 19:43

Hi John,

This is our method that we use at work:

@using Umbraco.Web
@inherits UmbracoViewPage<IPublishedContent>
@{
    var components = Model.GetPropertyValue<IEnumerable<IPublishedContent>>("pageContent");

if (components == null)
{
    return;
}

foreach (var item in components.ToContentSet())
{
    switch (item.DocumentTypeAlias)
    {
        case "embed":
            @Html.Partial("~/Views/Partials/PageComponents/Embed.cshtml", item)
            break;
        case "multipleImages":
            @Html.Partial("~/Views/Partials/PageComponents/Gallery.cshtml", item)
            break;
        case "singleImage":
            @Html.Partial("~/Views/Partials/PageComponents/Image.cshtml", item)
            break;
        case "quote":
            @Html.Partial("~/Views/Partials/PageComponents/Quote.cshtml", item)
            break;
        case "text":
        case "sectionText":
            @Html.Partial("~/Views/Partials/PageComponents/Textarea.cshtml", item)
            break;
        case "video":
            @Html.Partial("~/Views/Partials/PageComponents/Video.cshtml", item)
            break;
        case "tabs":
            @Html.Partial("~/Views/Partials/PageComponents/Tabs.cshtml", item)
            break;
        case "downloads":
            @Html.Partial("~/Views/Partials/PageComponents/Downloads.cshtml", item)
            break;
        default:
            <p>Elements with DocumentTypeAlias <strong>@item.DocumentTypeAlias</strong> has no @@helper</p>
            break;
    }
}

}

Each document type is rendered with a different partial view.

Hope that helps,

Paulius

Copy Link

Yasir Butt 161 posts 371 karma points

Oct 02, 2016 @ 08:43
2
I am using the below approach as @David has said then no need to care about Switch. Just create the partial with the same name as the DocumentTypeAlias
```
var sections = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("sections");
@foreach (var item in sections)
    {
        @Html.Partial("~/views/partials/" + item.ContentType.Alias + ".cshtml", item)
    }
```
Copy Link
Ammar 3 posts 23 karma points

Nov 27, 2017 @ 15:26

0

Hi everyone.

In this case , how we can apply sorting. For example , I want Image on the top on one page , then image at the bottom on second page.

Copy Link
David Peck 690 posts 1896 karma points c-trib

Nov 29, 2017 @ 11:04

0

You can sort your NC. It will render in the same order as in the backoffice.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?