Copied to clipboard

Flag this post as spam?

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


  • Hundebol 167 posts 314 karma points
    Nov 16, 2018 @ 17:05
    Hundebol
    0

    Render Stacked Content in frontend - partial view examples

    Hi,

    Stacked Content is yet another great content builder, but the lack of documentation makes it hard for non-developers like myself.

    Is there any friendly umbracians out there, who can give one or a few examples on how to render the stacked content stack in frontend via a Partial View? I am totally blank on how to do this the best/easiest way?

    Thanks in advance! :)

  • Marc Goodson 2157 posts 14431 karma points MVP 9x c-trib
    Nov 18, 2018 @ 13:18
    Marc Goodson
    102

    Hi Hundebol

    Essentially each 'stacked item' in your stacked content implementation is represented by an IPublishedContent object. Which means you can work with each item, in the same way that you would with a published page in Umbraco.

    So if you have a StackedContent property called say 'StackedItems' you could get a reference in your template to each repeated item like so:

    var stackedItems = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("stackedItems");
    

    and then loop through this collection of stacked items to build up your page:

    @if (stackedItems!=null && stackedItems.Any()){
    
    foreach (var stackedItem in stackedItems){
    
    <li>
    //each repeating stackedItem has the same properties as Model.Content would... eg
    @stackedItem.Name
    //if you have different types of documents stacked, you can read the alias of the current item being written out
    @stackedItem.DocumentTypeAlias
    //you can read the values from the stacked content item in the same way
    @stackedItem.GetPropertyValue<string>("title")
    
    </li>
    }
    }
    

    If I've got quite a few different types of stacked items in my stack, or if I use the same types of content on different stacks across the site, then I'll tend to create a 'partial view' for each type of stacked content item, and call that within the loop, just to neaten things up a bit.

    eg

        foreach (var stackedItem in stackedItems){
    @Html.Partial("/views/partials/Stacked/type-" + stackedItem.DocumentTypeAlias + ".cshtml", stackedItem);
    }
    

    and then in a 'stacked' folder inside view/partial I'd create a partial view following the convention

    type-MyContentItemAlias.cshtml

    and have an inherits at the top of the partial as

        @inherits UmbracoTemplatePage<IPublishedContent>
    
    <h1>@Model.Content.Name</h1>
    

    This gives one place to update implementation if it's the same and used in different stacks, but also makes it easier to read if you have more than 3 different content types stacked...

  • Hundebol 167 posts 314 karma points
    Nov 18, 2018 @ 17:32
    Hundebol
    0

    That makes perfect sense, didn't think is was that easy. It basically means that I can reuse my Nested Content snippets, with only few changes. Thanks for your answer Marc! :)

Please Sign in or register to post replies

Write your reply to:

Draft