ASP.NET Web Pages - Page Layout

It is easy to create a website with a consistent layout through Web Pages.

A consistent appearance

On the Internet, you will find many websites with a unified appearance:

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

Through Web Pages, these can be implemented efficiently. You can get reusable code blocks (content blocks), such as headers and footers, in independent files.

You can also define a consistent layout for all pages using layout templates (layout files).

Content blocks

Many websites have content that needs to be displayed on every page (such as headers and footers).

Through Web Pages, you can use @RenderPage() Methods import content from different files.

Content blocks (from another file) can be inserted at any position in the input web page and can contain text, tags, and code, just like any regular web page.

Using a common header and footer can save a lot of work. You don't have to write the same content on each page, and when you change the header or footer file, the content will be updated on all pages.

In the code, it looks like this:

Example

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

Run Instance

Using layout pages

In the previous content, you have seen that it is very simple to reference the same content in multiple web pages.

Another method to create a consistent appearance is to use layout web pages. Layout web pages contain the structure of the web page, not the content. When a web page (content page) links to a layout page, it will display according to the layout page (template).

Layout pages are similar to ordinary web pages, but they will call the location of the referenced content page. @RenderBody() Method.

Each content page must start with Layout instructionThe beginning.

In the code, it looks like this:

Layout web page:

<html>
<body>
<p>This is text.</p>
@RenderBody()
<p>© 2012 CodeW3C.com. All rights reserved.</p>
</body>
</html>

Any Web Page:

@{Layout="Layout.cshtml";}
<h1>Welcome to CodeW3C.com</h1>
<p>
This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
</p>

Run Instance

Do Not Repeat Yourself

Through two ASP.NET tools, content blocks and layout pages, you can set a consistent appearance for web applications.

These tools will save you a lot of work because you do not have to repeat the same information on all pages. Concentrate tags, styles, and code to make web applications easier to manage and maintain.

Prevent Code Leak

In ASP.NET, files that start with an underscore cannot be browsed via web.

If you want to prevent users from viewing content blocks or layout files, rename the files:

  • _header.cshtm
  • _footer.cshtml
  • _Layout.cshtml

Hide Sensitive Information

In ASP.NET, a common method to hide sensitive information (such as 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";
}