ASP.NET Web Pages - Layout Pages

Layout pages allow you to keep a consistent look and feel across a website. They offer great flexibility when building your website, and most importantly offer great control and maintenance should you need to change design.

  1. Begin by creating a new empty website and name it LayoutPages
  2. Add a folder named Shared
  3. Inside the Shared folder create a file called _Layout.cshtml
  4. In the Shared folder create a style.css file

Here we will create a simple website structure. In the style sheet insert the following CSS:

*{margin: 0px;padding: 0px;}
.wrapper {margin: 0 auto 0 auto;width: 85%;}
.content{background-color: #000;color: #fff;float: right;width: 75%;}
.content, aside{min-height: 500px;}
header, footer{background-color:#913c3a;height: 100px;clear: both}
aside{width: 25%;background-color: #4f81bd;float: left;}
footer{text-align: center;color: #fff;}

In the _Layout.cshtml page add:

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8" />
        <link rel="stylesheet" href="@Href("~/shared/style.css")" type="text/css"/>
        <div class="wrapper">
            <div class="content">
            &copy; @DateTime.Now.Year

Next, in the default.cshtml (root directory; create it if it does not yet exist). Replace all code with:

<p>This is the main website content!!</p>

Run the default.cshtml and you should see your website, as seen below:

Layout Complete

Let's look at this in detail.

Layout DIagram ASP WebPages

Layouts work in a very simple way. Of the steps taken here, first and most importantly let’s focus on the RenderBody() method. When we create layout pages, the layout page is merged with the content page and then delivered to the client, as seen in the top diagram. The RenderBody() method plays a key function: it defines the page as a layout page, and most importantly specifies where content will be placed from content pages. If you look at the layout page you will see our RenderBody() method is placed in a div called “Content”.

<div class="content">

If you view the source in your browser, you will see our content from the content page rendered in this location. RenderBody() is similar to content place holders found in ASP.NET Web Forms. Content Pages should not contain full HTML document markup, as the layout page already has this. Only one RenderBody can be in a layout page, and if you run a page which is directly calling the RenderBody() you will receive an error saying 'You cannot directly call this page'; you cannot directly request layout pages.

Besides the RenderBody() method, another important issue is the underscore for the file name. The leading underscore prevents this page from being served. ASP.NET Web Pages does not allow pages with a leading underscore to be served, so you’ll get an error if you attempt it. It is good practise to name layout pages with a leading underscore, as it gives a clear indication it is a layout page.

You might have also noticed this:


This simply links our style sheet to the layout page. The reason it is in the Href is because the tilde (~) has a special meaning in ASP.NET. It means root, but unfortunately browsers do not understand ~, and therefore we use the Href() method to convert this to a friendly link for the browser. Ignore the Page.Title for now, as it will be addressed later.The @DateTime.Now.Year is C# code, and simply outputs the year to the browser (according to the server date).

[ Continue ]