Master Page & ViewStart in ASP.Net MVC 4
In this
blog, I am going to tell you how to create a master page or layout page and how
to use the master page in other views as well as view start in asp.net mvc 4
Step 1
First create
an empty asp.net mvc 4 application and add a folder named “Shared” in the View
folder and add a view named “_LayoutView” in the Shared folder and write the
following code in it.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Layout View</title>
</head>
<body>
<div>
<div id="HeaderContainer" style="width:100%;font-size:25px;padding:10px;">
<div style="width:25%;display:inline;">
@Html.ActionLink("Home", "Index","Home")
</div>
<div style="width:25%;display:inline">
@Html.ActionLink("Services", "Services", "Home")
</div>
<div style="width:25%;display:inline">
@Html.ActionLink("About Us", "AboutUs","Home")
</div>
<div style="width:25%;display:inline">
@Html.ActionLink("Contact Us", "ContactUs","Home")
</div>
</div>
<div id="BodyContainer" style="width:100%;height:300px;">
@RenderBody()
</div>
<div id="FootContainer" style="width:100%;height:100px;">
<p>Copyright :
SUMITKESARWANI.BLOGSPOT.IN</p>
</div>
</div>
</body>
</html>
This view
will behave as master page or layout page for this project.
Step 2
Now add a
controller named “HomeController” and write the below code in it:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MasterPageMvcApp.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult Services()
{
return View();
}
public ActionResult AboutUs()
{
return View();
}
public ActionResult ContactUs()
{
return View();
}
}
}
Step 3
Now add a
view named “Index” like this:
Select
checkbox of master page and click on browse:
Select the
_LayoutView and click on ok.
@{
ViewBag.Title =
"Index";
Layout = "~/Views/Shared/_LayoutView.cshtml";
}
<h2>Home</h2>
Now add the
view for Services, About Us and Contact Us like above.
Step 4
Now run the
application
Click on
Services:
To add the
master page in each view, we have added the Layout Property on the top of the view and set the
path of the master page.
@{
Layout = "~/Views/Shared/_LayoutView.cshtml";
}
Now suppose
we have 50 views in a project then we have to set the layout property in each
view.
In future, if
you change the master page name or location then you has to make the changes in
each view in the project, this will be very tidy and time taken process.
To avoid
this tidy process, you can use the ViewStart view.
ViewStart
ViewStart
is the view which is applied to all other views automatically. We set the
layout property in the ViewStart view and the layout property will be added to
all other views automatically.
ViewStart
view will rendered first from all the other views.
If you want
to update the master page name or location, then you can simply change it in
the ViewStart view and it will update it in all the other views.
Now in the
above project, delete the layout property from all the views:
Layout = "~/Views/Shared/_LayoutView.cshtml"; //
delete it from all the views
And add a view named “_ViewStart” in
the view folder and add the layout property like this:
@{
Layout = "~/Views/Shared/_LayoutView.cshtml";
}
Your Solution Explorer will look like this:
Now run the application:
You can see that the master page is rendered from the
ViewStart view.
Thank you for reading this article, please
put your valuable comment or any suggestion/question in the comment box.
No comments:
Post a Comment