Areas in MVC is a way to segregate or partite a large application into small business groups so that it may be easier to manage. In this article I will demonstrate about Area in MVC.
One of the reason for popularity of MVC design pattern is logical separation of Model, View and Controller. We can see this logical separation physically in project structure also. This structure is very helpful in maintaining project as we can separately put our views, controllers and models in their associated folders.But when we work in a large project where there is a possibility to have a large number of controllers and views then this structure looks like unmanageable. In this case we need something else. To accommodate such projects, we can use MVC feature to segregate Web application into smaller units that are referred to as areas.
Areas provide a way to separate a large MVC Web application into smaller groups so that it can be managed in a proper way.
We can create number of Areas we required in an application.
I think, this makes a clear picture about Area. Let's see how can we create and use Areas in our application with a small example.
Adding areas into project is very simple. Follow the below steps and you can add your area.
Right Click on project > Click Add > Area
A popup will open. Name your area and you can see in project structure under Areas folder.
I created two areas in my example- for Sale and Purchase. Once added area, you can see Area Registration for the same. In this class route will be defined automatically for that area. Below is the code for my Sale area I defined.
public override void RegisterArea(AreaRegistrationContext context)
{
context.MapRoute(
"Sale_default",
"Sale/{controller}/{action}/{id}",
new { action = "Index", id = UrlParameter.Optional }
);
}
Once you are done with area, you can find folders for Controller, Views and Model in your area with an AreaRegistration class which defines routing for your area. In my example as I said, I created two areas-Sales and Purchase just for better understanding and in both the areas I created an ExampleController, Model and related view. Let's see one by one. I will show for Sales area. Purchase area is same as Sales area.
In sales area I am creating a model class and naming it as SalesModel.cs. Below is the code for my model.
namespace DotNetConceptSampleAreaInMVCExample.Areas.Sale.Models
{
public class SalesModel
{
public int Id { get; set; }
public string ProductName { get; set; }
public string BatchName { get; set; }
public int Quantity { get; set; }
public double Price { get; set; }
}
}
Once I am done with my model, let's create a controller. I am naming it as ExampleController.cs and creating a list of model. Here is the code for the same.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DotNetConceptSampleAreaInMVCExample.Areas.Sale.Models;
namespace DotNetConceptSampleAreaInMVCExample.Areas.Sale.Controllers
{
public class ExampleController : Controller
{
public ActionResult Index()
{
var model = CreateModel();
return View(model);
}
List<SalesModel> CreateModel()
{
List<SalesModel> lst= new List<SalesModel>(){
new SalesModel{Id=1,ProductName="Laptop",BatchName="LAP001",Price=40000, Quantity=1},
new SalesModel{Id=2,ProductName="Laptop",BatchName="LAP002",Price=42000, Quantity=1},
new SalesModel{Id=3,ProductName="Laptop",BatchName="LAP003",Price=42500, Quantity=1},
new SalesModel{Id=4,ProductName="Desktop",BatchName="DES004",Price=36000, Quantity=2},
new SalesModel{Id=5,ProductName="Laptop",BatchName="LAP005",Price=40000, Quantity=1}
};
return lst;
}
}
}
After controller now it is time to create a view to show my content. Let's create a view. I am creating a grid to show the list I created in my controller above.
@model IEnumerable<DotNetConceptSampleAreaInMVCExample.Areas.Sale.Models.SalesModel>
@{
ViewBag.Title = "Sales";
}
<h2>Welcome to Sales:</h2>
<a href="~/Home/Index">Home</a> | <a href="~/Purchase/Example/Index">Click for Purchase</a>
<hr />
@{
var grid1 = new WebGrid(source: Model, ajaxUpdateContainerId: "divGrid");
<div id="divGrid">
@grid1.GetHtml(tableStyle:"webGrid",
columns:grid1.Columns(
grid1.Column("ID"),
grid1.Column("ProductName"),
grid1.Column("BatchName"),
grid1.Column("Price"),
grid1.Column("Quantity")))
</div>
}
I am almost done. Now to show navigation I am creating links for these areas in my main view.
<h2>Please click below for Area navigation:</h2>
<br />
<a href="~/Sale/Example/Index">Click for Sales</a> | <a href="~/Purchase/Example/Index">Click for Purchase</a>
<br />
And I am done. Output will be something like this.
Hope now you are clear on Areas. So try yourself and use in your code.