Umbraco Models Builder basics

2016 Oct 01

Umbraco Models Builder was one of the many packages out there to create strongly typed models on Umbraco. From version 7.4 it is part of the core so everyone gets it out of the box.

The first things you need to know about Models Builder is how to enable/disable it and how you want your models to be generated. I won't explain those things as they are already explained in different places, for example, Thomas Morris has a post on his blog explaining that: Getting started with Models Builder. Read it and then come back.

Now I'll show you how to actually use the generated models in 3 different cases:

1. Showing content from a simple node.
2. Showing content from a node that has a relation with another node.
3. Showing content from children nodes.

The data structure I used for my examples is the following:

The Author Document Type has the following properties:

• Name - Textstring
• Picture - Image Cropper
• Twitter handle - Textstring

And the Post Document Type has these:

• Title - Textstring
• Content - Rich Text Editor
• Author - Content Picker

The Blog and the Authors Document Types are only containers.

Showing content from a simple node

Our simplest doc type is the Author one so let's see how the view would look for it:

There are two interesting things here:

1. The inherits, we're using UmbracoViewPage instead of UmbracoTemplatePage which is the default. Why? Because UmbracoTemplatePage is only necessary if you plan to use the CurrentPage property to have dynamic access to the content and we're using strongly typed models so UmbracoViewPage is the right choice. For more info, see: What is the difference between UmbracoViewPage and UmbracoTemplatePage.

2. We are passing the Model object to the partial view because the Model object is an Author object.

The reason for the partial is because I'll reuse it in the next example.

The AuthorInfo partial is this:

The code speaks for itself, no more GetProperty or GetPropertyValue strings around. Much cleaner, readable and less error prone.

Showing content from a node that has a relation with another node

Now let's see how to show the author information in the post view:

The type of the PostAuthor property is object and as it is a content picker, we have the node id there so we only need to get the node content and cast it to the type we need, in this case Author, and pass it to our partial view.

Showing content from children nodes

In this last example we'll see how to show the list of posts in the blog view:

The navigation is very simple, only use the generic overload of Children or Parent to get them as the type you need.

This is enough to get you started with Models Builder. Now you've got no excuses to not use strongly typed models. I've uploaded the code to Github so you can play with it: https://github.com/camaya/umbraco-models-builder-basics

Before you go: I don't have a comments system on this blog, but I'd love to hear your thoughts so feel free to reach me on Twitter @_camaya.

Cheers.