How to implement MVC master page and nested master pages

In this article I am going to teach the development of nested MVC master pages and the usage of section for dynamic locations in MVC Razor view. Appropriate usage of these two features can buy you a lot of time and increase the maintainability of your codes.

What is master page?

Master page was first introduced in ASP.NET. Master page is the container for a dynamic content. Dynamic web pages have usually common parts where the menus, logo, footer and etc. are located. These parts are repeated in all the web pages of a website and in ASP.NET it's known as master page. Master page is equal to the template in other languages.

Master page in ASP.NET MVC

In MVC master pages are known as layout. Setting master page for a VIEW is as easy as setting the Layout variable. In the next sections I explain implementation of complex scenarios involving MVC master page.

MVC nested master pages

Nested master pages have two or more layouts. To clarify the concept, look at the figure 1:

MVC master page

Figure 1

As you can see the “Body” or the view’s content is rendered in the second or child's master page. This is almost always true i.e. your view’s layout should be set to the last master page in the loop.

In a MVC razor view, a line like this does the job:

Layout = "~/Views/Shared/_ChildLayout.cshtml";

The _ChildLayout.cshtml has also a master page. Setting the master page for the child master pages is the same i.e. you set the Layout variable in the _ChildLayout.cshtml file: 

Layout = "~/Views/Shared/_ParentLayout.cshtml";

An important point to notice in construction of nested master pages in MVC is to set Layout variable of Layout’s pieces like SideBar or Header to null – if you are rendering them using MVC partials and they are not explicitly in your MVC layout – unless you want recursive calls on layouts and the following IIS crash.

Even in basic forms of MVC I prefer to use nested layouts because it increases maintainability and the development speed. This is especially true for Create and Edit forms where Create and Edit have a lot of resemblances and basically have the same master page.

Section in MVC Razor view

Sections in ASP.NET MVC is one of the elements to add dynamic contents to a template. If you are an ASP.NET MVC developer you may have seen the usage of Section such as referencing js and css files. This is not the only usage of Section! One of the nice usages of Section though is dynamic rendering of layout’s pieces. For example consider you want to show banners in Parent Master Page’s header. These banners are displayed based on the page. For example the Portfolio page has a different banner than the Services page. The first step to achieve this goal is to define a section in the Parent MVC Master Page’s layout:

@RenderSection("Banner", false)

 

The first parameter is the name of the section and the second parameter declares “required” state of the section. We made it false because we want to have pages without any banner at all.

After defining the section you can render the page’s banner content with at least two solutions depending on your specific needs. For example if you have 4 child layout and you want to render Banner based on the layout you render the banner in the layout.  If you want to set banner for each page (each controller’s action) you can render the section in the Action’s View. Displaying the content of Banner section is like this:

@section Banner{

         @Html.Partial("_Banner ")

}

 

 

Or

   

    //MVC master page
   @section Banner{
        @Html.Partial("_Banner ")
    }
    <div class="Banner">
        <div class="row">
          <img class="londonZoom" src="/~/img/map-london-zoom.png" />
        </div>
    </div>

 

 

 

I deliberately used MVC Html.Partial first because it is a better solution. If you need some Data (from database) you can use Html.Action but don’t forget to set _Banner’s Layout variable to null.

In some cases you may want to have a default banner and use that default banner if the MVC view is not setting a banner. To achieve this you can use this piece of code in your Parent Master page’s layout:

 
@if (IsSectionDefined("Banner ")) {

    @RenderSection("Banner")

}

else {

    <div>Default content</div>

}
 

 

 
Read 2552 times Last modified on Saturday, 08 August 2015 08:08
Rate this item
0
(0 votes)
More in this category: Asp.net mvc validation »
About Author
Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Advanced Programming Concepts
News Letter

Subscribe our Email News Letter to get Instant Update at anytime