Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Design a Master Page with Header Footer and Body in MVC Application

Article:
Viewed:  5564 
Posted On:  20/12/2014 23:05:05 
How we can design a master page or layout in an ASP.NET MVC Application? How we can show our header and footer on a master page in an ASP.NET MVC application? 

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.

1.png

Image 1.

2.png

Image 2.

3.png

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

4.png

Image 4.

5.png

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.

6.png

Image 6.

Now decorate your _Layout.cshtml like below:

7.png

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.

 

8.png

 

Image 8.   

 

Now Run your application.

9.png

Image 9.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us