前言
朋友們优训，
大家好夹界，我還是Rector逛艰，寫ASP.NET MVC 5系列文章 [一步一步創(chuàng)建ASP.NET MVC5程序Repository+Autofac+Automapper+SqlSugar] 的那個(gè)家伙煌茬。
今天為大家?guī)肀鞠盗械牡谑恼隆?/p>
本文知識(shí)要點(diǎn)
本文將要給大家分享的是頁面統(tǒng)籌和規(guī)劃方面的知識(shí)址否。
在上一篇文章發(fā)布后有朋友在評(píng)論中也反饋到了這個(gè)問題局蚀，即我們可以把每個(gè)頁面中重復(fù)用到的布局代碼放到統(tǒng)一的模板頁面或者部分視圖里面麦锯，以便代碼的重用及維護(hù)。所以本文為大家分享的內(nèi)容是：
- 母版頁
- 部分視圖
母版頁概述
ASP.NET MVC中的母版頁類似于傳統(tǒng)Webform中的.master母版頁面琅绅，它可以讓我們?cè)谧鯳EB應(yīng)用程序開發(fā)時(shí)的頁面布局結(jié)構(gòu)更加規(guī)范化扶欣、標(biāo)準(zhǔn)化，母版頁將頁面中相同的千扶、通用的區(qū)域封裝在一起料祠。
我們新建頁面時(shí)只需要基于這個(gè)母版頁，就會(huì)自動(dòng)繼承母版頁面的通用布局部分澎羞，比如頭部導(dǎo)航髓绽、菜單欄、頁面底部信息等等妆绞。
ASP.NET MVC 5 WEB應(yīng)用程序開發(fā)顺呕，我們通常使用的視圖引擎為：Razor，這個(gè)視圖引擎的母版頁面默認(rèn)位于網(wǎng)站目錄[/Views/Shared/_Layout.cshtml]中括饶，在具體的視圖頁面中株茶，我們?nèi)绻枰褂眠@個(gè)母版頁，需要設(shè)置這個(gè)頁面的Layout图焰，如：
@{
Layout="~/Views/Shared/_Layout.cshtml";
}
以上代碼就完成了對(duì)母版頁面的引用启盛，同時(shí)繼承了母版頁面的所有共用布局區(qū)域。
如果一個(gè)頁面不需要使用母版頁面的布局引用技羔，則可以將Layout設(shè)置為null僵闯，如：
@{
Layout=null;
}
接下來，我們就結(jié)合我們的系列教程藤滥，上一篇已經(jīng)完成的首頁以及文章詳情頁面鳖粟，使用母版頁面來提取、封裝我們的母版頁面超陆，并最終將母版頁應(yīng)用到首頁和文章詳情頁面牺弹。
提取母版頁
在上文中已經(jīng)為大家闡述了母版頁的作用，在開始之前提取共用布局區(qū)域之前时呀，我們先看一下當(dāng)前頁面的大致布局：
我們暫且將頁面分成三個(gè)區(qū)域张漂，分別是：導(dǎo)航區(qū)域、頁面內(nèi)容區(qū)域 以及 網(wǎng)頁頁腳區(qū)域谨娜。
那么現(xiàn)在就把本示例中的頭部導(dǎo)航航攒、頁腳區(qū)域作為共用區(qū)域提取出來，放到母版頁中趴梢。
打開項(xiàng)目【TsBlog.Frontend】中的【/Views/Shared/_Layout.cshtml】文件漠畜，將這個(gè).cshtml文件代碼修改成以下的母版頁代碼：
_Layout.cshtml
在這個(gè)母版頁中憔狞，我將共用的區(qū)域蝴悉、資源以及動(dòng)態(tài)頁面內(nèi)容區(qū)域都分別標(biāo)記出來了。
其中瘾敢，動(dòng)態(tài)內(nèi)容區(qū)域是用
@RenderBody()來標(biāo)記的拍冠。但是請(qǐng)注意，一個(gè)母版頁中只能有一個(gè)@RenderBody()標(biāo)記簇抵。一定要記住哦~~~
應(yīng)用母版頁
好了庆杜，母版頁提取并封裝整理好了，現(xiàn)在我們修改首頁碟摆，來使用剛才創(chuàng)建的母版頁晃财，首頁修改后的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將和你一起一步一步創(chuàng)建一個(gè)集成Repository+Autofac+Automapper+SqlSugar的WEB應(yīng)用程序。</p>
<p>你準(zhǔn)備好了嗎嘉裤？</p>
<p>......</p>
<p>讓我們開始ASP.NET MVC 5 應(yīng)用程序的探索之旅吧!!!</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】中，我們?cè)O(shè)置了Layout和標(biāo)題ViewBag.Title：
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "ASP.NET MVC 5 系列文章教程--首頁";
之前的樣式文件引用屑宠、腳本文件引用等等都沒有了厢洞，這樣修改之后典奉，現(xiàn)在首頁內(nèi)容將會(huì)動(dòng)態(tài)地渲染到母版頁面的@RenderBody()的 標(biāo)記位置。
怎么樣卫玖，使用母版頁是不是讓我們的代碼可重用了，后期維護(hù)時(shí)假瞬，如果有很多頁面需要修改導(dǎo)航信息，我們是不是只需要修改母版頁就可以了呢脱茉？
但是，Rector在這里呢琴许，還想把可以重用的代碼再一次抽取，我們把導(dǎo)航這個(gè)部分的代碼單獨(dú)再一次抽離出來。
應(yīng)用部分視圖
首先益兄，在文件夾【~/Views/Shared/】下新建一個(gè)文件，命名為：_NavBar.cshtml净捅。
再將之前母版頁面中的導(dǎo)航部分抽取出來，放到_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="~/">網(wǎng)站首頁</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">分類導(dǎo)航 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header">后端開發(fā)</li>
<li><a >C#程序設(shè)計(jì)</a></li>
<li><a >.NET程序設(shè)計(jì)</a></li>
<li><a >ASP.NET</a></li>
<li><a >ASP.NET MVC</a></li>
<li><a >ASP.NET Core</a></li>
<li><a >Winform</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">數(shù)據(jù)庫</li>
<li><a >MySQL</a></li>
<li><a >SQL Server</a></li>
<li><a >SqLite</a></li>
</ul>
</li>
<li><a href="~/home/about">關(guān)于我們</a></li>
<li><a href="~/home/contact">聯(lián)系我們</a></li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-profile">
<li><a href="~/account/register">免費(fèi)注冊(cè)</a></li>
<li><a class="btn btn-primary nav-btn-login" href="~/account/login">立即登錄</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
然后修改母版頁_Layout.cshtml為:
怎么樣灸叼，母版頁現(xiàn)在是不是更加整潔了呢神汹？我們?cè)诤笃诰S護(hù)導(dǎo)航的時(shí)候是不是也會(huì)更加容易了呢？有沒有覺得Razor視圖DIAO爆了古今。
寫到這里，Rector還真想吐槽滔以，吖的捉腥，為什么傳統(tǒng)的Webform母版頁功能怎么做得那么難用呢！Ｄ慊抵碟！
“好在，我們還有Razor坏匪∧獯”軟軟站出來說。(我就站一旁看著适滓，不說話)
好了敦迄，Rector把母版頁和部分視圖給大家作了一個(gè)初步的分享，接下來我們把文章詳情頁面也應(yīng)用上母版頁凭迹。
打開文件/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>
打完收工，本文關(guān)于Razor視圖引擎的母版頁和部分視圖就為大家分享到這里嗅绸，Rector在這里起一個(gè)拋磚引玉的作用脾猛，更多的關(guān)于母版頁和部分視圖請(qǐng)查閱更多詳細(xì)的資料，以揮其更大的作用鱼鸠。
好了猛拴，如果你喜歡Rector，或者是喜歡本系列文章蚀狰，請(qǐng)為我點(diǎn)個(gè)贊愉昆，以鼓勵(lì)Rectro繼續(xù)寫出更好的文章，或者系列文章造锅。
本期源碼托管地址：請(qǐng)至文章首發(fā)地址獲取《一步一步創(chuàng)建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十)》
看完教程如果覺得還不過癮的撼唾，想“勾對(duì)”的，歡迎加入圖享網(wǎng)官方QQ群：483350228，如果你按照教程還原出來的程序運(yùn)行有問題倒谷，請(qǐng)參照本期源碼對(duì)應(yīng)調(diào)整與修改遇到問題的蛛蒙，也歡迎加入QQ群。有什么渤愁，你懂的牵祟。。抖格。_
謝謝你的耐心閱讀诺苹，本系列未完待續(xù)收奔，我們下期再見……
同時(shí)滓玖，也歡迎大家關(guān)注我們的.NET編程愛好者社區(qū)：https://2sharings.com 每天都有.NET的開發(fā)技術(shù)干貨更新哦势篡。
https://2sharings.com 一個(gè).NET編程愛好者社區(qū)，專注.NET/C#開發(fā)念祭，幫助你找到疑難問題的更優(yōu)美粱坤、更高級(jí)的解決方案
本文首發(fā)自 圖享網(wǎng) 《一步一步創(chuàng)建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十)》
