ASP.Net MVC tutorial for creating AREAS as separate project

Applications designed using the MVC Pattern separate the Model from Presentation and Business Layer. ASP.Net makes this logical separation to be implemented physically by creating folder structures in project as Models, Controllers and Views…

Introduction

Applications designed using the MVC Pattern separate the Model from Presentation and Business Layer. ASP.Net makes this logical separation to be implemented physically by creating folder structures in project as Models, Controllers and Views.

An application many times contains large number of Controllers and Views, which makes it difficult to search and manage files. ASP.Net MVC provides a way to separate large applications into smaller units or functional grouping using Areas. An Area itself contains a MVC folder structure for adding controllers, models and views.

For example, a website can contain two modules such as Blogs and Forum apart from the main site. The Blog and Forum modules can be created as two separate Areas within the same application. Thus enabling separation and grouping of functionalities within the Area.

The complexity doesn’t stop here. At times we would require such separation in assembly level by having separate DLL for each Area, so that any changes can be done separately and deployed without the need for full site publish. Or we might want to add a new module to an existing MVC site which was deployed a year ago and we do not want to disturb the existing build.

In such cases we could create a separate project for an Area and deploy it. Thus using the existing authentication, authorization and resources of the main site.

Steps for creating a separate project for an AREA in ASP.Net MVC

1. Right click on the project solution and add a new web application.
2. Select “Empty” template for the new project and select “MVC” for core reference
   
3. Click OK to add the project into the solution
4. Remove the folders and files which are marked in yellow from the project.
   
5. Comment / remove all the elements inside the “Configuration” element in web.config
6. Add a new class file to the project and name it as “BlogAreaRegistration”
7. Rename the namespace of the file to Main site namespace.
8. Inherit the “AreaRegistration” base class from “System.Web.MVC” and implement the methods.
   
9. Right click and Edit the project properties, and navigate to “Build” Tab. Below two steps are optional and can be done manually.
10. In the “Output” section, map the output path to the main site bin folder. This will place the DLL in the bin folder.
    
11. Navigate to “Build Events” Tab, and paste the following script in “Post-build event command line”. This would copy the required “Views” and place it under Main Site Area folder.
    
12. Add a new controller into Controller Folder and name it as “Home”.
13. Add a “View” to the default Index action.
    
14. All set, now rebuild the project. On completion, you will be able to find the “Blog.dll” in the main project bin folder, and “Views” inside the main project Area folder.
15. Run the main application and type in “blog” to navigate to blog module.
    

Using this approach, we have created a separate Area for “Blog” and plugged it in to the main site. You will also notice that Master Page / Layout page and other resources of the main website are been reused without duplicating, thus maintaining the look and feel of the site. Use this approach to modularise your code while making is relatively easier to maintain and enhance in the future.