Working with Areas in MVC Application


In this article we are going to focus on the following topics related to AREAS in MVC application.
1. Significance of AREA in MVC
2. Creating an AREA in an MVC project
3. Significance of AdminAreaRegistration class
4. Populating the AREA


In this article we are going to focus on the following topics related to AREAS in MVC application.

1. Significance of AREA in MVC
2. Creating an AREA in an MVC project
3. Significance of AdminAreaRegistration class
4. Populating the AREA

Significance of AREA in MVC
1. To organize a Web Application into areas where each area represents some kind of functionality segment such as functionality related to Admin or functionality related to Staff or Billing Department
2. It is useful in large projects where you have much functionality to handle and having single set of folder for all the controllers, Views, Models might be difficult to manage.
3. It allows you to separate each functionality using the folder structure.
4. This helps multiple developers to work on same project but different functionalities without colliding.
5. They are supported mostly through Routing System.

Creating an AREA in MVC
Step 1
Launch Visual Studio 2013 -> File -> New Project -> select ASP.NET MVC 4 Web Application template -> Name it as "MVCAreaDemo" -> Click OK
Step 2
Select Basic Template as the Project Template -> uncheck "Create a unit test project" option -> Click on OK
Step 3
Select the MVC project in the solution explorer -> Right click the project -> Add -> Area... -> Name the area "Admin".
mvc area
Step 4
In the previous step we have created an Area called as "Admin" which will contain the administration related functionality.

Now, A folder called as Areas is created in the project. Areas folder in turn contains a folder called Admin, which represents the area that we created in the previous step.
AreasFolder
If we create additional areas, other folders would be created here for each area.

Inside the Areas/Admin folder, There are folders called Controllers, Models, and Views and a file called "AdminAreaRegistration.cs" which defines the AdminAreaRegistration class. The Views folder contains a Shared folder and a Web.config file that configures the view engine.

Significance of AdminAreaRegistration class
1. The AdminAreaRegistration class contains the RegisterArea method.
2. This RegisterArea method is automatically called by the Application_Start method of the Global.asax file using the below statement
AreaRegistration.RegisterAllAreas();
When the static AreaRegistration.RegisterAllAreas() method is invoked, The MVC Framework goes through all of the classes in the MVC application and finds those classes that are derived from the AreaRegistration class and then calls the RegisterArea method on each of those classes.
3. RegisterArea method registers a route with the URL pattern Admin/{controller}/{action}/{id}.
4. We can also write additional routes in this RegisterArea method, which will be unique to this area.
5. The RegisterArea method takes a parameter of type AreaRegistrationContext. this class exposes a collection of MapRoute methods, which the area uses to register routes

Populating the AREA

Creating controller in Admin Area
1. Right-click the Controllers folder within the Admin area
2. Select Add -> Controller
3. The Add Controller window will be displayed, Here we can enter the name
for the new controller class as "Home". Click Add -> This creates an empty controller with the name HomeController.
Admin Controller
Creating View in Admin Area
1. Open the HomeController class we have created in the previous step.
2. Right Click the Index method -> choose Add View.
3. Keep the View Name as it is ("Index") -> Click on Add. This view will be created in the "Areas/Admin/Views/Home" folder.
Index View
controllerviewadmin
4. Copy the code shown below in the Index.cshtml file


@{
ViewBag.Title = "Admin Index Title";
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h2>Admin Area Index View</h2>
</div>
</body>
</html>


Now build the project and navigate to "http://localhost:1455/Admin/Home/Index".
Please note that the port no may vary based on the port on which the MVC application is hosted.
You will see the output as shown below:
Area output


Article by Vaishali Jain
Miss. Jain Microsoft Certified Technology Specialist in .Net(Windows and Web Based application development)

Follow Vaishali Jain or read 127 articles authored by Vaishali Jain

Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: