ASP.NET MVC3: Razor 中的布局

核心提示：ASP.NET MVC 3 带来了一个新的名为 Razor 的视图引擎，同时也支持已经存在的 .aspx 视图引擎，ASP.NET MVC3: Razor 中的布局，什么是布局？典型情况下，一个网站中所有的页面都有着一致的观感，这个技术典型地应用在 header 中，例如 meta 中的设置内容，ASP.NET 2.0

ASP.NET MVC 3 带来了一个新的名为 Razor 的视图引擎，同时也支持已经存在的 .aspx 视图引擎。

什么是布局？

典型情况下，一个网站中所有的页面都有着一致的观感，ASP.NET 2.0 提供了称为“母版页”的技术来帮助基于 .aspx 的页面解决这个问题。Razor 使用称为“布局”的技术来解决同样的问题。这样你可以定义一个公共的站点模板，然后在整个网站中继承它的观感。

在 Razor 中使用布局

没有使用布局的页面如下所示：

控制器的源码如下所示：

Razor 视图中的源码如下所示：

目前还没有使用布局，所以，程序员不得不在每一个页面中复制同样的观感。

使用布局进行重构

Razor 的布局使得这一切变得简单，首先，我们在  \Views\Shared 文件夹下增加一个公共的布局模板。默认的公共视图和模板都被保存在这个文件夹中。

这个布局文件的内容如下所示：

对于这个文件需要注意以下几点：

1. 在文件开头的  @inherits  指令不再是必须的。如果你愿意的话，仍然可以保留，例如你希望使用一个自定义的基类。这样使得文件更加易读。
2. 我们通过调用  @RenderBody()  方法来指示填充的内容。
3. 在 head 中，我们使用  “@View.Title” 来输出标题。

在网站中，我们通过布局来保持统一的观感。

现在，我们使用这个布局来更新原来的视图。

注意到下面的三个问题：

1. 不需要使用标记来包围内容，默认情况下，Razor 就会将整个内容作为部分的内容部分，如果在布局中存在多个区域，你仍然可以通过命名的区域来指定区域，这样，Razor 使得 90%的工作变得简单。
2. 我们通过代码设置了  View.Title  的属性， Index.cshtml  中的代码将在布局之前执行，所以，我们可以通过编程来设置传递给布局的值。这个技术典型地应用在 header 中，例如 meta 中的设置内容。
3. 我们通过设置 Layout　属性来设置 Index.cshtml　 使用的布局。

生成的结果如下：