首页>教程>ASP.NET教程>ASP.NET Web Pages 页面布局

需要支持?

如果通过文档没办法解决您的问题,请提交工单获取我们的支持!

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";
}
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索