Creating a Layout Using Master Pages

What's New in 2.0

• Master Pages - The Master Pages feature provides the ability to define common structure and interface elements for your site, such as a page header, footer, or navigation bar, in a common location called a "master page", to be shared by many pages in your site. This improves the maintainability of your site and avoids unnecessary duplication of code for shared site structure or behavior.

This section discusses the Master Pages feature in ASP.NET 2.0.

Just as Themes and Skins allow you to factor out style definitions from your page code and maintain them in a common file, Master Pages do the same for page layout. A Master Page is a page that contains markup and controls that should be shared across multiple pages in your site. For example, if all of your pages should have the same header and footer banners or the same navigation menu, you could define this in a Master Page once, and then all pages associated to this Master Page would inherit those common elements. The advantage of defining the header, footer, and navigation in a Master Page is that these elements need only be defined once, instead of multiple times in duplicate code across the pages in your site.

Master and Content Pages

Defining a Master Page is just like defining a normal page. Master Pages can contain markup, controls, or code, or any combination of these elements. However, a Master Page can contain a special type of control, called a ContentPlaceHolder control. A ContentPlaceHolder defines a region of the master page rendering that can be substituted with content from a page associated to the master. A ContentPlaceHolder can also contain default content, just in case the derive page does not need to override this content. The syntax of a ContentPlaceHolder control is given below:

<%-- ContentPlaceHolder control --%>
<asp:contentplaceholder id="FlowerText" runat="server"/>
<%-- ContentPlaceHolder with default content --%>
<asp:contentplaceholder id="FlowerText" runat="server">
<h3>Welcome to my florist website!</h3>
</asp:contentplaceholder>

To differentiate a Master Page from a normal page, a Master Page is saved under the .master file extension. A page can derive from a Master Page by defining a MasterPageFile attribute on its Page directive, as demonstrated below. A page that is associated to a Master Page is called a Content Page.

<%@ Page MasterPageFile="Site.master" %>

A Content Page can declare Content controls that specifically override content placeholder sections in the Master Page. A Content control is associated to a particular ContentPlaceHolder control through its ContentPlaceHolderID property. A Content Page may only contain markup and controls inside Content controls; it cannot have any top-level content of its own. It can, however, have directives or server-side code.

<%@ Page MasterPageFile="Site.master" %>
<asp:content id="Content1" contentplaceholderid="FlowerText" runat="server">
With sunshine, water, and careful tending, roses will bloom several times in a season.
</asp:content>
<asp:content id="Content2" contentplaceholderid="FlowerPicture" runat="server">
<asp:Image id="image1" imageurl="~/images/rose.jpg" runat="server"/>
</asp:content>

The following example demonstrates the relationship between Master and Content pages. The Master Page in this case defines two ContentPlaceHolder regions, named FlowerPicture and FlowerText, along with some default content for those regions. Individual content pages in the site inherit the common site layout and look-and-feel from the Master Page, but override the default content for the named ContentPlaceHolder regions with their own content. Note that the Default.aspx page in this site does not define any Content controls, and so it just inherits the default content from the Master Page.

VB Master and Content Pages

URL Rebasing in a Master Page

One thing to notice about the preceding example is that there are several places in the Master Page that refer to URL resources like images or stylesheet or page references using a relative-path syntax, for example:

<head>
<link rel="stylesheet" href="StyleSheet.css" type="text/css" />
</head>
...
<a href="daffodil.aspx">Daffodil</a>
...
<img alt="water lilies" src="Images/waterlilies.jpg"/>

This works fine when the Master Page and Content Page are in the same directory, but when the Content Page is in a physically separate location, the relative path will not be correct. To solve this problem, you may take one of the following approaches:

• Use absolute URL paths in the Master Page, for example <img src="/myapplication/images/banner.gif" />
• Use relative or application-relative URLs in server controls instead of static markup, for example <asp:Image ImageUrl="~/images/banner.gif" runat="server" />

The following example demonstrates this technique. The Content Pages have been moved to a subdirectory "Pages" under the directory that contains the Master Page. The Master Page has been updated to use server controls in place of HTML:

<head runat="server">
<link rel="stylesheet" href="StyleSheet.css" type="text/css" />
</head>
...
<a id="A1" href="pages/daffodil.aspx" runat="server">Daffodil</a/>
...
<asp:Image ID="Image1" AlternateText="Water Lillies" ImageUrl="~/Images/Waterlilies.jpg" runat="server"/>

VB URL Mapping in Master Pages

Accessing a Master Page from Code

In addition to overriding content, it is possible for a Content Page to programmatically access its Master Page. A Content Page creates a strongly-typed reference to the Master Page using the <%@ MasterType %> directive, specifying the virtual path to the master page:

<%@ MasterType VirtualPath="Site.master" %>

The Content Page can then reference the Master Page using the Master property of the Page class:

C#	VB
Master.FooterText = "This is a custom footer"; AdRotator ad = (AdRotator)Master.FindControl("MyAdRotator"); Master.FooterText = "This is a custom footer" Dim ad As AdRotator = Master.FindControl("MyAdRotator")

In the code example above, FooterText is a public property exposed on the Master Page, while MyAdRotator is a control on the Master Page. The following example demonstrates this code in action:

VB Accessing Master Pages in Code

Nesting Master Pages

Content Pages can also be Master Pages. That is, it is possible to derive a Master page from another Master Page. For example, you might have a top-level Master Page that represents the overall site header/footer and navigation of your site, and then separate Master Pages that derive from this Master in order to define different looks for the various sub-sections within your site. Content Pages would then derive from the appropriate section master for the section the Content Page belongs to. The following example demonstrates this idea, dividing the Florist example site into two sections, Annuals and Perrennials.

VB Nested Master Pages