How To Create a Master Template In Umbraco?

When we create any new site, we don’t want to have to duplicate the header, footer, includes to the stylesheets and javascript files on every page.  Instead, it is a much better approach to creating a global template that we can easily include in all our templates.  In today’s guide, we will cover how to do this.

Creating The Master View

Create a master view/template in an Umbraco site is exactly the same as how you would do it in MVC.  To set a default layout to use, we need to create a file called ‘_ViewStart.cshtml’ that lives in your webroots view directory.  In your _viewStart you need to create a pointer to the file that will define your global style:

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

Next, we need to create the layout file, in Views/Shared create a view called ‘_Layout.cshtml’.  In the layout file, you are then free to style your website however you want.  In my example, I’m going to continue on from, How To Use MVC Partials In Umbraco and create a layout that includes a reference to the header partial created in that tutorial:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using SampleSite.Models;
<!DOCTYPE html>
<html>
<head>
<title>@Model.Content.Name</title>
</head>
<body>
@Html.Partial("Header", new HeaderViewModel(Umbraco.TypedContentAtRoot()
.First(x => x.Id == 1077)
.DescendantOrSelf(1)
.Children.Where(x => x.IsVisible())))
@RenderBody()
</body>
</html>

The next step is to set our template to use the layout.

@inherits UmbracoTemplatePage
@{
Layout = "~/Views/Shared/_Layout.cshtml"; ;
}
MAIN PAGE

Now, when you view the page in a browser, the MVC pipeline will combine all the different elements together in order to render the page.

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

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *