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.

  • 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);
    }
    
  • 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

  • Yasir Butt 161 posts 371 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)
        }
    
  • 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.

  • 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.

Please Sign in or register to post replies

Write your reply to:

Draft