Creating a Nested Master Page

Master pages are a very useful new feature of ASP.NET 2.0. If you want to create web pages that have a consistent look and feel, you can do so by using nested master pages. This article explains how to go about it.

Introduction

In a professionally created web site, web pages have a consistent look and feel displaying the graphics, controls, navigational features, and so on. Serving visually appealing rich content with consistent functionality whether it is for navigation or other usability features is a must for a satisfactory user experience. This has gone through an evolution of its own as mentioned in the previous tutorial on Master Pages, a new feature you find in ASP.NET 2.0.

The present tutorial builds on the previous one, but for reader experience it can be read independently. However, a reading of the previous tutorial would be very helpful. This tutorial takes two master pages and plugs them into a master; you may call it the top or the parent. Now each of these plugged-in master pages may show pages from their own module or compartment, sharing the parent for a higher level look and feel. These three may very well be appropriate for a corporation and two of its subsidiaries.

Before we look at the nested master pages, it may be instructive to look at a single master shown schematically in the next picture (taken from the previous tutorial). The content page and the master together are displayed when the content page is browsed. The content page is bare of HTML and other namespace references. The displayed page is therefore a merged page as far as displayed content goes.

{mospagebreak title=Nested Master Project}

The following picture shows the files in the NestedMaster project. If you associate this file structure with the schematic shown in the next sub-section you will immediately notice the way the aspx files will be displayed.

The next picture shows schematically the arrangement of the pages and the relationship between them in the context of how they get displayed. In the rest of the tutorial the code listing and the screen shots are related to the file structure and the schematic arrangement shown.

There is one master page, the top.master, which has some content of its own. This is displayed by the MPage.aspx.

Code for top.master

<%@ Master Language="VB" CodeFile="top.master.vb" Inherits="top" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Nested Master With Two Children</title>
</head>
<body>
    <form id="form1" runat="server">
    <h2 style="color:Maroon">Welcome to a Nested Master</h2>
    
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" 
                                runat="server">
           </asp:contentplaceholder>
    </div>
    <h4 style="font-style:italic; color:Maroon;"> 
This was designed by Jay Krishnaswamy </h4> </form> </body> </html>

Code for MPage.aspx

<%@ Page Language="VB" 
         AutoEventWireup="false" 
         CodeFile="Mpage.aspx.vb" 
         Inherits="Mpage" 
         MasterPageFile="~/top.master" %>


<asp:Content ID="content1" 
             ContentPlaceHolderID="ContentPlaceHolder1" 
             runat="server">
  <h3 style="color:Blue;"> Welcome to the Visual Basic .NET Tutorials 
</h3> </asp:Content>
MPage.aspx

{mospagebreak title=Embedded master pages}

In addition to the master page, there are two embedded master pages in the master, individually called FChild.master and SChild.master. The listing shown in the next section is for the FChild.master. Observe that the source of this page follows very nearly the same form as any other content page, but it has another ContentPlaceHolder of its own. The FChild.master cannot be displayed in the design view, as it is a kind of a virtual page.

Code for FChild.master

<%@ Master Language="VB"  
           MasterPageFile="~/top.master" 
           CodeFile="FChild.master.vb" 
           Inherits="FChild" %>
<asp:Content ID="Content2" 
             runat="server" 
             ContentPlaceHolderID="ContentPlaceHolder1">
        
   <h3 style="color:Navy">Master's First Child </h3>
      
       <asp:ContentPlaceHolder ID="Content1" runat="server" />
        
    <h4 style="font-style:italic; color:Navy;">First Child 

Designer</h4>
        
</asp:Content> 

The FChild.master design page cannot be displayed; if you try, you will get the following message. However you can code an aspx page to reveal it as shown in the following section. FPage.aspx provides the content for the nested master file, FChild.master.

Source of FPage.aspx

<%@ Page Language="VB" 
    MasterPageFile="~/FChild.master" 
    AutoEventWireup="false" 
    CodeFile="FPage.aspx.vb" 
    Inherits="FPage" %>

<asp:Content ContentPlaceHolderID="Content1" runat="server">
<h4>Content for the Master's First Child</h4>
<table style="border-style:solid;border-width:medium;">
<tr style="background-color:yellow">
<td>Name</td><td>EMAIL</td>
</tr>
<tr>
<td>Jay Krishnaswamy</td><td>htek@mysorian.com</td>
</tr>
</table>

</asp:Content>
FPage.aspx

Code for SChild.master

<%@ Master Language="VB" 
    MasterPageFile="~/top.master" 
    CodeFile="SChild.master.vb" 
    Inherits="SChild" %>


<asp:Content runat="server" 
     ContentPlaceHolderID="ContentPlaceHolder1">

 <h3 style="font-weight:500; color:Fuchsia;"> Master's Second Child </h3>
    <asp:contentplaceholder id="Content2" 
     runat="server">
     </asp:contentplaceholder>
 <h4 style="font-style:italic;color:Fuchsia;"> Second Child Designer</h4>
 </asp:Content>

As discussed in the previous section, this SChild.master cannot be displayed in the design view. However we can develop some content to show this nested master page by using the code shown in the next section.

Source of SPage.aspx

<%@ Page Language="VB" 
    MasterPageFile="~/SChild.master" 
    AutoEventWireup="false" 
    CodeFile="SPage.aspx.vb" 
    Inherits="SPage" %>


<asp:Content ID="Content3" 
     ContentPlaceHolderID="Content2" 
     runat="server">
<h4>Content for the Master's Second Child</h4>
<img src=http://images.devshed.com/af/stories/images/usa-small.gif 
alt="US Flag"/> </asp:Content>

This page will be displayed as shown when it is opened by Internet Explorer.

SPage.aspx

{mospagebreak title=What can go wrong?}

It is important that you establish the container and the contents correctly, otherwise you may have unexpected results. The following shows the relationships that must exist for the above displayed pages:

Master (Parent) has a ContentPlaceHolder1
------------------------------------------------------------------
First Child (FChild):
Content's ContentPlaceHolderID=ContentPlaceHolder1
ContentPlaceHolder ID=Content1

Second Child (SChild):
Content's ContentPlaceHolderID=ContentPlaceHolder1
ContentPlaceHolder ID=Content2
-------------------------------------------------------------------
Mpage.aspx points to -->MasterPageFile="~/top.master"
FPage.aspx points to--->MasterPageFile="~/FChild.master", Content1
SPage.aspx points to--->MasterPageFile="~/SChild.master", Content2

However the good news is that you get ample help from drop-down cues and only the appropriate control will be shown as seen in the next picture when the developer is about to set the MasterPageFile. Presently he is trying to set this attribute for the MPage.aspx which should be top.master from the drop-down.

Summary

The Master Page feature in ASP.NET 2.0 makes it very easy to create web pages which have a consistent look and feel. The other features like web wizard, themes, skins, and so forth make it extremely useful for composing rich web pages. Nested pages are an example of visual inheritance and shown only for one level of nesting, but nesting can be extended for more levels as well.

One thought on “Creating a Nested Master Page

  1. For an organization with many functional units nested master pages can provide a good method to display each functional unit’s web pages consistently. Please also read the other suggested article and research other resources on the Internet if you are intending to use the Master Pages. They can also be coded for specific browsers and the Master pages can be created for different browsers including those with smaller foot prints like the PDAs. Master pages and other enhancements like Wizard, Multiviews & Views, and other server controls in ASP.NET 2.0 provides an excellent basis for pages with rich content.
    Look forward to your comments and suggestions. sincerley, Jay

[gp-comments width="770" linklove="off" ]