MVC Areas: Organizing an Application using Areas

Introduction

MVC architecture is inherently separated into three separate layers like Model (database), Presentation (UI, View), and Controller (Business layer). Releasing of MVC 2 introduces new feature of Area which provide solid capability to further separate files of file structure. Using with Area, we can define same controller in different areas to make our application more modular, manageable and robust. In this demonstration, I have used two areas Main (Public website) and blog area. In my earlier article, how to stop cross-site request forgery. I am explaining all steps how to organizing an application using areas in MVC.

Several distinct layers are fundamental to MVC architectural design: the Framework (database), the interface (UI, View), and the Controller. (Business layer). The forthcoming version of MVC 2 carries alongside it an additional feature named Area, that provides strong file isolation characteristics. In order to make our program more modular, achievable, and adaptable, we can employ Area to indicate the same controller across multiple regions. I have employed the Main (public website) and Blog sections in this demonstration. I explained how to safeguard against counterfeiting cross-site requests in the previous article. I will attempt to guide you through every phase of using.

MVC sections for arranging a software application.

The concepts of Sections in ASP.NET MVC delivers an effective resolution for the problem at hand. Publishers may separate a software program into simpler to manage, divided parts by employing areas. Within the primary program, each Area operates almost identically to a miniature MVC project. This modularity approach has an assortment of benefits, such as:

1. Division of Issues: 

The procedure is separated into sections to avoid adjustments from accidentally impacting

other parts. It is achievable, for example, to differentiate managerial duties from user-facing elements.

2. Greater Dependability: 

Understanding a code base is rendered easier provided it contains an apparent hierarchy.

Developers can identify and modify content relating to a specific functionality with ease.

3. Greater Scalability: 

New features can be introduced to the deployment as it develops without considerably

altering the present configuration. It makes it feasible to implement dynamic modifications to the software.

4. Greater Collaboration: 

Programming organizations may operate independently on multiple projects in a

cooperative context, even when they are treading on other individual's toes. By focusing on specific domains, each team may improve efficiency and minimize disputes after unification.

5. Clear Routing: 

URL administration has been significantly enhanced through enabling every part to be granted a

distinctive set of routes. This contributes to the setting up of tidy, clearly readable URLs, thereby improving customer service in general.

Why We Need MVC Areas

When we need multiple departments to maintain with different controllers even having with the same name in different areas. It makes our application more manageable, easy and maintainable to make our development faster.

Create a New MVC Project

First of all, create a new fresh project of MVC

New Project Crated

New project created for playing MVC feature of Area.

Create a New Area

Let’s now start to create a new area. Right click on project then move to Add >>> Area then provide a new relevant name of area.

Creating Blog Area

Here typing relevant new area name like “Blog”.

Blog Area Created

Now you can see new created area “Blog” under the project.

Blog Area File Registration

You can see a new file crated of Blog Area Registration (BlogAreaRegistration.cs) under blog area.

public override string AreaName
{
    get
    {
 return "Blog";
    }
}

public override void RegisterArea(AreaRegistrationContext context)
{
    context.MapRoute("Blog_default",
        "Blog/{controller}/{action}/{id}",
 new { action = "Index", id = UrlParameter.Optional }
    );
}

Area Registration in Global.asax

Area registration is also done in Global.asax file.

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
    AreaRegistration.RegisterAllAreas();

        WebApiConfig.Register(GlobalConfiguration.Configuration);
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
    }
} 

Main Area Creation

Next one new main area is crating in this section.

Area Registration File Created
In the same way, as in blog area a registration file (MainAreaRegistration.cs) is also created.

public class MainAreaRegistration : AreaRegistration
{
 public override string AreaName
        {
        get
        {
            return "Main";
        }
    }

public override void RegisterArea(AreaRegistrationContext context)
    {
        context.MapRoute(
            "Main_default",
            "Main/{controller}/{action}/{id}",
            new { action = "Index", id = UrlParameter.Optional }
        );
    }

Create Home Controller for Main Area

Creating home controller under main area.

Create Home Controller For Blog

Alike main area, Home controller is also creating under blog area. Area feature let allow us to create same controller name to make our development more lucrative.

Create View for Both Home controllers of Main & Blog

Here is creating view for Blog and main area.

@{
ViewBag.Title = "Index";
}
<h2>Welcome to Blog Area</h2>
<div> @Html.ActionLink("Back to Main", "Index", "Home", new { area = "Main" }, new { }) </div>
 Main Area View
@{ ViewBag.Title = "Index"; }
<h2>Welcome to Main Area</h2>
<div>
    @Html.ActionLink("Go to Blog", "Index", "Home", new { area = "Blog" }, new { })
</div>

Set Default Area/Controller/Action

Here, you can set your default area, controller and method to launch your application (landing page of your application). Before to set, you need to right click on project and click on properties to navigate on Web tab to set application default page (Area/controller/action).

or Alternatively can set in RouteConfig.cs

Routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
                namespaces: new[] { "slnMvcArea.Areas.Main.Controllers" }
            ).DataTokens.Add("area","Main");

Now Run your MVC area application

Finally run your MVC app to see how works MVC area feature.

Navigate to Blog Area

Click on “Go to Blog” to navigate blog area.

Now you are on blog area, here is also a link to navigate “Back to Main”.

Conclusion

The users can additionally break our MVC applications into distinct spreadsheets using MVC regions, thereby rendering simpler to handle administration. In each area, equivalent controllers could be identified. As an example, the main area could utilize the controller called "Home" while additional spots might use an identical title. If the controller titles differ in each region, the software will still generate appropriately. It will thereby assist programmers by establishing a vast array of distinct applications with numerous divisions for the purpose to create exceptional MVC programs with area characteristics. We made an effort to walk you through each step required to organize a mobile application using MVC app components in this article.

Video: This video also demonstrates about Organizing an Application using Areas.

Download Complete Project (visual studio source files)

Suggested Reading

• ASP.Net MVC Page Life Cycle For Free
• Validation failed for one or more entities
• System Data Entity Infrastructure DbUpdateException
• An expression tree may not contain a dynamic operation