Skip to the content

How to extend ModelsBuilder Models in Umbraco 9

So I cool thing I have always done in older versions of Umbraco is extend the Models Builder Models by adding custom fields to them.

Why would you want to extend the models builder?

1. You have a staff profile doc type with a first name and last name and you are constantly having to concat the two together to create the 'Full Name' in your razor views. This would be a great reason to do this at the model level.

2. Maybe you have a doc type with a listing date and your preferred date format is dd-MMM-yyyy and you find all your team seem to do it differently on the views they are working on. Another great reason for add a custom property to your doc type at model level called 'Listing Date Formatted'. The team can simply use this property instead of the 'ListingDate' property stored directly on your doc type. This would save them having to format it every time.

3. Maybe you have a blog article page and this page has a collection of related blog articles. In the backend you use a multiple tree picker to related the items. They in your razor script you have to add extra code to parse into the correct strongly typed model for the related blog articles. Instead I like to do this a model level and have them output to the view already cast to the correct type.

4. Maybe you have an app setting stored in your web.config or now the new appsettings.json file which you want to surface to the frontend. If you are link me and store a lot of your settings within an Umbraco node 'SiteSettings' but then there are the odd few settings stored on the web.config / appsettings.json and it annoys you that they are not all together in the same place. Well this would be a great reason to create a custom property on your 'SiteSettings' node at model level pulling the external site settings all into one place.

How to extent a Models Builder Model

1. Create .cs file in a folder of you choice. I usually add this to a Models/ModelsBuilderExtensions folder

2. Name the file the same as your Models Builder model you are wanting to extent.

3. Add the following code. Please note the class name needs to be Exactly the same as your model you are wanting to extend.

using System.Configuration;
namespace Umbraco.Cms.Web.Common.PublishedModels
{
    public partial class HomePage
    {
         public string FullName
         {
              get
              {
                    return FirstName + " " + LastName;
               }
          }
      }
}

You will then be able to add the new property to your razor view exactly in the same was as you would any other property stored on the doc type. You can really clean up your code by using this technique.

@if (!string.IsNullOrEmpty(Model.FullName))
{
     <p>@Model.FullName</p>
}


About the author

David Armitage

.Net MVC Developer
.Net Core Developer
Umbraco Certified Master
Recruitment Professional

Hey Peeps,

I'm an entrepreneur and web developer with a passion for coding. I absolutely love working with Umbraco CMS and appreciate the Umbraco community even more.

I've got 10 years+ .Net experience and 7 years+ experience working in the recruitment industry, both coding and marketing job websites. I wanted to use my skills to help give something back to this awesome community and so I decided to build UmbraJobs.com.

My vision & fundamentals

I want this website to be a place where Umbraco Professionals and Umbraco Partners can advertise their services but at the same time I want to filter out all the under-qualified freelancers & agencies that take up the biggest part of other job & freelancer websites. We've all worked hard to gain our Umbraco certifications, partnership status, and help build the Umbraco community to what it is today. I want to see everyone get rewarded for their efforts.

Follow me on social media

If you're an Umbraco professional, partner, employer, recruiter or a passionate Umbraco community builder then I'm more than happy to hear from you. Follow me on my social media channels and please reach out if you have any needs, want help or consultation with anything Umbraco related or just want a general chat.

comments powered by Disqus

Blog Filter


How we can help?

Need help with an Umbraco project?

Need help with a project but not too sure who to approach? Send us your project brief and budget. We will provide a free consultation and can help you gather quotes from the best and most suitable freelancers or agencies.

Looking to hire an Umbraco Professional?

Have you got job vacancy and want to hire an Umbraco professional? Post a job on our website for free. Alternatively let us know your requirements and we will send suitable prospects your way.

Claim your free profile!

Are you an Umbraco Freelance Developer or Umbraco partner that wants to advertise on our site? If you work with Umbraco or registered as an Umbraco partner then you can create a profile for free.

Let's build the Umbraco Community

We're big on building the Umbraco community and we think you guys are awesome! If there's anyway at all we can help then please reach out.