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

前言朋友們，大家好，我還是Rector，寫ASP.NET MVC 5系列文章 [\[一步一步創建ASP.NET MVC5程式Repository+Autofac+Automapper+SqlSugar\]][6] 的那個家伙。今天為大家帶來本系列的第十篇文章。本文知識要點本文將要給大家分享 ...

前言

朋友們，
大家好，我還是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://2sharings.com 一個.NET編程愛好者社區，專註.NET/C#開發，幫助你找到疑難問題的更優美、更高級的解決方案

本文首發自圖享網《一步一步創建ASP.NET MVC5程式[Repository+Autofac+Automapper+SqlSugar](十)》