Nested Layout Pages with Razor

4.41 (22 votes)

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;
}

h1{
    color: #0093c0;
}

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

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

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

#automation{
    background-color: #ffe8d3;
}

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

#automationnav{
    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">
    <head>
        <meta charset="utf-8" />
        <title>@Page.Title</title>
        <link href="@Href("~/Content/StyleSheet.css")" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <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>
            </div>
                @RenderBody()
        </div>
    </body>
</html>

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>
<div id="automation">
    @RenderBody()
</div>
<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>
<div id="electronics">
    @RenderBody()
</div>
<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: 156351

10 Comments

- BlueCoder

...as 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

Thanks

- Mike

@jalchr

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

@Huummm

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 :)

- John Martin Beh

Many years later after you first posted this article in 2010, it still relevant & useful. Using Webmatrix 3.

Recent Comments

Ghazanfar 30/01/2016 06:43
In response to Getting Started with ASP.NET MVC 5 using Visual Basic
Nice working. Please keep it up to convert csharp code into vb.net. Its very helpful for vb...

sara 29/01/2016 09:39
In response to Simple Login and Redirect for ASP.NET and Access
Hi there, I am trying to validate and check for inputs entered. When I don't enter any inputs and...

Martin Thatcher 28/01/2016 17:28
In response to MVC 5 with EF 6 in Visual Basic - Advanced Entity Framework Scenarios
A small typo I think. In the code section that begins Function Index(ByVal SelectedDepartment As As...

Suresh_thefame 28/01/2016 08:03
In response to Sessions and Shopping Carts
Helpful....

Andrey Kurdyumov 28/01/2016 05:47
In response to ASP.NET 5: Uploading files with ASP.NET MVC 6
@Lee IFormFile has OpenReadStream(): Stream method...

Alisa 27/01/2016 18:37
In response to A Better Way To Export Gridviews To Excel
Thanks for this example! I am also asking about the date fields having to be re-formatted when the a...

Dan Buckley 27/01/2016 00:47
In response to What ASP.NET Can And Cannot Do
New to all things programming, this was very helpful and clear. Please write more....

satyabrata 26/01/2016 16:16
In response to Request.Form Is Empty When Posting To ASPX Page
Thank you....

david sanchez 26/01/2016 09:51
In response to ASP.NET MVC 5 with EF 6 - Working With Files
Thanks! This line " <img src="~/images/@Model.FilePaths.First(f => f.FileType == alt="" />" an...

Bryon 25/01/2016 15:06
In response to Windows Authentication With ASP.NET Web Pages
Was hoping this would help solve the issues I'm having. Then I saw the dates and new it was too old....