Creating Areas In ASP.NET MVC Core

Structuring maintainable projects is key when it comes to the long-term success of any project. One feature in ASP.NET MVC 4.6.x that I utilized often to aid in the process is the idea of Areas. Areas are used to organize independent parts of the project into maintainable and familiar folder structures. I like to think of them as nested-projects or sub-projects inside your main project. Each nested project (Area) has it's own folder structure (controllers, views, etc..) and by default is sandboxed by adding an additional route segment to access pages inside these Areas.

Lucky for us, the ASP.NET MVC Core team followed suit and provided us with the same functionality.

Creating an Area

A classic example of where to use Areas is that of an Admin Area. Administrative operations are a logic separation from the public section of your site and by way of, we should do our best to keep code specific to those operations from dirtying up our public code.

1: Create your Area folder structure

Area folders need to follow a convention. In you project root, you need a folder called Areas. In this folder, you will then have one corresponding folder for each of your Areas. So in our admin example, we would have something like this.

Admin Area Folder

The Areas/Admin folder now can be treated like its own independent project inside our main project.

2: Setting up a Controller

Just like in our main project, we will need to create a Controllers folder.

Admin Area Controller Folder

Inside the Controllers folder, we can create our first Admin Area controller.

Admin Area Controller Class

These classes share the exact same syntax as a regular controller except for one minor difference. You need to decorate your class with an Area Attribute to say that this class belongs to this area.

using Microsoft.AspNetCore.Mvc;
namespace Pioneer.Blog.Areas.Admin.Controllers
{
    [Area("Admin")]
    public class UsersController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

3: Setting up a View

Just like our root project, we will need a Views folder. And inside that Views folder, we will need a folder named the same as our Controller class and a View named after our controller function.

Admin Area Controller View

4: Wiring up our Routing

The last step requires us to tell our Router that we are using Areas. In your Startup.cs class, add the following to your Router configuration.

app.UseMvc(routes =>
{
  // Areas support
  routes.MapRoute(
    name: "areaRoute",
    template: "{area:exists}/{controller=Home}/{action=Index}/{id?}");
  // Removed for abbreviation....

Now that the route knows we are using Areas, based on our naming convention we should be able to access our new admin user page with the following route.

http://your-site.com/admin/users

As noted at the beginning of this post, our Area is sandboxed by adding the name of the Area before the controller.

That is it! Pretty straight forward but super powerful. Once you get cooking with the concept, you will start to notice the many benefits it offers. I particularly like the idea of abstracting Area specific markup out of my main Layout.cshtml file and putting it into nested Layout files that are specific to an Area but share our main Layout throughout the project.