One of ASP.net MVC's lovely features is Area, which lets you arrange related functionality together. For the functional or business component's physical grouping, we can establish a hierarchy. Stated differently, an area is a smaller functional unit that possesses a unique collection of controllers, views, and models. One or more areas may be present in ASP.net MVC applications. Therefore, we can use Areas to break up our large application into more manageable functional groups. The MVC framework employs naming conventions to establish relationships between the logical components, which include the Model, View, and Controller. These components are stored in distinct directories.
Controllers and Views are used to arrange everything in MVC applications. Typically, the first part of our URL is determined by the controller name, and the second part is the action name. Rendering views by default have the same name as the action method. Area creation in older ASp.net MVC applications is quite simple. Defaul offers the ability to create an area by selecting "Add >> Area" with a right-click on the project. The template automatically creates the area folder and its contents.
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.