ASP.NET Web Pages 页面布局

使用 Web Pages 创建一个布局一致的网站是件很容易的事

一致的外观

一致的外观,是良好交互的的基础

几乎所有大站,都具有一致的外观和风格

一致的外观指的是

  1. 每个页面有相同的头部
  2. 每个页面有相同的底部
  3. 每个页面有相同的样式和布局

通过 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>&copy; 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";
}

ASP.NET 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.