How to use an Area in ASP.NET Core

Question

How do I use an Area in ASP.NET Core?

I have an app that needs an Admin section. This section requires its Views to be placed in that area. All requests that start with Admin/ will need to be redirected to that area.

Answer 1

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):

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:

Now, you should be good to go!

Question: What if I what 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/...

Answer 2

Use this pattern in Configure method in Startup.Cs, as its full routing manner:

app.UseMvc(routes =>{

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

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

In Core 3.1 you should use below code in ConfigureServices method:

services.AddMvc(option => option.EnableEndpointRouting = false);