template for nested content

Go to solution

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

Jesper Skjønnemand 65 posts 440 karma points c-trib

Dec 03, 2018 @ 14:36
0

Template for nested content

Templates, (partial) views and macros

Umbraco 8
Hi

I am new to Umbraco (and to coding other than html/css, actually) and need help with a template for nested content.

What I have done:

Created a document type for four different "modules"

Created a "module picker" datatype (Umbraco.NestedContent) that lets me pick the four different "modules"

Created a "modular page" document type with the module picker in one of its tabs.

Created a modular page with some modules / nested content.

Created partial views for each of the four modules.

Created a "nest test" template that so far looks like this:
```
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
        Layout = "MasterTemplate.cshtml";
    }

    @* here are my partials *@

    @Html.Partial("Modules/Section")
    @Html.Partial("Modules/Teaser")
    @Html.Partial("Modules/Image")
    @Html.Partial("Modules/Quote")
```
And now I am stuck.

How do I get the template to render the modules (nested content) that I created on my page? Can anyone point me in the right direction?

Best
Copy Link

Laura Weatherhead 25 posts 153 karma points MVP 5x c-trib

Dec 03, 2018 @ 16:37

Hey Jesper,

You need to find a way to pass your NC models to the appropriate views.

For example, say the alias on your doctype of your custom NC picker is "myNestedContentItems" and the names of your NC doc types are "sectionItem", "teaserItem" etc, then you'll need something like this in your view:

   @foreach (var ncItem in Model.Content.GetPropertyValue("myNestedContentItems")) {
       if (ncItem.DocumentTypeAlias == "sectionItem") {
          @Html.Partial("Modules/Section", ncItem)
       } else if (ncItem.DocumentTypeAlias == "teaserItem") {
          @Html.Partial("Modules/Teaser", ncItem)
       } ...
    }

This is a lot neater if you are using Ditto, as you can then declare the strongly types models:

@inherits Umbraco.Web.Mvc.UmbracoViewPage<MyStronglyTypedDocType>    

@foreach (var ncItem in MyStronglyTypedDocType.MyNestedContentItems) {
       if (ncItem.DocumentTypeAlias == SectionItem.ModelTypeAlias) {
           @Html.Partial("Modules/Section", ncItem)
       } else if (ncItem.DocumentTypeAlias == TeaserItem.ModelTypeAlias) {
           @Html.Partial("Modules/Teaser", ncItem)
       } ...
}

That's just typed super quick so apologies if there are some typos! Hopefully it helps get you a bit unstuck though :)

Cheers,

Laura

Copy Link

Jesper Skjønnemand 65 posts 440 karma points c-trib

Dec 04, 2018 @ 08:51

Hi Laura

Thanks for the hint. Now my nest test template looks like this

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "MasterTemplate.cshtml";
}

@* test code *@

    @foreach (var ncItem in Model.Content.GetPropertyValue("modularContent"))
    {
        if (ncItem.DocumentTypeAlias == "modularSection")
        {@Html.Partial("Modules/Section", ncItem)}
        else if (ncItem.DocumentTypeAlias == "modularTeaser")
        {@Html.Partial("Modules/Teaser", ncItem)}
    }

However, I get a yellow error page

I checked the names of my partials. They are correct and contain only this

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

<h2>@Umbraco.Field("sectionTitle")</h2>
<p>@Umbraco.Field("sectionText")</p>

Alias of my NC picker is modularContent Alias of my Section document type is modularSection Alias of my Teaser document type is modularTeaser

What am I doing wrong?

Best

Copy Link

Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib

Dec 04, 2018 @ 09:53

Hi Laura

I think you can do something similar with ModelsBuilder, e.g. in DLL mode.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.MyStronglyTypedDocType>
@using ContentModels = Umbraco.Web.PublishedContentModels;

@foreach (var ncItem in Model.Content.MyNestedContentItems) {
       if (ncItem.DocumentTypeAlias == SectionItem.ModelTypeAlias) {
           @Html.Partial("Modules/Section", ncItem)
       } else if (ncItem.DocumentTypeAlias == TeaserItem.ModelTypeAlias) {
           @Html.Partial("Modules/Teaser", ncItem)
       }
}

Furthermore you could also pass in the model instead of the IPublishedContent, e,g.:

if (ncItem.DocumentTypeAlias == SectionItem.ModelTypeAlias) {
    @Html.Partial("Modules/Section", ncItem.OfType<SectionItem.ModelTypeAlias>())
} else if (ncItem.DocumentTypeAlias == TeaserItem.ModelTypeAlias) {
    @Html.Partial("Modules/Teaser", ncItem.OfType<TeaserItem.ModelTypeAlias>())
}

With older versions of Nested Content (package version before included in core), it didn't work with .OfType<MyModel>() on the nested content item, and you had to do something like this:

@Html.Partial("Modules/Section", new SectionItem(ncItem))

/Bjarne

Copy Link

Laura Weatherhead 25 posts 153 karma points MVP 5x c-trib

Dec 04, 2018 @ 10:05

0

Hey Bjarne,

You're right - when I said using Ditto I totally meant using ModelsBuilder haha! I use the two so interchangeably that sometimes forget they're different ;)

I generally use the ModelsBuilder.API and generate the strongly typed models using that rather than the other modes :) It's a fantastic package, saves so much time!!

Thanks,

Laura

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Dec 04, 2018 @ 08:54
2
Hi Jesper

Change foreach code like that:
```
@foreach (var ncItem in Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("modularContent"))
```
Alex
Copy Link
Jesper Skjønnemand 65 posts 440 karma points c-trib

Dec 04, 2018 @ 08:57

0

It's magic

Works just as I hoped

Copy Link
Laura Weatherhead 25 posts 153 karma points MVP 5x c-trib

Dec 04, 2018 @ 09:24

1

Glad all good :)

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Dec 04, 2018 @ 09:21

0

Glad to help!!!

Have a great day!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?