Post
Ask Question

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

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.

    mvc web application
                                                                            Image 1.

    internet application
                                                                            Image 2.

    layout
                                                                       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.

    add view
                                                                               Image 4.

    view name
                                                                   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.

    type view name
                                                                Image 6.

  • Now decorate your _Layout.cshtml like the following:

    Layout cshtml
                                                                            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.

    cs code
                                                                      Image 8.

  • Now run your application.

    Run your application
                                                                               Image 9.


Similar Articles