熟悉MVC的人都知道從MVC4開始引入了區(qū)域的機制，區(qū)域的創(chuàng)建可以協(xié)助你在架構(gòu)較大的項目中，讓獨立性較高的部分功能作為一個單獨的子MVC系統(tǒng)，降低網(wǎng)站與網(wǎng)站之間的耦合度，也可以通過area切割，讓多個開發(fā)人員開發(fā)同一個項目時，減少沖突。

在.net Core 中創(chuàng)建項目時，我們發(fā)現(xiàn)很多快捷的方式都無法使用了，通過控制器右鍵添加視圖，轉(zhuǎn)到視圖頁等特性都沒有了，包括添加區(qū)域，自動進行區(qū)域配置也都無法使用，導(dǎo)致我們必須自己手動創(chuàng)建區(qū)域以及配置，這樣的好處就是可以幫助我們加深對MVC開發(fā)模式的理解。

下面我們結(jié)合這個項目學(xué)習(xí)怎么添加區(qū)域，在這個博客系統(tǒng)中，分為前臺和后臺，后臺主要是自己進行博客的添加編輯刪除等功能，前臺主要作為博客內(nèi)容的展示，所以這兩個端口我們可以看作是獨立既相互存在的，所以可以使用區(qū)域的方式進行創(chuàng)建了。

首先添加區(qū)域文件夾Areas,并在里面創(chuàng)建Admin(后臺)文件夾，再在里面創(chuàng)建Controllers(控制器)和Views(視圖)文件夾，如圖：

繼續(xù)再添加一個HomeController控制器以及對應(yīng)的視圖，作為后臺首頁，如圖所示：

注意在添加控制器的時候，要添加AreaAttribute屬性，[Area("Admin")]AreaName名稱要和文件夾名稱相同，如圖：

添加完成后需要在StartUp.cs中添加路由配置，

routes.MapRoute("areaRoute", "{area:exists}/{controller}/{action=Index}/{id?}"); ?如圖：

配置完成后，測試是否成功：

? OK，配置是成功的，這樣區(qū)域也就創(chuàng)建成功了，就可以順利的進行后面的開發(fā)了。

后臺頁面展示，(注：后臺是從牛腩老師那兒搜刮的，包括博客的開發(fā)也是借鑒牛腩老師的教程學(xué)習(xí)的，寫博客的目的是為以后的開發(fā)和學(xué)習(xí)提供幫助，僅此而已。)后臺登陸頁以及主頁分別如下：

登陸頁：

后臺首頁：

簡單劃分頁面，首先登陸頁Login.html單獨一個頁面，后臺主頁分為三部分：Top，Left，WelCome，根據(jù)這個劃分在控制器和視圖中分別創(chuàng)建如下頁面：

html頁面以及相應(yīng)的樣式和js庫目錄結(jié)構(gòu)如下：

將css和js以及Images和頁面拷貝到我們的項目中，在wwwroot下創(chuàng)建adminstyle文件夾來放置后臺的樣式。將頁面中引用的js以及樣式等修改相對的路徑，如圖：

運行效果如下：

完美的遷到了項目中了。下面繼續(xù)重復(fù)的步驟，后臺首頁遷入到系統(tǒng)中，步驟是一樣的。在添加完成后，需要修改的幾個地方，在博客列表的內(nèi)容中我們使用一個模塊化的前端框架layui。大家可以去官網(wǎng)下載layui官網(wǎng)，我也放到了項目源文件內(nèi)，

下載完的目錄，我們將它的上層目錄layui直接拷貝到wwwroot下，我們先看下剛剛拷貝好的后臺的首頁內(nèi)容：

大概是我們想要的樣子了，現(xiàn)在該如何引用我們的layui，我們將layui的樣式引用到后臺歡迎頁，當(dāng)然很簡單，直接將css樣式拖到頁面上就可以了，另外這個后臺歡迎頁的這些內(nèi)容我們使用layui中的區(qū)塊樣式，如圖：

在welcome頁面中，

當(dāng)我們查看welcome頁面源代碼時，我們發(fā)現(xiàn)可以發(fā)現(xiàn)只有以下的內(nèi)容：

而當(dāng)我們查看在創(chuàng)建項目時默認(rèn)的項目，源代碼不是這樣的，每一個子頁面，都含有自己的頭文件，是一個完整的網(wǎng)頁，如下圖：

熟悉MVC的小伙伴們都清楚，那是因為使用模板頁，我們可以給項目指定一個模板頁，并且程序一加載時，引用模板頁的頁面會加載模板的內(nèi)容，如何創(chuàng)建這個模板頁，

結(jié)構(gòu)如圖所示，在視圖文件夾下創(chuàng)建Shared文件夾，里面的_Layout.cshtml就是這個模板頁，即作為整個項目的標(biāo)準(zhǔn)布局文件，外層的_ViewStart.cshtml就是指定程序一運行時就會加載這個標(biāo)準(zhǔn)的布局，里面的代碼如圖所示：

在這里面引用了layui.css和layui.js庫，我們知道@RenderBody() 這個是必不可少的，它實際上是一個占位符，以表示這里要顯示其他子頁面的內(nèi)容，與webform中的占位符應(yīng)該是一個用處，再看下_ViewStart.cshtml中的內(nèi)容，很簡單：

就一句代碼，即指定加載的標(biāo)準(zhǔn)布局文件的路徑。好到這里我們在運行我們的項目，

但是此時，其他頁面卻加載不出來了

看到生成的源代碼就知道怎么回事了，它引用了模板頁又帶有自己的文件頭，這樣肯定是不對的，那么我們要指定這幾個頁面不需要引用_Layout.cshtml，一樣很簡單，只需要將模板也指定為空就可以了@ { Layout = null; ?}完美的運行了：

下面我們將我們的博客頁面稍作修改，將沒用的內(nèi)容去掉，如下：

相應(yīng)功能菜單的路徑已經(jīng)指定好了，我們先布局博客內(nèi)容頁，簡單的放置一個表格：

下面再來添加一個添加按鈕以及編輯刪除，同樣我們使用layui里面的樣式，如圖

ok，今天的博客就先寫到這兒了，明天有時間再繼續(xù)。晚安了。

掃描二維碼關(guān)注我的公眾號，共同學(xué)習(xí)，共同進步！

總結(jié)

以上是生活随笔為你收集整理的.net core创建区域(Areas)的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。