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

Rahul Saxena
9y
137k
0
8

Article

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.

Up Next

Ebook Download

View all

ASP.NET MVC 5 Recipes: A Practical Solution

Read by 9.3k people

Download Now!

Learn

View all