Working with Area in ASP.NET MVC application

Introduction: We have know that the MVC is three separated words that are models,views,controllers. Models provide the business logic of your application. Views provide the Graphical user interface of your application. Controllers is handle all models and views requested. This is a simple application that provides help on how to add more then one area of your application. ASP.NET MVC makes use of interfaces, abstract classes, virtual methods. If you are not well-versed with these object-oriented concepts then the framework might not be very friendly for you.

The MVC pattern separates the model  logic of an application from its presentation logic and business logic. In ASP.NET MVC  logical separation is also implemented physically in the project structure where controllers and views are kept in folders that use naming conventions to define relationship. This structure supports the needs of most Web applications. Areas provide a way to separate a large MVC Web application into smaller functional groupings. An area is effectively an MVC structure inside an application. An application could contain several MVC structures.  

Step1: Open Visual Studio 2010.

• Go to file -> New->Projects
• Create an ASP.NET MVC 2 Web Application
• Name it as "manish application"

Step2: Add first area in your application.

• Right click on "Solution Explorer"->add->area
• Area name is "manish"

Step3: Add a second area in your application.

• Right click on "Solution Explorer"->add->area
• Area name is "sandeep"

Step4: Add a controller in the manish area folder..

• Click on manish area folder
• Right Click on controllers->add->controller
• The controller name is "manish"

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
namespace ManishApplication1.Areas.manish.Controllers
{
    public class manishController : Controller
    {
        //
        // GET: /manish/manish/
        public ActionResult ShowNewData()
        {
            return View();
        }
        public ActionResult ShowCombination()
        {
            return View();
        }
    }
}

Step5: Add a controller in the sandeep area folder.

• Click on the sandeep area folder
• Right Click on controllers->add->controller
• The controller name is "sandeep"

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
namespace ManishApplication1.Areas.sandeep.Controllers
{
    public class sandeepController : Controller
    {
        //
        // GET: /sandeep/sandeep/
        public ActionResult AddData()
        {
            return View();
        }
        public ActionResult EditData()
        {
            return View();
        }
    }
}

Step5: Add a view in manish area folder.

• First view name is "ShowNewData"
• Second view name is"ShowCombination"

Code1:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
       ShowNewData
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2 style="background-color: #66CCFF">ShowNewData</h2>
    <p style="background-color: #008000"><%= Html.ActionLink("ShowCombination", "ShowCombination")%></p>
</asp:Content>

Code2:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
       ShowCombination
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2 style="background-color: #00FF00">ShowCombination</h2>
    <p style="background-color: #C0C0C0"><%= Html.ActionLink("ShowNewData","ShowNewData")%></p>
</asp:Content>

Step6: Add a view in sandeep area folder.

• First view name is "AddData"
• Second view name is"EditData"

Code1:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
       AddData
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2 style="background-color: #99CCFF">AddData</h2>
     <p style="background-color: #CC6699"><%= Html.ActionLink("EditData", "EditData")%></p>
</asp:Content>

Code2:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
       EditData
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2 style="background-color: #00FFFF">EditData</h2>
     <p style="background-color: #008080"><%= Html.ActionLink("AddData", "AddData")%></p>
</asp:Content>

 Step7: Open the master page in your application.

• View->shared->site.master
• Set the some display setting in your application

Code:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>Manish mvc application</h1>
            </div>
            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>
            <div id="menucontainer">
               <ul id="menu">             
    <li><%= Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)%></li>
    <li><%= Html.ActionLink("manish", "ShowNewData", "manish", new { area = "manish" }, null)%></li>
    <li><%= Html.ActionLink("sandeep", "AddData", "sandeep", new { area = "sandeep" }, null)%></li>
    <li><%= Html.ActionLink("About", "About", "Home", new { area = "" }, null)%></li>
</u>
            </div>
        </div>
        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            <div id="footer" style="background-color: #FF8080">
            </div>
        </div>
    </div>
</body>
</html>

Step8: The complete application is given below.

Step9: Press crtl+f5 and run your application.

Output: