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: