如何在 ASP.NET Core MVC 加入 Area 區域

如何在 ASP.NET Core MVC 加入 Area 區域

Area 區域在 ASP.NET MVC 是一個很好用的群組分類,可以將相關的功能模組分類在一起,擁有獨立的命名空間和路由目錄,每一個 Area 區域中各自包含 MVC 結構,可以將專案目錄再分割成許多的功能模組來管理。

一個大型專案總會有許多的分類,非常適合用 Area 區域來分別管理,例如電商網站可以將會員、商品、訂單等等功能放在不同的 Area 區域中。在一般後台管理系統可以將財務、生產、銷售等不同部門分別用 Area 區域分別建立專屬目錄。

每一個 Area 區域還可以呼叫不同的 Layout 版面配置頁,讓不同 Area 區域呈現不同的設計風格,當然也可以全部 Area 使用相同的 Layout 版面配置頁,只需要在 Area 中設定即可。

如何在 ASP.NET Core 加入 Area 區域

在專案名稱上按右鍵,選擇「加入 > 新增 Scaffold 項目」。

ASP.NET Core 加入 Area 區域

選擇「MVC 區域」

ASP.NET Core 加入 Area 區域

輸入 Area 區域名稱,通常用功能、群組、組織等分類名稱。

ASP.NET Core 加入 Area 區域

建好 Area 區域後,目錄就會出現 Areas 底下的新目錄,每一個 Area 底下還會有 MVC 結構,

出現 Areas 底下的新目錄

Area 中加入新 Controller

在 Area 中加入新 Controller 其實和外面那層 Controller 的做法是一樣的,只要在 Controllers 目錄中按右鍵,選擇「加入 > 控制器」就可以了。

Area 中加入新 Controller

選擇「MVC 控制器 – 空白」

選擇「MVC 控制器 - 空白」

輸入 Controller 名稱,但要注意保持名稱後面的「Controller」關鍵字。

輸入 Controller 名稱

在 Area 中的 Controller 加入 View 做法也是相同的,在 Action 方法內按右鍵選「新增檢視」即可。

在 Action 方法內按右鍵選「新增檢視」

在 Area 中新增的 View 可以選擇獨立的 Layout 或者跟主目錄中的 Layout 共用也行。如果要跟主目錄共用 Layout 就需要指定主目錄的 Layout 路徑,如果保持空白,系統會找預設相對路徑中的 Layout 檔案。

指定主目錄的 Layout 路徑

如何設定 Area 的 View 預設 Layout 路徑

在剛剛上一步,我在「使用版面配置頁」輸入了主目錄的 Layout 路徑,但其實也可以在 Area 中設定預設路徑,之後在「使用版面配置頁」保持空白就可以了。

在 Area/Member/Views 的目錄按右鍵選「加入 > 檢視」。

加入 > 檢視

選擇「Razor 檢視-空白」

選擇「Razor 檢視-空白」

檔名輸入「_ViewStart.cshtml」

檔名輸入「_ViewStart.cshtml」

然後在內容輸入

Layout = "~/Views/Shared/_Layout.cshtml";

這樣就可以設定預設 Layout 路徑了。

完成後的檔案。

設定 Area 的 View 預設 Layout 路徑

在 Controller 加入 Area 屬性

在 Area 中的 Controller 需要在 Controller 上面註明 Area 名稱,加入 [Area("{AreaName}")] 語法,例如我的 Area 名稱是 Member,就增加 [Area("Member")] 就可以了。

在 Controller 加入 Area 屬性

加入 Area 路由設定

打開 Program.cs 檔案,在現有的 MapControllerRoute 設定上面增加一組 Area 區域的路由設定:

加入 Area 路由設定

多了 Area 在網址的路由就會多一層結構,所以這裡可以增加新的路由設定。

測試新 Area 的 Controller

我剛剛增加的 Area 是 Member,Controller 是 UserAdmController,Action 是 Index,所以在測試網址只要輸入 https://localhost:7121/Member/UserAdm/Index 就會找到了。

測試新 Area 的 Controller

在路由的設定中其實有預設值,所以網址輸入 https://localhost:7121/Member/UserAdm 也會得到相同的頁面。

避免 Area 中使用相同的 Controller 名稱

在主目錄中有一個 HomeController,如果在 Area 中也建立一個 HomeController,那就會造成多端點的問題。

避免 Area 中使用相同的 Controller 名稱

簡單方法只要在 Area 中避免用相同名稱就行了,因為 Area 需要路由來指向 Controller,如果名稱相同,會導致路由不明確。

Area 中可以再加入 Area 有巢狀效果嗎?

答案是不行的,每一個 MVC 專案只能有一層的 Areas 目錄,在 Areas 目錄下可以建立無數的 Area。

相關學習文章

如果你在學習上有不懂的地方,需要諮詢服務,可以參考站長服務,我想辨法解決你的問題
如果文章內容有過時、不適用或錯誤的地方,幫我在下方留言通知我一下,謝謝

加入社團一起討論

關注我的 IG