In this tutorial you will learn how to create a global view model when you use uSiteBuilder within your project. I've previously talked in How To Create A Global View Model For Your Umbraco Layout File about the benefits of creating a global view model in your MVC Umbraco project to separate your presentation code from your business code. In the code sample I provided in that article, it was assuming that you used Umbraco based content to do your MVC hi-jacking etc..

Another approach to further improve your presentation and business logic is to use uSiteBuilder to define all your document types in code rather than the Umbraco back-end. When you use uSiteBuilder you can still use the same approach in order to render your global data like the header and footer but the base class you need to inherit from changes slightly.

Results Filter

The first thing we need to do is create a results filter to inject the global layout model in the templates.

The big change from last time is the ILayoutViewModel now needs to take a DocumentTypeBase rather than an IPublishedContent. What this code is saying is that on any request that uses a base view model we will define later. Inject a new view model.

BaseViewModel

Now we have our global layout interface defined, next we need to define a base view model that all our document type controller will need to use. Again, this code is very similar to the last tutorial except we use DocumentTypeBase.

Layout View Model

So the next step is to define the view model, first we define an interface:

We use IPublishedContent for DocumentTypeBase.

Homepage View Model

To give you an idea how we use the layout view model, I'll go over the code to implement a specific view model 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 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 and pass a home page view model back to the view to render.

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 and set the type we expect the page to be and we should now get a fully instantiated class that we want. We can then pass this class into the Homepage View Model'back into the MVC pipeline.

Layout View

In our layout view, we can define

In the homepage view we need to implement from:

The code above can be quite hard to wrap your head around when it's all a flat page or text. 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 classes to define your document types 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.. wrapping all this code into a view model is the recommended approach to work with MVC.