How to use an Area in ASP.NET Core

In order to include an Area in an ASP.NET Core app, first we need to include a conventional route in the Startup.cs file (It’s best to place it before any non-area route):

In Startup.cs/Configure method:

app.UseMvc(routes =>
{
    routes.MapRoute("areaRoute", "{area:exists}/{controller=Admin}/{action=Index}/{id?}");

    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

Then make a folder named Areas in the app root and make another named Admin inside the former, also make these folders inside Admin (ViewComponent is optional):

enter image description here

Now we create a controller inside the Controllers folder named AdminController, the content can be like:

[Area("Admin")]
[Route("admin")]
public class AdminController : Controller
{
    public AdminController()
    {
        // do stuff
    }

    public IActionResult Index()
    {
        return View();
    }

    [Route("[action]/{page:int?}")]
    public IActionResult Orders()
    {
        return View();
    }

    [Route("[action]")]
    public IActionResult Shop()
    {
        return View();
    }
    
    [Route("[action]/newest")]
    public IActionResult Payments()
    {
        return View();
    }
}

Now in order for that to work, you’ll need to create Views for all actions that return one. The hierarchy for views is just like what you have in a non-area Views folder:

enter image description here

Now, you should be good to go!

Question:
What if I want to have another controller inside my Area?

Answer:

Just add another controller beside AdminController and make sure the routes are like the following:

[Area("Admin")]
[Route("admin/[controller]")]
public class ProductsController : Controller
{
    public ProductsController()
    {
        //
    }

    [Route("{page:int?}")]
    public IActionResult Index()
    {
        return View();
    }
}

The important part is [Route("admin/[controller]")]. With that you can keep the style of routing to admin/controller/action/...

Leave a Comment