Sign in Register
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
    John C Scott
    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
    David Peck
    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
    Paul
    0

    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 162 posts 372 karma points
    Oct 02, 2016 @ 08:43
    Yasir Butt
    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
    Ammar
    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
    David Peck
    0

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

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies