[av_textblock size='' font_color='' color='']
This is the third article in the 'creating your first Umbraco web page' series. In the first part we broke a static HTML file into the components we need within Umbraco, namely a master layout, a header, a footer and a template. In the second post we created a very simple master layout and a template, as seen below:
In this post, we're going to create a header and footer and add it to the master layout. To prevent duplication we will create the header and footer controls as partial views. A partial view can be thought of as a reusable component within a webpag.e. A partial view isn't a full template, but, something that lives within one. A partial view will usually be used on more than one template/ Some examples of components include banners, carousels, headers, footer etc..
If you open your websites Umbraco backend and go to the 'Settings' section on the main left-hand menu, you should see the 'Partial View' folder as seen above. This is where we'll create our header and footer.
Right click on 'Partial Views', click 'Create'.
Add the name of your control, in my case 'Header' and click 'Create'.
When the page reloads you should now see a fairly empty 'Templates' tab for your new 'Header' control. As in the last guide, I'm just copying HTML from the bootstrap website, here. At the minute I'm just creating static HTML to help you understand the main processes, in a production website, the header would be dynamically generated.
Now we have a header, we need to add it to our master page. In 'settings' and go to 'templates'. Find the master template we created in the previous article. To include a partial view of a template, you need to use this Razor helper
Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge