一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十)

朋友们，
大家好，我还是Rector，写ASP.NET MVC 5系列文章[一步一步创建ASP.NET MVC5程序Repository+Autofac+Automapper+SqlSugar]的那个家伙。

今天为大家带来本系列的第十篇文章。

本文知识要点

本文将要给大家分享的是页面统筹和规划方面的知识。

在上一篇文章发布后有朋友在评论中也反馈到了这个问题，即我们可以把每个页面中重复用到的布局代码放到统一的模板页面或者部分视图里面，以便代码的重用及维护。所以本文为大家分享的内容是：

母版页

部分视图

母版页概述

ASP.NET MVC中的母版页类似于传统Webform中的.master母版页面，它可以让我们在做WEB应用程序开发时的页面布局结构更加规范化、标准化，母版页将页面中相同的、通用的区域封装在一起。

我们新建页面时只需要基于这个母版页，就会自动继承母版页面的通用布局部分，比如头部导航、菜单栏、页面底部信息等等。

ASP.NET MVC 5 WEB应用程序开发，我们通常使用的视图引擎为：Razor，这个视图引擎的母版页面默认位于网站目录[/Views/Shared/_Layout.cshtml]中，在具体的视图页面中，我们如果需要使用这个母版页，需要设置这个页面的Layout，如：

@{ Layout="~/Views/Shared/_Layout.cshtml"; }

以上代码就完成了对母版页面的引用，同时继承了母版页面的所有共用布局区域。
如果一个页面不需要使用母版页面的布局引用，则可以将Layout设置为null，如：

@{ Layout=null; }

接下来，我们就结合我们的系列教程，上一篇已经完成的首页以及文章详情页面，使用母版页面来提取、封装我们的母版页面，并最终将母版页应用到首页和文章详情页面。

提取母版页

在上文中已经为大家阐述了母版页的作用，在开始之前提取共用布局区域之前，我们先看一下当前页面的大致布局：

我们暂且将页面分成三个区域，分别是：导航区域、页面内容区域 以及 网页页脚区域。

那么现在就把本示例中的头部导航、页脚区域作为共用区域提取出来，放到母版页中。

打开项目【TsBlog.Frontend】中的【/Views/Shared/_Layout.cshtml】文件，将这个.cshtml文件代码修改成以下的母版页代码：
_Layout.cshtml

在这个母版页中，我将共用的区域、资源以及动态页面内容区域都分别标记出来了。

其中，动态内容区域是用@RenderBody()来标记的。但是请注意，一个母版页中只能有一个@RenderBody()标记。一定要记住哦~~~

应用母版页

好了，母版页提取并封装整理好了，现在我们修改首页，来使用刚才创建的母版页，首页修改后的Razor页面代码如下：
home/index.cshtml

@model IEnumerable<TsBlog.ViewModel.Post.PostViewModel> @{ Layout = "~/Views/Shared/_Layout.cshtml"; ViewBag.Title = "ASP.NET MVC 5 系列文章教程--首页"; } <div> <h1>小伙伴，你好</h1> <p>欢迎来到 Rector 的ASP.NET MVC 5 系列文章教程。在这里，Rector将和你一起一步一步创建一个集成Repository+Autofac+Automapper+SqlSugar的WEB应用程序。</p> <p>你准备好了吗？</p> <p>......</p> <p>让我们开始ASP.NET MVC 5 应用程序的探索之旅吧!!!</p> </div> <strong>文章列表(@(Model.Count())篇)</strong> <ul> @foreach (var p in Model) { <li> <h2><a href="http://www.likecs.com/~/post/details/@p.Id">@p.Title</a></h2> <p>@p.Summary ... <a href="http://www.likecs.com/~/post/details/@p.Id">阅读全文</a></p> </li> } </ul>

我们可以看到，在首页【home/index.cshtml】中，我们设置了Layout和标题ViewBag.Title：

Layout = "~/Views/Shared/_Layout.cshtml"; ViewBag.Title = "ASP.NET MVC 5 系列文章教程--首页";

之前的样式文件引用、脚本文件引用等等都没有了，这样修改之后，现在首页内容将会动态地渲染到母版页面的@RenderBody()的 标记位置。

怎么样，使用母版页是不是让我们的代码可重用了，后期维护时，如果有很多页面需要修改导航信息，我们是不是只需要修改母版页就可以了呢？

但是，Rector在这里呢，还想把可以重用的代码再一次抽取，我们把导航这个部分的代码单独再一次抽离出来。

应用部分视图