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.
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.
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>
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.
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>
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.
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.
Building an ASP.NET 2.0 Master Page in Three Steps
