一步一步建立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](十)》