ASP.NET Web Pages - 页面布局

通过 Web Pages ，创建一个布局一致的网站是很容易的事。

一致的外观

在因特网上，您会发现很过网站都具有一致的外观和风格：

  • 每个页面有相同的头部

  • 每个页面有相同的底部

  • 每个页面有相同的样式和布局

通过 Web Pages ，您能非常高效地做到这点。您可以把重复使用的内容块（比如页面头部和底部）写在一个单独的文件中。

您还可以使用布局模板（布局文件）为站点的所有网页定义一致的布局。

Content Blocks（内容块）

许多网站都有一些内容是被显示在站点的每个页面中（比如页面头部和底部）。

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

内容块（来自另一个文件）能被导入网页中的任何地方。内容块可以包含文本，标记和代码，就像任何普通的网页一样。

将共同的头部和底部写成单独的文件，这样会帮您节省大量的工作。您不必在每个页面中书写相同的内容，当内容有变动时，您只要修改头部或者底部文件，就可以看到站点中的每个页面的相应内容都已更新。

以下显示了它在代码中是如何呈现的：

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例


Layout Page（布局页）

在上一部分，您看到了，想在多个网页中显示相同内容是非常容易的。

另一种创建一致外观的方法是使用布局页。一个布局页包含了网页的结构，而不是内容。当一个网页（内容页）链接到布局页，它会根据布局页（模板）的结构进行显示。

布局页中使用 @RenderBody() 方法嵌入内容页，除此之外，它与一个正常的网页没有什么差别。

每个内容页都必须以布局指令开始。

以下显示了它在代码中是如何呈现的：

布局页：

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

任何网页：

实例

@{Layout="Layout.cshtml";}

<h1> Welcome to W3Cschool </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. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.</p>

运行实例 »

点击 "运行实例" 按钮查看在线实例



D.R.Y. - Don't Repeat Yourself（不要自我重复）

通过 Content Blocks（内容块）和 Layout Pages（布局页）这两个 ASP.NET 工具，您可以让您的 Web 应用程序显示一致的外观。

这两个工具能帮您节省大量的工作，您不必再每个页面上重复相同的信息。集中的标记、样式和代码让您的 Web 应用程序更易于管理，更易于维护。

防止文件被浏览

在 ASP.NET 中，文件的名称以下划线开头，可以防止这些文件在网上被浏览。

如果您不想让您的内容块或者布局页被您的用户看到，可以重命名这些文件：

_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";
}