Sometimes, when working with larger web applications, it can be interesting to logically separate them into smaller functional units. Each unit can then have its own controllers, views, and models, which makes it easier to understand, manage, evolve, and maintain them over time.

ASP.NET Core 3 provides some simple mechanisms based on the folder's structure for dividing web applications into multiple functional units, also called Areas; for example, to separate the standard Area from the more advanced administration Area within your applications. The standard Area could even enable anonymous access on some pages while asking for authentication and authorization on others, whereas the administration Area would always require authentication and authorization on all pages.

The following conventions and restrictions apply to Areas:

• An Area is a subdirectory in the Areas folder.
• An Area contains at least two subfolders: Controllers and Views.
• An Area may contain specific layout pages, as well as dedicated _ViewImport.cshtml and _ViewStart.cshtml files.

• You have to register a specific route that enables Areas within its routing definition to be able to use Areas in your applications.
• It is recommended to use the following format for Area URLs:
  http://<Host>/<AreaName>/<ControllerName>/<ActionName>.
• The asp-area Tag Helper can be used for appending an Area to a URL.

Let's look at how to create a specific administration Area for account management:

1. Open the Solution Explorer and create a new folder called Areas. Right-click on the folder, select Add | Area..., enter Account as the Area name, and click on the Add button: 

2. Scaffolding will create a dedicated folder structure for the Account Area, as follows:

3. Add a new route for Areas to the UseEndpoints declaration within the Configure method of the Startup class:  

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "
                    {controller=Home}/{action=Index}/{id?}");
                endpoints.MapRazorPages();
                endpoints.MapAreaControllerRoute(
                    name: "areas",
                    areaName: "Account",
                    pattern : "
                    {area:exists}/{controller=Home}
                    /{action=Index}/{id?}"
                    ); 
            });

4. Right-click on the Controllers folder within the Account Area and add a new controller called HomeController: 

[Area("Account")]
    public class HomeController : Controller
    {
        private IUserService _userService;
        public HomeController(IUserService userService)
        {
            _userService = userService;
        }
        public async Task<IActionResult> Index()
        {
            var email = HttpContext.Session.GetString("email");
            var user = await _userService.GetUserByEmail(email);
            return View(user);
        }
    }

5. Add a new folder called Home in the Account/Views folder. Then, add a view called Index in this new folder: 

@model TicTacToe.Models.UserModel
<h3>Account Details</h3>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="well well-sm">
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <Gravatar email="@Model.Email"></Gravatar>
                    </div>
                    <div class="col-sm-6 col-md-8">
                        <h4>@($"{Model.FirstName}
                         {Model.LastName}")</h4>
                        <p>
                            <i class="glyphicon glyphicon
                            -envelope"></i>&nbsp;
                            <a href="mailto:@Model.Email">@Model.
                             Email</a>
                        </p>
                        <p>
                            <i class="glyphicon glyphicon
                             -calendar">
                            </i>&nbsp;@Model.EmailConfirmationDate
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

6. Update the account partial view and add a link to display the preceding view (just after the existing log off link): 

<a class="btn btn-default btn-block" asp-action="Index"
asp-controller="Account">View Details</a>

7. Start the application, register a user, and call the new Area by clicking on the View Details link on the dropdown:

We will stop the implementation of the administration Area here and come back to it in Chapter 10, Securing ASP.NET Core 3 Applications, where you will learn how to secure access to it. For now, let's get a bit more advanced by looking at an exciting feature called the view engine. The more advanced we get, the more complex our codebase will become, and one of the best ways to ensure that we always get the intended functionality is to write unit tests and integration tests. We'll introduce these in the next section as well.