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

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

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

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

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

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

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

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

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

? OK，配置是成功的，這樣區域也就創建成功了，就可以順利的進行后面的開發了。

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

登陸頁：

后臺首頁：

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

html頁面以及相應的樣式和js庫目錄結構如下：

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

運行效果如下：

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

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

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

在welcome頁面中，

當我們查看welcome頁面源代碼時，我們發現可以發現只有以下的內容：

而當我們查看在創建項目時默認的項目，源代碼不是這樣的，每一個子頁面，都含有自己的頭文件，是一個完整的網頁，如下圖：

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

結構如圖所示，在視圖文件夾下創建Shared文件夾，里面的_Layout.cshtml就是這個模板頁，即作為整個項目的標準布局文件，外層的_ViewStart.cshtml就是指定程序一運行時就會加載這個標準的布局，里面的代碼如圖所示：

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

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

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

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

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

相應功能菜單的路徑已經指定好了，我們先布局博客內容頁，簡單的放置一個表格：

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

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

掃描二維碼關注我的公眾號，共同學習，共同進步！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。