如何在 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 項目」。

選擇「MVC 區域」

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

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

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

選擇「MVC 控制器 – 空白」

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

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

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

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

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

選擇「Razor 檢視-空白」

檔名輸入「_ViewStart.cshtml」

然後在內容輸入

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

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

}

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

完成後的檔案。

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

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

app.MapControllerRoute(
    name: "MyArea",
    pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

app.MapControllerRoute(

name: "MyArea",

pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

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

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

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

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

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

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