Creating A Header and Footer Using Partial Views In Umbraco

[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: umbraco_create_first_page_13 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.. umbraco_create_header_and_footer_1 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. umbraco_create_header_and_footer_2 Right click on 'Partial Views', click 'Create'. umbraco_create_header_and_footer_3 Add the name of your control, in my case 'Header' and click 'Create'. umbraco_create_header_and_footer_4 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. umbraco_create_header_and_footer_5 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


@Html.Partial("Header")

umbraco_create_header_and_footer_6 If you save your page and view the homepage (which uses 'master' as it's layout), you will now see the header.  To create a footer, simply follow the steps above.  At this stage, we have now created all the major building blocks of our page.  The master layout, a header, footer, and a homepage template.  So far everything is pretty boring as we only display static HTML.  In the next article in this series, we will start adding dynamic properties to allow content editors to add and manage content within the page. [/av_textblock] [av_two_fifth first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display=''] [av_textblock size='' font_color='' color=''] LESSON 2 How To Create A Master Layout In Umbraco [/av_textblock] [/av_two_fifth][av_three_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display=''] [av_textblock size='' font_color='' color=''] LESSON 4 How To Add Dynamic Fields And Page Information To An Umbraco Template [/av_textblock] [/av_three_fifth]

submit to reddit

Jon D Jones

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

Back to top