Introduction to Master Pages

Master Pages are a framework that is built into ASP.NET that provide for the creation and maintenance of reusable page templates that can be used to give a website a consistent look and feel.

Some of the more adventurous programmers may have even created their own frameworks for ASP.NET 1.1 that provided similar functionality. The good news is that the capability provided by Master Pages is provided as an integrated feature of ASP.NET 2.0.

Master Pages and Content Pages

Master Pages is actually a broad term that really encompasses two distinct concepts:

The Master Page
The Content Page

The Master Page

The Master Page functions just like any other ASP.NET page, with a few exceptions. The role of the Master Page is to provide a master layout to which all content pages (defined shortly) using the master must adhere. It can (and should) contain standard HTML, styled elements, server-side controls, and even C# code if necessary. It also contains placeholder controls that indicate where content can appear in associated content pages.

The Content Page

The content page is subservient to a single master page. It defines the content that appears in the placeholders defined within the master page. Interestingly enough, a content page can be a master page for one or more additional content pages. That topic will be explained later in this chapter in the section on advanced topics.

Creating Your First Master Page

Now that you're familiar with the basic concepts behind Master Pages and the need that created them, you can create your own Master Page.

To create a new master page using Visual Studio, simply create a new web project. When you have a new web application, right-click the project, choose Add New Item and then select the Master Page template from the list.

The empty master page contains the code in Listing 24.1.

Listing 24.1. An Empty Master Page

<%@ Master Language="C#" AutoEventWireup="true"    CodeFile="MasterPage.master.cs" Inherits="MasterPage"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>Untitled Page</title> </head> <body>     <form  runat="server">     <div>         <asp:contentplaceholder  runat="server">         </asp:contentplaceholder>     </div>     </form> </body> </html>

As you can see, there is a single ContentPlaceHolder control defined by default. You can change the layout to include as many content placeholders as you like.

To create content placeholders to represent the layout shown in Figure 24.1, you can create a master page like the one described in Listing 24.2. If you are following along, call this Master Page SiteMaster.master so that it can be used in later samples in this chapter.

Listing 24.2. A Master Page with Multiple Content Placeholders `(SiteMaster.master)`

<%@ Master Language="C#" AutoEventWireup="true"  CodeFile="SiteMaster.master.cs" Inherits="SiteMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">    <title>Untitled Page</title> </head> <body>     <form  runat="server">     <table width=100% border=0 cellspacing=1 cellpadding=1>         <tr>             <td width=150 valign=top>                 This is a fixed content left side             </td>             <td valign=top>                 <asp:ContentPlaceHolder  runat=server>                     Content in the middle goes here</asp:ContentPlaceHolder>             </td>             <td width=150 valign=top align=right>                 This is a fixed content right side             </td>         </tr>         <tr>             <td colspan=3>                 <asp:ContentPlaceHolder  runat=server>                     The footer goes in this content area                 </asp:ContentPlaceHolder>             </td>         </tr>     </table>    </form> </body> </html>

Take some time to flip back and forth between the HTML view and the design view after you create your first master page so that you can get used to the difference between fixed areas of content and areas of content that will be defined by Content Pages themselves.

Creating Your First Content Page

To create a content page based on an existing master, you just follow the same steps you would follow if you were creating a new Web Form, with one small exception.

Right-click the existing web project and choose Add New Item. When the dialog appears, click to select the Web Form template, and down at the bottom of the dialog box, make sure that the Select Master Page option is clicked. When you click the Add button, you will then be prompted to choose the master page to which the Content Page will be associated. If you were following along with the preceding sample, create a new Web Form called ContentSample3.aspx and choose the SiteMaster.master file as the master page. The first thing you should notice is that when you create the content page, Visual Studio has automatically created some empty Content elements. Switch to design view and you will see where those elements fit within the context of the Master Page.

Enter the code for ContentSample as shown in Listing 24.3

Listing 24.4. HTML Source for `ContentSample3.aspx`, a Web Form Using a Master Page

<%@ Page Language="C#"   MasterPageFile="~/SiteMaster.master"   AutoEventWireup="true" CodeFile="ContentSample.aspx.cs"   Inherits="ContentSample" Title="Untitled Page" %> <asp:Content  ContentPlaceHolder Runat="Server">     This will appear in the main content area </asp:Content> <asp:Content  ContentPlaceHolder Runat="Server">     &copy;2005 SAMS Press, Inc. All rights reserved. Ad Nauseum. </asp:Content>

Now highlight the ContentSample page in the project and start it up in the debugger. You will see a page that looks much like the one shown in Figure 24.2.

Figure 24.2. The `ContentSample` page, demonstrating the use of a Master Page and `multiple content` areas.

Using a Default Master Page

When you create a content page, there is a special metacommand statement that indicates the associated master page that is part of the @Page statement: MasterPageFile. If you want to enforce more control over the look and feel of your site, but you don't want to have to manually change every single page in your site, you can define a default master page.

Another use for default master pages allows you to change the master page for a group of content pages without modifying the individual pages. For example, you might want to change the master page for a short period of time to put up a seasonal look and feel such as a page styled for Christmas or Halloween.

To specify a default master page, you can make use of the <pages> element in a website's web.config file, as shown in the following example:

<pages masterPageFile="~/SiteMaster.master"/>

The only issue I have with the default master page approach is that if you remove the master indication from the content page, the visual designer won't properly display the master layout. Losing some interactivity in the designer is a small price to pay for being able to use the <pages> directive to define a default master page. Keep in mind that each subdirectory can contain its own web.config file and thus could also contain its own <pages> directive to define a default master page for the directory. This lack of functionality in the designer may change in the final release of Visual Studio 2005.

Master Pages "Under the Hood"

When you create a master page, you are actually creating a class of type System.Web.UI.MasterPage. This class inherits from UserControl, which in turn inherits from TemplateControl. This should give you some idea that at the core of the Master Pages system, you are really just dealing with a specialized user control that is designed to render content within special placeholders.

At runtime, the master page is compiled and the content contained within the content areas is compiled as well. One really important thing to keep in mind that will become more important in the advanced section is the notion that when a content page is rendered, the rendering is relative to the content page's location, not the master page's location. The master page itself can also be accessed programmatically at runtime via the Master property on the Page object, and you will see more about this property in the next section.