Nested Layout Pages with Razor

Razor Layout pages are the equivalent to MasterPages in ASP.NET Web Forms and the Web Forms View Engine within ASP.NET MVC. Just as it is possible to nest MasterPages, it is also possible to nest Razor Layout pages. This article explores the process required to achieve nesting of Layout pages using the Razor View Engine in MVC 3, or WebMatrix Web Pages sites.

You would consider using nested layout pages if you were building a corporate site for a global company, for instance, which is comprised on many divisions, each having their own look and feel. There may be a common look and feel for the header and footer of the site, but the navigation and content changes in both structure and appearance depending on which division of the company is being featured. The imaginary company that the sample site relates to has a number of divisions, one of which is Automation and another for Electronics. Each of them has their own branding which needs ot be catered for. For simplicity's sake the following walkthrough illustrates the use of Razor in a Web Pages site built using WebMatrix, but the principals are exactly the same if you are using ASP.NET MVC 3.

Step 1

Create a new site using the Empty Site template and name this Nested Layouts. Add two folders to the site – one called Content and the other called Shared. Add a new CSS file to Content and leave it with the default file name of StyleSheet.css. Add the following code to it:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    padding: 0;
    margin: 0;

    color: #0093c0;

    background-color: #c1dfde;
    padding: 10px;
    width: 800px;
    margin: auto;
    min-height: 600px;

#electronics, #automation{
    min-height: 400px;

    background-color: #8ec1da;
    width: 650px;
    float: left;

    background-color: #ffe8d3;

    background-color: #fff;
    min-height: 400px;
    width: 150px;
    float: left;

    background-color: #dedede;

#automation h3{
    color: #997d63;

Step 2

Add a CSHTML file to the Shared folder and name it _MainLayout.cshtml.  Change the existing code so that it looks like this:

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8" />
        <link href="@Href("~/Content/StyleSheet.css")" rel="stylesheet" type="text/css" />
        <div id="wrapper">
            <div id="header"><h1>Global Enterprises</h1></div>
            <div id="nav">
                <a href="Home">Home</a> | 
                <a href="About">About</a> |
                <a href="Engineering">Engineering</a> |
                <a href="Electronics">Electronics</a> |
                <a href="Automation">Automation</a> |
                <a href="Contact">Corporate</a> |
                <a href="Contact">Contact Us</a>

Step 3

Add another CSHTML file to the Shared folder and name this one _AutomationLayout.cshtml. Replace the existing code with this:

    Layout = "~/Shared/_MainLayout.cshtml";
<div id="automationnav">
    <a href="Products">Products</a> | 
    <a href="Services">Services</a> |
    <a href="Support">Support</a> |
    <a href="Team">The Team</a> |
<div id="automation">
<div id="footer">The Automation Division Footer</div>

Step 4

Now add a third CSHTML file to the Shared folder. Name it _ElectronicsLayout.cshtml, delete the existing code and add the following:

    Layout = "~/Shared/_MainLayout.cshtml";
<div id="electronicsnav">
    <a href="Products">Products</a> <br /> 
    <a href="Services">Services</a> <br />
    <a href="Support">Support</a> <br />
    <a href="Team">The Team</a> <br />
<div id="electronics">
<div id="footer">The Electronics Division Footer</div>

Step 5

Add a CSHTML file to the root folder. Name this one Automation.cshtml and replace the existing code with this:

    Layout = "~/Shared/_AutomationLayout.cshtml";
    Page.Title = "Automation";
<h3>Automation Home Page</h3>

Step 6

Finally, add another CSHTML file to the root folder and call it Electronics.cshtml. Replace the existing code with the following:

    Layout = "~/Shared/_ElectronicsLayout.cshtml";
    Page.Title = "Electronics";
<h3>Electronics Home Page</h3>

Making sure that the Electronics page is selected in the left pane, click the Run button to launch the page in your browser. Notice that the second navigation has a white background and the main area has a blue background. Click the Automation link in the top navigation. See how the colours change? The main content is a brownish-pink colour as is the secondary navigation. The heading in the main content area changes colour too. Most obviously, the Electronics navigation is displayed vertically whereas the Automation navigation is horizontal.

