In this tutorial, you will learn how to use an MVC partial inside of an Umbraco website to create a simple header. One of the main benefits of using MVC views is the ability to split functionality up in order to provide greater re-use. In MVC, we can achieve this re-use by making use of partials. If you come from a web forms background and you are still new to MVC, you can think of a partial in the same way that you would a user control.
As our website will have numerous document types and templates, duplicating the HTML for the menu on every page is a bit crap. If we ever wanted to change the menu we would have to update it on every template. Instead, it would be much better to create a partial called 'Header' and include a single include to the partial whenever it's required.
NOTE: In production you call the 'Header' from the layout rather than the template. The first thing we need to do is create a new MVC razor view called 'Header.cshtml' in '~/Views/Partials' and copy the menu code into it.
Notice the import statement at the top inheriting from IPublishedContent rather then UmbracoTemplatePage. In our main template view we can now call the partial using this snippet:
There is one issue with this bit of code; the menu will always change depending on where the user is on your website. If the user is visiting third level pages, they will only see the pages underneath. Instead, the menu should always display the top level pages or have the ability to display pages from wherever we want. In order to do this, we will need to split our code up a little and introduce a view model class. The view model will take in a list of pages in the constructor to display, like so:
The next step is to update the header partial to work with the view model instead of an IPublishedContent.
Now we need to pass the View Model from the template into the partial:
In the snippet above, we pass in the list of child pages of the current page via the view models constructor. The view model exposes these menu items via a custom property called 'MenuItems'. In the partial, set the inheriting type as 'HeaderViewModel'. In our partial, we can then access that property by calling 'Model.MenuItems'
Getting The HomePage
The only thing that is still wrong with the code is that the menu will still change depending on where in the website hierarchy it is called. Instead, we want to change the code so the content passed into the view model is based on the home page and not the current page. In Umbraco if you want to access your homepage via the API then you can use:
To access the homepage, now our updated template code looks like this:
In today's guide, we've implemented a partial view for our menu so it can be displayed on any page without having to duplicate the HTML. Instead of only limiting the menu to display pages from the current page, we created a header view model that we pass in a collection of pages (IPublishedCOntent). We then updated the code for our template to display the pages underneath the homepage, using 'Umbraco.TypedContentAtRoot().First()' rather than having the menu changed based on the location in the page hierarchy of the current user.