Introduction
This article explains Areas in the ASP. NET Web API. Areas are used for the management of the project. They are used in large projects. We create more than one area in a project. In this article you will see the creation of areas.
Create the Web API application first
- Start Visual Studio 2012 and select "New Project" from the Start Page.
- In the Template window, select "Installed template" -> "Visual C#" -> "Web".
- Choose "ASP. NET MVC 4 Web Application" then change its name.
- Click on the "OK" button.
![area.jpg]()
- From the MVC4 Project Window select Web API.
Add the "Area" to the project
- In the "Solution Explorer".
- Right-click on the Project.
- Select "Add"->"Area".
![area4.jpg]()
![area3.jpg]()
- Click on the "OK" button.
Here add a file "CollectAreaRegistration.cs". Its code looks as in the following:
using System.Web.Mvc;
namespace MvcApplication1.Areas.Collect
{
public class CollectAreaRegistration : AreaRegistration
{
public override string AreaName
{
get
{
return "Collect";
}
}
public override void RegisterArea(AreaRegistrationContext context)
{
context.MapRoute(
"Collect_default",
"Collect/{controller}/{action}/{id}",
new { action = "Index", id = UrlParameter.Optional }
);
}
}
}
There is a class "CollectAreaRegistration" and this class is inherited from the "AreaRegistration" class.
Here is an "AreaName" that returns the name of the area that was provided when the Area was added.
In the code above the "RegisterArea" method invokes the "Maproute" method for providing the new route to the Area "Collect".
Crreate a Controller
-
In the "Solution Explorer".
-
Select the "Area" folder then select "Controller".
-
Right-click on the controller then select "Add" -> "Controller".
-
Open a window, change the name to "HomeController" and Select "MVC controller with empty read/write actions" from the template.
-
Click on the "OK" button.
![area6.jpg]()
Create a "index.cshtml" file.
![area8.jpg]()
![area9.jpg]()
Now write this code in the "index.cshtml" file.
@{
ViewBag.Title = "Index";
}
<h2>Areas\Home\Index</h2>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Collect Area</title>
</head>
<body>
<h1>Collect Area</h1>
<div>
@*@RenderBody()*@
</div>
</body>
</html>
Perform some changes in the RouteConfig.cs file.
This file exists in "App_Start" -> "RouteConfig.cs", we add a namspace that is called the Maproute method that provides the new route to the Area. We pass the namespace "MVCApplication1.Controller" as a parameter. The entire code for the RouteConfig.cs file looks like this:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace MvcApplication1
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
namespaces: new[] { "MvcApplication1.Controllers" }
);
}
}
}
To execute the application, press F5.
![area1.jpg]()
Change the URL to something like http://localhost:11914/Collect/Home . The output looks as in the following:
![area2.jpg]()