ASP.NET Web Pages - Page Layout

With Web Pages, creating a website with a consistent layout is easy.

Consistent Appearance

On the Internet, you will find many websites that have a consistent look and style:

  • Every page has the same header
  • Every page has the same footer
  • Every page has the same style and layout

With Web Pages, you can do this very efficiently. You can put reusable content blocks (such as page headers and footers) in a separate file.

You can also use layout templates (layout files) to define a consistent layout for all web pages on your site.

Content Blocks

Many websites have content that is displayed on every page of the site (such as page headers and footers).

With Web Pages, you can use the@RenderPage()method to import content from different files.

Content blocks (from another file) can be imported anywhere in a web page. Content blocks can contain text, markup, and code, just like any ordinary web page.

Writing common headers and footers as separate files will save you a lot of work. You don't have to write the same content on every page, and when the content changes, you only need to modify the header or footer file to see the corresponding content updated on every page of the site.

The following shows what it looks like in code:

Example

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>

Run example »

Layout Page

In the previous section, you saw that it is very easy to display the same content on multiple web pages.

Another way to create a consistent appearance is to use layout pages. A layout page contains the structure of a web page, not the content. When a web page (content page) links to a layout page, it is displayed according to the structure of the layout page (template).

A layout page uses the@RenderBody()method to embed content pages. Apart from that, it is no different from a normal web page.

Every content page must start with alayout directive.

The following shows what it looks like in code:

Layout page:

<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>&copy; 2012 Example. All rights reserved.</p>
</body>
</html>

Any web page:

@{Layout="Layout.cshtml";}

<h1>Welcome to example.com</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.
</p>

Run example »

D.R.Y. - Don't Repeat Yourself

With the two ASP.NET tools Content Blocks and Layout Pages, you can make your web application display a consistent appearance.

These two tools can save you a lot of work; you no longer have to repeat the same information on every page. Centralized markup, styles, and code make your web application easier to manage and maintain.

Preventing Files from Being Browsed

In ASP.NET, files with names that begin with an underscore are prevented from being browsed on the web.

If you do not want your content blocks or layout pages to be seen by your users, you can rename these files:

_header.cshtm

_footer.cshtml

_Layout.cshtml

Hiding Sensitive Information

In ASP.NET, the most common way to hide sensitive information (database passwords, email passwords, etc.) is to store this information in a separate file named "_AppStart".

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "username@example.com";
WebMail.Password = "your-password";
WebMail.From = "your-name-here@example.com";
}


Other Extensions