Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

ASP.NET web Pages layout


May 12, 2021 ASP.NET


Table of contents


ASP.NET Web Pages - Page layout

This section describes using ASP.NET Web Pages to achieve a uniform page layout.

With Web Pages, it's easy to create a Web site with a consistent layout.


A consistent look

On the Internet, you'll find that many websites have a consistent look and feel:

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

With Web Pages, you can do this very efficiently. You can write reusable blocks of content, such as the head and bottom of a page, in a separate file.

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


Content Blocks (Content Blocks)

Many sites have content that is displayed on every page of the site (such as the head and bottom of the page).

Web Pages allows you to @RenderPage content from different files using the 2000s() method.

A content block (from another file) can be imported anywhere in a Web page. Content blocks can contain text, tags, and code, just like any normal Web page.

Writing the common head and bottom into separate files will save you a lot of work. You don't have to write the same content on each page, and when the content changes, you can see that each page in the site has been updated by modifying the header or bottom file.

Here's how it's rendered in code:

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

Run an instance . . .


Layout Page (Layout Page)

In the previous section, you saw how easy it is to display the same content across multiple pages.

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

Layout pages use the @RenderBody() method to embed content pages, except that it is no different from a normal web page.

Each content page must start with the layout instructions.

Here's how it's rendered in code:

Layout page:

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

Any web page:

@{Layout="Layout.cshtml";}

<h1>Welcome to w3cschool.cn</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 an instance . . .


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

With content Blocks and Layout Pages, two ASP.NET tools, you can give your web applications a consistent look.

These two tools can save you a lot of work, so you don't have to repeat the same information on every page. Centralized tags, styles, and code make your web applications easier to manage and maintain.


Prevent files from being browsed

In ASP.NET, the names of files begin with a dash to prevent them from being browsed online.

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

_header.cshtm

_footer.cshtml

_Layout.cshtml


Hide sensitive information

In ASP.NET, the most common way to hide sensitive information (database passwords, e-mail passwords, and so on) is to keep that information in a separate file called _AppStart".

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "[email protected]";
WebMail.Password = "your-password";
WebMail.From = "[email protected]";
}

That's ASP.NET web Pages layout content, and if you want a more convenient unified web layout, you can try ASP.NET Web Pages to lay it out.