ASP.NET Web Pages - 页面布局

通过 Web Pages,很容易创建布局一致的网站。

一致的外观

在因特网上,您会发现很多拥有统一外观的网站:

  • 每页拥有相同的页眉
  • 每页拥有相同的页脚
  • 每页拥有相同的样式和布局

通过 Web Pages,可以高效地实现这些。您可以得到可重复使用的代码块(内容块),比如页眉和页脚,在独立的文件中。

您也可以为所有页面定义一致的布局,使用布局模板(布局文件)。

内容块

很多网站都有需要在每张页面上显示的内容(比如页眉和页脚)。

通过 Web Pages,您可以使用 @RenderPage() 方法从不同的文件导入内容。

内容块(来自另一个文件)能够被输入网页中的任意位置,并可包含文本、标记和代码,就像任何常规的网页那样。

使用通用的页眉和页脚,会省去大量的工作。您不必在每页中编写相同的内容,并且当您改变页眉或页脚文件时,内容会在所有页面中更新。

在代码中是这样的:

实例

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

运行实例

使用布局页面

在之前的内容中,您已看到在多个网页中引用相同的内容是很简单的。

创建一致外观的另一种方法是使用布局网页。布局网页包含网页的结构,而不是内容。当网页(内容页)链接到布局页时,它会根据布局页(模板)来显示。

布局页类似普通的网页,但是会在引用内容页的位置调用 @RenderBody() 方法。

每个内容页必须以 Layout 指令开头。

在代码中是这样的:

布局网页:

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

任意网页:

@{Layout="Layout.cshtml";}

<h1>Welcome to W3Schools</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>

运行实例

不要重复自己

通过两个 ASP.NET 工具,内容块和布局页,您能够为 web 应用程序设定一致的外观。

这些工具会为您省去大量的工作,因为您不必在所有页面上重复相同的信息。将标记、样式和代码集中起来,使得 web 应用程序更便于管理和维护。

防止代码泄露

在 ASP.NET 中,名称以下划线开头的文件无法通过 web 来浏览。

如果您希望禁止用户查看内容块或布局文件,请对文件重新命名:

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

隐藏敏感信息

在 ASP.NET 中,隐藏敏感信息(数据库密码、电邮密码等)的常用方法是把这些信息保存在名为 "_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";
}