Design a Master Page With Header, Footer and Body in MVC Application

Rahul Kumar Saxena

MVC ASP.NET MVC MVC Applicationaster Page

10 Comments

Join the conversation! Your thoughts help the community grow.

Priti Kumari11y ago
Rahul Saxena .I have one question....can we delete _layout.cshtml file and create new one with own layout.is it necessary to use layout of MVC?.and can we create a shared view for layout purpose?
- Phaneendra Chakravaram10y ago
  yes you can write shared view for layout purpose
Rahul Kumar Saxena11y ago
Welcome anil kumar
Rahul Kumar Saxena11y ago
Thanku Humayun Kabir Mamun...
- anil kumar11y ago
  Thank you very useful to me
Rahul Kumar Saxena11y ago
Thanku Manish Kumar Choudhary...
Humayun Kabir Mamun11y ago
Very Helpful @Rahul
Manish Kumar Choudhary11y ago
Nice one Rahul Saxena sir.
Vithal Wadje11y ago
nice explanation
- Rahul Kumar Saxena11y ago
  Thank u Vithal Wadje...

All of us are very aware of Master Pages in ASP.Net applications. What is a Master Page? Why do we need a Master Page in our application? How to create a Master Page in ASP.NET MVC applications?

Master Pages

Master Pages allow you to create a consistent look and behaviour 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 that 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 to do this in ASP.NET MVC applications.
Open Visual Studio and click on New Project then select ASP.NET MVC Application.

Image 1.

Image 2.

Image 3.
Here the ASP.NET MVC application's _Layout.cshtml is inside Views -> Shared folder. It works as the Master Page.
Now we will add 2 partial views (such as User Control in ASP.NET application), Header and Footer and we will add these two in the _Layout.cshtml page.
Right-click on the Shared Folder then select Add -> View.

Image 4.

Image 5.
Here in _Header.cshtml write your text or add the Site logo. Whatever look you want to give to your header do it here.
Now again right-click on the Shared Folder and select Add-> View.

Image 6.
Now decorate your _Layout.cshtml like the following:

Image 7.
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8" />
5. <title>@ViewBag.Title - My ASP.NET MVC Application</title>
6. <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
7. <meta name="viewport" content="width=device-width" />
8. @Styles.Render("~/Content/css")
9. @Scripts.Render("~/bundles/modernizr")
10. </head>
11. <body>
12. <header>
13. <div class="content-wrapper">
14. @Html.Partial("_Header")
15. </div>
16. </header>
17. <div id="body">
18. <section class="content-wrapper main-content clear-fix">
19. @RenderBody()
20. </section>
21. </div>
22. <footer>
23. <div class="content-wrapper">
24. <div class="float-left">
25. @Html.Partial("_Footer")
26. </div>
27. </div>
28. </footer>
29. @Scripts.Render("~/bundles/jquery")
30. @RenderSection("scripts", required: false)
31. </body>
32. </html>
Now add a View by right-clicking on the Action Method Name and select your Layout or Master Page like the following.

Image 8.
Now run your application.

Image 9.