Areas In ASP.NET Core MVC

Introduction

Area is a beautiful feature of ASP.net MVC that allows you to organize related functionality into a group. We can create a hierarchy for the physical grouping of the functionality or business component. In other words, Area is a smaller functional unit which has its own set of Models, Views, and controllers. ASP.net MVC applications may have one or more areas. So, using Areas, we can divide our large application into smaller functional groups. The logical components such as Model, View and Controller are kept in different folders and MVC framework uses naming conventions to create relations between these components.

Everything in MVC applications is organized with Controllers and Views. Normally, the controller name determines the first part of our URL and action name becomes the second part. By default views that are rendered have the same name as action method name.

In older ASp.net MVC applications, it is very easy to create Areas. Defaul has an option to create area by right clicking on project and going to "Add >> Area". The folder and content within area folder are automatically created by the template.

How to create "Area" in ASP.net Core

As we are aware, there is no option to create area by right clicking on project folder. So if we want to create area in Asp.net Core MVC application, Create new folder and name it to area. Within this folder we can create another new folder and give it to any logical name. Here we need to Model, View and Controller folder manually.

To demonstrate the example, I have created folder "Test" under "Areas" folder and within this folder I have create three folders: Models, Views and Controllers.

At the time of rendering the view, by Default MVC tries to find out the views within an Area. If it is not found, it tries in other locations. Following are the locations in which MVC tries to find view.

/Areas/<Area Name>/Views/<Controller Name>/<Action Name>.cshtml
/Areas/<Area Name>/Views/Shared/<Action Name>.cshtml
/Views/Shared/<Action Name>.cshtml

These default locations can be changed using AreaViewLocationFormats of RazorViewEngineOptions.

In this example, I have given name of the folder as "Areas", but it can be anything. It is not necessary that area folder name needs to be "Areas". This can be changed using MVC option.

In this structure, only View folder is in consideration becausethe rest of the content like controllers and models are the classes and it can be compiled within single dll whereas the content of views is compiled individually.

Once we have defined the folder hierarchy, we have to tell MVC which controller is associated with which area. We can do this thing by decorating controller with "Area" attribute.

namespace AreasExample.Areas.Test.Controllers
{
using Microsoft.AspNetCore.Mvc;
[Area("Test")]
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
}

Next step is to setup a route definition which work with our newly created areas. To demonstrate the example, I have use a conventional route that define in "Configure" method of Startup class.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "areaRoute",
template: "{area:exists}/{controller=Home}/{action=Index}");
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}

The views under our area do not share the _ViewImports.cshtml and _ViewStart.cshtml. This means that layout page of our site will not apply automatically to the views under Areas. To apply common layout page that is located at root Views folder to our views under area, we need to copy both files _ViewImports.cshtml and _ViewStart.cshtml to view folder of each area. The _ViewStart.cshtml file contain the location of the layout page, so we need to correct layout page path after coping the file.

_ViewStart.cshtml

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

Generating links from an action

Generating links from an action method (which controller is under area) to another action on different controller and different area, we need to pass area name with route argument.

@Html.ActionLink("Go to Home Page of Test Area“, "Index", "Home", new { area = "Test" })

We can also generating the link for the action (which controller is under area) to another action on different controller which is not under any area by passing blank area value to the route argument.

@Html.ActionLink("Go to Home Page", "Index", "Home", new { area = "" })

Output

Summary

Areas in asp.net core MVC provide the following features,

Application may have one or more area
Every area has its own Model and View Controller
It allows us to organize large MVC applications into multiple components which work independently
We can have same name controller within different areas

Currently nested areas (areas within area) are not directly supported by Asp.net core application but it can be done using IViewLocationExpander. It's used to modify view locations and how the view engine searches for the path.

You can view or download the source code from the following link.