一步一步创建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 class="jumbotron">
    <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 class="post-title">文章列表(@(Model.Count())篇)</strong>
<ul class="list-unstyled post-item-box">
    @foreach (var p in Model)
    {
        <li>
            <h2><a href="~/post/details/@p.Id">@p.Title</a></h2>
            <p class="post-item-summary">@p.Summary ... <a href="~/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在这里呢，还想把可以重用的代码再一次抽取，我们把导航这个部分的代码单独再一次抽离出来。

应用部分视图

首先，在文件夹【~/Views/Shared/】下新建一个文件，命名为：_NavBar.cshtml。
再将之前母版页面中的导航部分抽取出来，放到_NavBar.cshtml文件中：

<nav class="navbar navbar-default navbar-static-top ts-navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="~/">TSBLOG</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="~/">网站首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">分类导航 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">后端开发</li>
                            <li><a href="http://2sharings.com/category/csharp-development">C#程序设计</a></li>
                            <li><a href="http://2sharings.com/category/dot-net">.NET程序设计</a></li>
                            <li><a href="http://2sharings.com/category/asp-dot-net">ASP.NET</a></li>
                            <li><a href="http://2sharings.com/category/asp-net-mvc">ASP.NET MVC</a></li>
                            <li><a href="http://2sharings.com/category/asp-dotnet-core">ASP.NET Core</a></li>
                            <li><a href="http://2sharings.com/category/winform">Winform</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="dropdown-header">数据库</li>
                            <li><a href="http://2sharings.com/category/mysql">MySQL</a></li>
                            <li><a href="http://2sharings.com/category/sql-server">SQL Server</a></li>
                            <li><a href="http://2sharings.com/category/sqlite">SqLite</a></li>
                        </ul>
                    </li>
                    <li><a href="~/home/about">关于我们</a></li>
                    <li><a href="~/home/contact">联系我们</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right navbar-profile">
                    <li><a href="~/account/register">免费注册</a></li>
                    <li><a class="btn btn-primary nav-btn-login" href="~/account/login">立即登录</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>

然后修改母版页_Layout.cshtml为:

怎么样，母版页现在是不是更加整洁了呢？我们在后期维护导航的时候是不是也会更加容易了呢？有没有觉得Razor视图DIAO爆了。

写到这里，Rector还真想吐槽，吖的，为什么传统的Webform母版页功能怎么做得那么难用呢！！！

“好在，我们还有Razor。”软软站出来说。(我就站一旁看着，不说话)

好了，Rector把母版页和部分视图给大家作了一个初步的分享，接下来我们把文章详情页面也应用上母版页。
打开文件/Home/Post.cshtml，将页面代码修改成如下所示：

@model TsBlog.ViewModel.Post.PostViewModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = Model.Title;
}
<article>
    <p>Post id:@Model.Id</p>
    <p>Post Title:@Model.Title</p>
    <p>Post PublishedAt:@Model.PublishedAt</p>
    <p>Post IsDeleted:@Model.IsDeleted</p>
</article>

打完收工，本文关于Razor视图引擎的母版页和部分视图就为大家分享到这里，Rector在这里起一个抛砖引玉的作用，更多的关于母版页和部分视图请查阅更多详细的资料，以挥其更大的作用。

好了，如果你喜欢Rector，或者是喜欢本系列文章，请为我点个赞，以鼓励Rectro继续写出更好的文章，或者系列文章。

本期源码托管地址：请至文章首发地址获取《一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十)》

看完教程如果觉得还不过瘾的，想“勾对”的，欢迎加入码友网官方QQ群：483350228，如果你按照教程还原出来的程序运行有问题，请参照本期源码对应调整与修改遇到问题的，也欢迎加入QQ群。有什么，你懂的。。。^_^

谢谢你的耐心阅读，本系列未完待续，我们下期再见……

同时，也欢迎大家关注我们的.NET编程爱好者社区：https://2sharings.com 每天都有.NET的开发技术干货更新哦。

https://codedefault.com 一个.NET编程爱好者社区，专注.NET/C#开发，帮助你找到疑难问题的更优美、更高级的解决方案

本文首发自 码友网 《一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十)》