In this tutorial, you will learn how to create a global view model when you use uSiteBuilder within your project. If you have not come across uSiteBuilder it is a handy package that will allow you to do code-first content modelling within a Umbraco v7 website (read more here). If you want to use uSiteBuilder, you will need to set the default model you specify within your master layout to work with the base classes provided by uSiteBuilder, rather than the Umbraco ones found in most project. If you want to learn how to do this, read on 🔥🔥🔥
Results Filter: The first thing we need to do is create a results filter to inject a global layout model on each page request:
I have written previously here on how this process works using vanilla Umbraco and the process is very similiar. The big change when using uSitebuilder, is the ILayoutViewModel now needs to take a DocumentTypeBase rather than an item of type IPublishedContent. After adding this code to your project, on any page request that uses a base view model, inject a new view model that we can later access in the master layout.
BaseViewModel: Next, we need to define a base view model that all of our route-hijacked document-type controllers will need to return. This code is very similar to the vanilla Umbraco tutorial except we use DocumentTypeBase:
Layout View Model: The next step is to define the view model. First, we define an interface. This interface will be used as a check in the result filter:
The view model uses a rule to ensure any types that use it are of type DocumentTypeBase. This bit is important 🤔
Homepage View Model: To give you an idea of how we use the layout view model incode, I'll also go over the code to implement a controller for a document type. In my project, I have a uSiteBuilder document type, defined like this:
The view model for the home-page would look like this:
In the view model, we inherit from the base view model passing in the document type we want to associate it with. In this example, it's the homepage type. We then pass the current page back into the base class so we can use it in our views:
Homepage Controller: The next step is to create a controller for the home page, get the uSiteBuilder document-type, create a view model and pass it back to the view to render some content:
In our homepage controller, we now need to get the uSiteBuilder document-type instance. We can do this using the GetByNodeId() method. We pass in the page id of the homepage and set the document-type alias that the page was created with. This will query the CMS and return a fully instantiated object that contains all the pages content. We can then add this class into the HomepageViewModel and return it to the homepage view.
Layout View: In our layout view, we can now define the backing model as the generic type. This will give you access to the current page data in the layout. This will allow you to render the head, header and footer sections:
HomepageView: In our homepage view, do not forget to set the backing model as the new homepage view model:
Job done 💥
Granted you need to write a lot of code to make this tutorial work. The code above can be quite hard to wrap your head around when reading it within a tutorial instead of reviewing code in an actual project. To make life a bit easier, I would recommend downloading this working code sample from my GitHub account, JonDJones.com.Umbraco.MegaMenu
In most enterprise CMS projects, using code first content modelling is a pretty standard process. Using uSiteBuilder plugged into Umbraco means you can now do the same. When we build projects within MVC, we want to separate presentation logic and business logic and create a layout/global view model to render out the header, footer, metadata etc... This is why doing all the logic in a controller is the recommended approach to work with MVC. Happy Coding 🤘
