Working With Areas In MVC

The primary purpose of areas in MVC is to separate and manage Model, View, Controller, Themes and routing registration file into separate sections. In other words, areas serve as a technique for dividing and managing a large Application into well managed smaller modules with the separate M-V-C in each module.

Why to use areas in MVC Application

If you are building a CRM Application for a small Educational Consultancy with multiple business units such as Registration on Arrival, Information Gathering by Receptionist, Updates by Consular, Documentation Management, Interview Preparation, Billing, and Report Generation by different departments etc. Each of these units have their own logical components views, controllers and models. In this scenario, you can use ASP.NET MVC areas to physically partition the business components in the same project.

It is also possible that we can have large projects that uses MVC, then we need to split the Application into smaller units called areas that isolates the larger MVC Application into smaller functional groupings. A MVC Application can contain several MVC structures (areas).

Areas are the small functional units with its own set of Model, View and Controller

  • MVC Application can have any number of areas.
  • Each area has its own controllers, models and views.
  • Areas are put under separate folders called areas.

Today, we will be creating a new ASP.NET MVC Application and define a new area inside the project.

Creating new MVC Application

Step 1 

Open Visual Studio 2015 (preferred).

Step 2 

Create an ASP.NET Web Application with MVC template, as shown below.

New ASP.NET Web Application Select a template: ASP.NET 4.5.2 Templates EasyCRM.UI Empty Azure API App Web Forms Azure Mobile Service Web API Single Page Application Add folders and core references for: Web Forms WC Web API Add unit tests Test project name: CRM.UI.Tests A project template for creating ASP.NET MVC applications. ASP.NET MVC allows you to build applications using the Model-View-ControIIer architecture. ASP .NET MVC includes many features that enable fast, test-driven development for creating applications that use the latest standards. Learn more Change Authenticatio Authentication: Individual User Accounts Microsoft Azure @ Host in the cloud App Service Cancel

Step 3

In Solution Explorer, right-click on the project and click Add. Select areas to add an area.

Area... New Item.. Existing Item... New Scaffolded Item... New Folder Add ASP.NET Folder REST API Client... New Azure WebJob Project Existing Project as Azure WebJob Reference... Service Reference... Connected Service... Analyzer... TypeScript File TypeScript JSX File HTML Page JavaScript File Style Sheet Web Form MVC 5 Partial Page (Razor) MVC 5 Layout Page (Razor) Class... Ctrl+Shift+A Shift+AIt+A Nishan Kumar Aryal • guild Rebuild Clean View Analyze Publish... Configure Azure AD Authentication... Add Application Insights Telemetry... Scope to This New Solution Explorer View Show o ode Map Add Manage uGet Packages... Set as StartUp Project Solution Explorer Search Solution Explorer (Ctrl+,•) Solution 'EasyCRM' oject) EasyCRM.Ul 4 Properties • References Ap p_Data Ap p_Start Areas Content Controllers fonts Models Scripts Views favicon.ico Global.asax packages.config Project_Readme.htmI Startup.cs C" Web.config

Step 4

Enter the name for the area, such as "Consular" or “SuperAdmin”.

Adding Controller for Area

Now, let’s add a controller in Area.

Step 1

Right-click on the Controller in your article area to add a controller.

 

Step 2

Select "MVC 5 Empty Controller.


Step 3

Provide controller name as "ManageInterviewController”.

Now, your Area folder should look, as shown below.

Adding Views for Area

We have successfully added a controller for our area. Now, let’s add a view for the area.

Step 1

Right-click on the "Index" method of ManageInterviewConsular Controller and click on Add View.

Step 2

Enter the view name and select Layout page.Add View View name: Template: Model class: Data context class: Options: Index Empty (without model) [3 Create as a partial view Reference script libraries Use a layout page: —'Views/Shared/ Layout.cshtml (Leave empty if it is set in a Razor viewsta Select Template. (For Now: Empty) Select Layout Page Cancel

Step 3

Generate some content in the View of Index method, as shown below.

"ViewBag.

Index g (table table-hover table-bordered table-responsive" >Time< /tr>Kathmandu< /tr> " "picture_x0020_6"="">
 
Area Registration

Step 1

Open the "Global.asax" file.

Step 2

Add the code given below in your Application_Start() method.

AreaRegistration.RegisterAllAreas();

Till here, we have successfully added an area. Inside Area is the one, where we have added aController and a View for Index method.

Now, let’s add a link in Navbar of an Application to navigate to the view, which we created just now.

Step 1

Open the project view Layout file.

Step 2

Modify the <ul> </ul> in the layout file, as shown in the code given below.

Step 3

Debug the Application and open List Interview link, as shown below.

Let’s notice the URL

As highlighted, to invoke the controller of the area, we need to use

Baseurl/Areaname/Controller/{actionname}

Summary

This blog will help you to divide a large Application into smaller modules with its own Model, View and Controller, Themes and web.config.