Please enable Javascript to correctly display the contents on Dot Net Tricks!

MVC Areas with example

 Print 
  Author : Shailendra Chauhan
Posted On : 01 Jan 2013
Total Views : 157,994   
Updated On : 26 Sep 2016
 

Areas was introduced in Asp.net MVC2 which allow us to organize models, views, and controllers into separate functional sections of the application, such as administration, billing, customer support, and so on. This is very helpful in a large web application, where all the controllers, views, and models have a single set of folders and that become difficult to manage.

Each MVC area has its own folder structure which allow us to keep separate controllers, views, and models. This also helps the multiple developers to work on the same web application without interfere to one another.

Registering Area

Before working with area, make sure you have registered your area with in the Application_Start method in Global.asax as shown below.

protected void Application_Start()
{
 //Register all application Areas
 AreaRegistration.RegisterAllAreas();
 
 WebApiConfig.Register(GlobalConfiguration.Configuration);
 FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
 RouteConfig.RegisterRoutes(RouteTable.Routes);
 BundleConfig.RegisterBundles(BundleTable.Bundles);

}

Note

Always remember the order of registering the Areas must be on top, so that all of the settings, filters and routes registered for the applications will also apply on the Areas.

Creating Area

To add an area to an MVC application, right-click on the project item with in the Solution Explorer window and select Add>Area option as shown below.

Now a new prompt will appear, with in give the name of the area like "Department" and click Add button. Now the new Department Area has been cretaed as shown in below fig.

Now you have seen DepartmentAreaRegistration class has been created and in the RegisterArea method, a route for the area has been defined as shown below.

using System.Web.Mvc;
namespace Mvc4Area.Areas.Department
{
 public class DepartmentAreaRegistration : AreaRegistration
 {
 public override string AreaName
 {
 get
 {
 return "Department";
 }
 }
 
 public override void RegisterArea(AreaRegistrationContext context)
 {
 context.MapRoute(
 "Department_default",
 "Department/{controller}/{action}/{id}",
 new { action = "Index", id = UrlParameter.Optional }
 );
 }
 }
}

Populating Area

Now you can create controllers, views, and models in the Department area like as below.

How to see view with in Areas

Now, let's see how to view your Index view with the help of Page Inspector as shown below.

What do you think?

I hope you have got what is Areas and how to use it with in the application. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS
24 SEP
Angular2 and Angular4 (Classroom)
08:30 AM-11:30 AM IST
23 SEP
MEAN Stack (Classroom)
8:30 Am To 11:30 Am
23 SEP
Microsoft Azure Infrastructure Solutions (Online)
08:00 PM-11:00 PM IST / 9:30 AM-12:30 PM CST
20 SEP
MEAN Stack (Online)
07:00 AM-09:00 AM IST
20 SEP
ASP.NET MVC with Angular4 (Online)
9:00PM- 11:00PM IST(+5:30GMT)
16 SEP
Angular2 and Angular4 (Online)
08:00 AM-10:00 AM IST(+5.30 GMT)
7 SEP
ASP.NET MVC with Angular4 (Online)
09:00 PM to 11:00 PM IST (+5:30 GMT)
22 AUG
ASP.NET Core with Angular4 (Online)
07:00 AM - 9:00 AM IST(+5:30 GMT)
19 AUG
MEAN Stack 2 (Online)
5:30 Pm - 7:00 PM IST (+5:30 GMT)
19 AUG
ASP.NET MVC with Angular4 (Online)
10:30 Am to 12:30 PM IST (+ 5:30 GMT)
19 AUG
NodeJS with Angular4 (Classroom)
04:00 PM to 07:00 PM IST (+5:30 GMT)
12 AUG
ASP.NET MVC with Angular4 (Classroom)
11:30 AM - 1:30 PM IST (+5:30GMT)
15 JUL
ASP.NET MVC with Angular4 (Online)
03:30 PM - 05:30 PM IST(+5.30 GMT)
LIKE US ON FACEBOOK
 
+