All of us are very aware about Master Page in asp.net
application. What is master page? Why we need Master page in our application?
How we can create master page in ASP.NET MVC application?
What is Master Page?
Master pages allow you to create a consistent look and behavior for all
the pages (or group of pages) in your web application.
A master page provides a template for other pages, with shared layout and
functionality. The master page defines placeholders for the content, which can
be overridden by content pages. The output result is a combination of the
master page and the content page.
The content pages contain the content you want to display.
Now we will learn how we can do this in asp.net MVC application.
Open visual studio -> New project Select ASP.NET MVC Application.
Image 1.
Image 2.
Image 3.
Here in ASP.NET MVC application _Layout.cshtml inside Views->Shared
folder works as a Master Page.
Now we will add 2 partial views (Like as User Control in ASP.NET
application) Header and Footer and we will add these two on _Layout.cshtml
page.
Right Click on Shared Folder->Add -> View
Image 4.
Image 5.
Here in _Header.cshtml write your text or add Site logo. whatever look you
want to give to your header do it here.
Now again right click on Shared Folder -> Add-> View.
Image 6.
Now decorate your _Layout.cshtml like below:
Image 7.
Code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
@Html.Partial("_Header")
</div>
</header>
<div id="body">
<section class="content-wrapper
main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
@Html.Partial("_Footer")
</div>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts",
required: false)
</body>
</html>
Now while adding a View by right clicking on Action
Method Name Select your Layout or master page like below.
Image 8.
Now Run your application.
Image 9.