ASP.NET Web Pages 页面布局
使用 Web Pages 创建一个布局一致的网站是件很容易的事
一致的外观
一致的外观,是良好交互的的基础
几乎所有大站,都具有一致的外观和风格
一致的外观指的是
- 每个页面有相同的头部
- 每个页面有相同的底部
- 每个页面有相同的样式和布局
通过 Web Pages 我们可以非常高效地做到这点
我们可以把重复使用的内容块写在一个单独的文件中,比如页面头部和底部
我们还可以使用布局模板(文件)为站点的所有网页定义一致的布局
Content Blocks(内容块)
几乎所有的网站,比如网易新闻,新浪,微博等,都有一些内容是被显示在站点的每个页面中(比如页面头部和底部)
我们可以使用 Web Pages 的 @RenderPage() 方法从不同的文件导入内容
内容块(来自另一个文件)能被导入网页中的任何地方
内容块可以包含文本,标记和代码,就像任何普通的网页一样
将共同的头部和底部写成单独的文件,这样可以帮助我们节省大量的工作
我们不必在每个页面中书写相同的内容,当内容有变动时,只要修改头部或者底部文件,就可以看到站点中的每个页面的相应内容都已更新
范例
下面的范例显示了它在代码中是如何呈现的
header.cshtml
<h1>这是网页头部</h1> <p>来自于单独的文件 <code>header.cshtml</code></p>
footer.cshtml
<h1>这是网页底部</h1> <p>来自于单独的文件 <code>footer.cshtml</code></p>
webpages_cs_2.cshtml
<html> <body> @RenderPage("header.cshtml") <h1>Hello Web Pages</h1> <p>This is a paragraph</p> @RenderPage("footer.cshtml") </body> </html>
Layout Page(布局页)
在上面的范例中,我们可以看到,想在多个网页中显示相同内容是非常容易的
另一种创建一致外观的方法是使用布局页
一个布局页包含了网页的结构,而不是内容
当一个网页(内容页)链接到布局页,它会根据布局页(模板)的结构进行显示
布局页中使用 @RenderBody()
方法嵌入内容页,除此之外,它与一个正常的网页没有什么差别
每个内容页都必须以 布局指令 开始
范例
下面的范例显示了布局页在代码中是如何呈现的
layout.cshtml
<!DOCTYPE html> <meta charset="utf-8"/> <p>这是头部内容</p> @RenderBody() <p>© 2017-2050 twle.cn. All rights reserved.</p>
webpages_cs_11
@{Layout="layout.cshtml";} <h1>欢迎来到 简单教程 (www.twle.cn)</h1> <p>简单教程[www.twle.cn]以编程开发所需掌握的语言和知识入手,提供了最全的编程技术入门教程, 我们收集了HTML|CSS|Javascript等前端开发技能,Python|Java|Ruby|C|PHP| MySQL等各种编程语言的基础知识,具有大量实例,你可以无需任何编辑器即可联系,做好入门第一课,成就IT高薪</p>
D.R.Y. - Don't Repeat Yourself(不要自我重复)
通过 Content Blocks(内容块)和 Layout Pages(布局页)这两个 ASP.NET 指令,我们可以让 Web 应用程序显示一致的外观
这两个指令能够帮我们节省大量的工作,而不必再每个页面上重复相同的信息
集中的标记、样式和代码让我们的 Web 应用程序更易于管理,更易于维护
防止文件被浏览
ASP.NET 约定,如果文件的名称以下划线开头,可以防止这些文件在网上被浏览
如果你不想让某个内容块或者布局页被用户看到,可以重命名这些文件
_header.cshtml _footer.cshtml _Layout.cshtml
隐藏敏感信息
ASP.NET 约定,隐藏敏感信息(数据库密码、电子邮件密码等等)最通用的方法是将这些信息保存在一个名为 "_AppStart.cshtml" 的单独的文件中
_AppStart.cshtml
@{WebMail.SmtpServer = "stmp.your_mail_server"; WebMail.EnableSsl = true; WebMail.UserName = "username@example.com"; WebMail.Password = "your-password"; WebMail.From = "your-name-here@example.com"; }