What defines a Layout page is a call to the RenderBody method. In this exercise you created a layout page from _MainLayout.cshtml by placing @RenderBody() in the file, and by matching that with Layout declarations in both the _AutomationLayout.cshtml and ElectronicsLayout.cshtml files. You also added calls to RenderBody in both of those files, thus turning them into layout pages. Electronics.cshtml and Automation.cshtml each contained Layout declarations pointing to their own layout page, completing the content – layout relationship. There is no limit to the number of levels to which you can nest layout pages.

The design of the pages won’t win any awards, but this sample serves to illustrate that nesting layout pages can offer a very flexible solution to certain problems.

A small sample containing the code in full can be downloaded here


Date Posted:
Last Updated:
Posted by:
Total Views to date: 150196


- BlueCoder always simple and clear.

- Esh

I am new to Webmatrix and this article should qualify as an excellent tutorial for learning. Thanks.

- jalchr

Pretty nice .... I was wondering why don't your provide these is a sample application ... that would help us alot


- Mike


I thought I had already done that, but obviously not. I have updated the article with a link to a download now.

- Huummm

Why not provide a project that can run in VS 2010. Seeing it rendered in VS can clear up things if one cant get their attempt to work correctly

- Mike


I'm not sure I follow what you are suggesting. The article is aimed at WebMatrix users who are unlikely to have Visual Studio, and it's easy enough to run the sample using WebMatrix without having to go and fire up the almighty beast that is VS2010. But if you think you can gain something by running the code in VS, then you can always click on the Visual Studio button in WebMatrix to do so.

Whether you run it from WebMatrix or VS, the result will be the same in each browser you test it in. It's not as if VS provides one of those awful WYSI(Not)WYG Design Views that work with Razor, and even if it did, I would never trust it.

- coder

Very good article! I have tried implementing nested layout in VS2013 MVC Razor and followed all the steps mentioned in this article. Since Project doesn't have any controller, it is throwing an exception. Routeconfig.cs in the project refers to "Home" controller and "Index" actionitem. Could you please help me to run it in VS2013

- Kiran More

This article makes me easy understand of Nested Layout

- Matt

Cheers sir, nice explanation :)

Recent Comments

Kamil 13/10/2015 14:37
In response to ASP.NET MVC 5 with EF 6 - Working With Files
Hello Mike, Any reason why the download link to the source code doesn't work anymore. I'd like I...

Niks Shine 13/10/2015 04:20
In response to 7 C# 6.0 Features That Every ASP.NET Developer Should Know About
Hi, I am going to start learning MVC. Just for the guidance purpose, I would like to know...

biswajit 12/10/2015 09:54
In response to Solved - The Microsoft.ACE.OLEDB.12.0 provider is not registered on the local machine
inspite of installing microsoft office acesss database engine 2007 as per your instruction on my of...

Don 11/10/2015 22:53
In response to 7 C# 6.0 Features That Every ASP.NET Developer Should Know About
In addition to the typo in: public string FullName { get { return string.Format("{0] {1}", } you...

Steve 11/10/2015 17:32
In response to How To Send Email In ASP.NET MVC
Hi Mike, I found your article to be a paragon of clarity and described almost exactly my I am using...

satyabrata 11/10/2015 07:05
In response to Downloading multiple files in ASP.NET
Excellent article!!...

Edmond Kong 10/10/2015 22:06
In response to The WebGrid Helper - Making Selections
Hello Mike, The link to the download page does not work anymore. I'd like to download the sample...

Ervis 09/10/2015 15:10
In response to Creating a Connection String and Working with SQL Server LocalDB
Great tutorial. I do have a probem though, nothing is happening in my App_Data and I can't why....

Gavan McGregor 09/10/2015 13:45
In response to Downloading multiple files in ASP.NET
Hi, (long time reader, first time poster!) Although it's a deliberately simple example, It's /...

Rodrigo 08/10/2015 20:40
In response to MVC 5 with EF 6 in Visual Basic - Creating an Entity Framework Data Model