Creating Master Pages

You create a Master Page by creating a file that ends with the .master extension. You can locate a Master Page file any place within an application. Furthermore, you can add multiple Master Pages to the same application.

For example, Listing 5.1 contains a simple Master Page.

Listing 5.1. `SimpleMaster.master`

<%@ Master Language="VB" %> <!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">     <style type="text/css">         html         {             background-color:silver;             font:14px Arial,Sans-Serif;         }         .content         {             margin:auto;             width:700px;             background-color:white;             border:Solid 1px black;         }         .leftColumn         {             float:left;             padding:5px;             width:200px;             border-right:Solid 1px black;             height:700px;         }         .rightColumn         {             float:left;             padding:5px;         }         .clear         {             clear:both;         }     </style>     <title>Simple Master</title> </head> <body>     <form  runat="server">     <div >         <div >             <asp:contentplaceholder                                  runat="server"/>         </div>         <div >             <asp:contentplaceholder                                  runat="server"/>         </div>         <br  />     </div>     </form> </body> </html>

Notice that the Master Page in Listing 5.1 looks very much like a normal ASP.NET page. In fact, you can place almost all the same elements in a Master Page that you could place in an ASP.NET page, including HTML, server-side scripts, and ASP.NET controls.

Visual Web Developer Note

You create a Master Page in Visual Web Developer by selecting the Website menu option, Add New Item, and selecting the Master Page item.

There are two special things about the Master Page in Listing 5.1. First, notice that the file contains a <%@ Master %> directive instead of the normal <%@ Page %> directive. Second, notice that the Master Page includes two ContentPlaceHolder controls.

When the Master Page is merged with a particular content page, the content from the content page appears in the areas marked by ContentPlaceHolder controls. You can add as many ContentPlaceHolders to a Master Page as you need.

Warning

There are some things that you can't do in a Master Page that you can do in a content page. For example, you cannot cache a Master Page with the OutputCache directive. You also cannot apply a theme to a Master Page.

The Master Page in Listing 5.1 creates a two-column page layout. Each ContentPlaceHolder control is contained in a separate <div> tag. Cascading Style Sheet rules are used to position the two <div> tags into a two-column page layout (see Figure 5.1).

Figure 5.1. Creating a two-column Master Page.

Web Standards Note

The Master Page uses Cascading Style Sheets to create the page layout. You should strive to avoid using HTML tables for layout. HTML tables should be used only to display tabular information.

The content page in Listing 5.2 uses the Master Page that was just created.

Listing 5.2. `SimpleContent.aspx`

<%@ Page Language="VB" MasterPageFile="~/SimpleMaster.master" %> <asp:Content          ContentPlaceHolder     Runat="Server">     Content in the first column     <br />Content in the first column     <br />Content in the first column     <br />Content in the first column     <br />Content in the first column </asp:Content> <asp:Content          ContentPlaceHolder     Runat="Server">     Content in the second column     <br />Content in the second column     <br />Content in the second column     <br />Content in the second column     <br />Content in the second column </asp:Content>

When you open the page in Listing 5.2 in a web browser, the contents of the page are merged with the Master Page.

Visual Web Developer Note

In Visual Web Developer, you create an ASP.NET page that is associated with a particular Master Page by selecting Website, Add New Item, and selecting Web Form. Next, check the check box labeled Select Master Page. When you click Add, a dialog box appears that enables you to select a Master Page.

The Master Page is associated with the content page through the MasterPageFile attribute included in the <%@ Page %> directive. This attribute contains the virtual path to a Master Page.

Notice that the content page does not contain any of the standard opening and closing XHTML tags. All these tags are contained in the Master Page. All the content contained in the content page must be added with Content controls.

You must place all the content contained in a content page within the Content controls. If you attempt to place any content outside these controls, you get an exception.

The Content control includes a ContentPlaceHolderID property. This property points to the ID of a ContentPlaceHolder control contained in the Master Page.

Within a Content control, you can place anything that you would normally add to an ASP.NET page, including XHTML tags and ASP.NET controls.

Creating Default Content

You don't have to associate a Content control with every ContentPlaceHolder control contained in a Master Page. You can provide default content in a ContentPlaceHolder control, and the default content will appear unless it is overridden in a particular content page.

For example, the Master Page in Listing 5.3 includes an additional column, which displays a banner advertisement (see Figure 5.2). The banner advertisement is contained in a ContentPlaceHolder control named contentAd.

Figure 5.2. Displaying default content in a Master Page.

Listing 5.3. `DefaultMaster.master`

<%@ Master Language="VB" %> <!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">     <style type="text/css">         html         {             background-color:silver;             font:14px Arial,Sans-Serif;         }         .content         {             margin:auto;             width:700px;             background-color:white;             border:Solid 1px black;         }         .leftColumn         {             float:left;             padding:5px;             width:200px;             border-right:Solid 1px black;             height:700px;         }         .middleColumn         {             float:left;             padding:5px;         }         .rightColumn         {             float:right;             width:175px;             height:300px;             border-left:solid 1px black;             border-bottom:solid 1px black;             background-color:#eeeeee;             text-align:center;         }         .ad         {             margin-top:20px;         }         .clear         {             clear:both;         }     </style>     <title>Default Master</title> </head> <body>     <form  runat="server">     <div >         <div >             <asp:contentplaceholder                                  runat="server"/>         </div>         <div >             <asp:ContentPlaceholder                                  runat="server" />         </div>         <div >             <asp:ContentPlaceHolder                                  Runat="server">                 <asp:Image                                          ImageUrl="~/BannerAd.gif"                     Css                     AlternateText="Advertisement for Superexpert ASP Workshops"                     Runat="server" />             </asp:ContentPlaceHolder>         </div>         <br  />     </div>     </form> </body> </html>

The content page in Listing 5.4 uses the Master Page in Listing 5.3. It does not include a Content control that corresponds to the contentAd control in the Master Page. When you open the page in a browser, the default banner advertisement is displayed.

Listing 5.4. `DefaultContent.aspx`

<%@ Page Language="VB" MasterPageFile="~/DefaultMaster.master" %> <asp:Content          ContentPlaceHolder     Runat="Server">     Content in the first column     <br />Content in the first column     <br />Content in the first column     <br />Content in the first column     <br />Content in the first column </asp:Content> <asp:Content          ContentPlaceHolder     Runat="Server">     Content in the second column     <br />Content in the second column     <br />Content in the second column     <br />Content in the second column     <br />Content in the second column </asp:Content>

Of course, you do have the option of adding a Content control that overrides the default content contained in the contentAd control in the Master Page. For example, you might want to display different banner advertisements in different sections of your website.

Note

You can nest ContentPlaceHolder controls in a Master Page. If you do this, then you have the option of overriding greater or smaller areas of content in the Master Page.

Nesting Master Pages

When building a large website, you might need to create multiple levels of Master Pages. For example, you might want to create a single site-wide Master Page that applies to all the content pages in your website. In addition, you might need to create multiple section-wide Master Pages that apply to only the pages contained in a particular section.

Warning

You cannot work with nested Master Pages in Visual Web Developer while in Design view. If you need to nest Master Pages, then you need to stick to Source view.

You can nest Master Pages as many levels as you need. For example, Listing 5.5 contains a Master Page named Site.master, which displays a logo image and contains a single content area. It also contains site-wide navigation links.

Listing 5.5. `Site.master`

<%@ Master Language="VB" %> <!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">     <style type="text/css">         html         {             background-color:DarkGreen;             font:14px Georgia,Serif;         }         .content         {             width:700px;             margin:auto;             border-style:solid;             background-color:white;             padding:10px;         }         .tabstrip         {             padding:3px;             border-top:solid 1px black;             border-bottom:solid 1px black;         }         .tabstrip a         {             font:14px Arial;             color:DarkGreen;             text-decoration:none;         }         .column         {             float:left;             padding:10px;             border-right:solid 1px black;         }         .rightColumn         {             float:left;             padding:10px;         }         .clear         {             clear:both;         }     </style>     <title>Site Master</title> </head> <body>     <form  runat="server">     <div >         <asp:Image                          ImageUrl="~/Images/SiteLogo.gif"             AlternateText="Website Logo"             Runat="server" />         <div >         <asp:HyperLink                          Text="Products"             NavigateUrl="~/Products.aspx"             Runat="server" />         &nbsp;         <asp:HyperLink                          Text="Services"             NavigateUrl="~/Services.aspx"             Runat="server" />         </div>         <asp:contentplaceholder  runat="server">         </asp:contentplaceholder>         <br  />         copyright &copy; 2007 by the Company     </div>     </form> </body> </html>

The Master Pages in Listing 5.6 and Listing 5.7 are nested Master Pages. Notice that both Master Pages include a MasterPageFile attribute that points to the Site.master Master Page.

Listing 5.6. `SectionProducts.master`

<%@ Master Language="VB" MasterPageFile="~/Site.master" %> <asp:Content          ContentPlaceHolder     Runat="server">     <div >         <asp:ContentPlaceHolder                          Runat="server" />     </div>     <div >         <asp:ContentPlaceHolder                          Runat="server" />     </div>     <div >         <asp:ContentPlaceHolder                          Runat="server" />     </div> </asp:Content>

Listing 5.7. `SectionServices.master`

<%@ Master Language="VB" MasterPageFile="~/Site.master" %> <asp:Content          ContentPlaceHolder     Runat="server">     <div >         <asp:ContentPlaceHolder                          Runat="server" />     </div>     <div >         <asp:ContentPlaceHolder                          Runat="server" />     </div> </asp:Content>

The Master Page in Listing 5.6 creates a three-column page layout, and the Master Page in Listing 5.7 creates a two-column page layout.

The Products.aspx page in Listing 5.8 uses the SectionProducts.master Master Page. When you request the Products.aspx page, the contents of Site.master, SectionProducts.master, and Products.aspx are combined to generate the rendered output (see Figure 5.3).

Figure 5.3. Nesting Master Pages to display the `Products.aspx` page.

Listing 5.8. `Products.aspx`

<%@ Page Language="VB" MasterPageFile="~/SectionProducts.master" %> <asp:Content          ContentPlaceHolder     Runat="Server">     Products, Products, Products     <br />Products, Products, Products     <br />Products, Products, Products     <br />Products, Products, Products     <br />Products, Products, Products </asp:Content> <asp:Content          ContentPlaceHolder     Runat="Server">     Products, Products, Products     <br />Products, Products, Products     <br />Products, Products, Products     <br />Products, Products, Products     <br />Products, Products, Products </asp:Content> <asp:Content          ContentPlaceHolder     Runat="Server">     Products, Products, Products     <br />Products, Products, Products     <br />Products, Products, Products     <br />Products, Products, Products     <br />Products, Products, Products </asp:Content>

The Services.aspx page in Listing 5.9 uses the SectionService.master Master Page. When this page is opened in a browser, the contents of Site.master, SectionServices.master, and Services.aspx are combined to generate the rendered output (see Figure 5.4).

Listing 5.9. `Services.aspx`

<%@ Page Language="VB" MasterPageFile="~/SectionServices.master"     Title="Untitled Page" %> <asp:Content          ContentPlaceHolder     Runat="Server">     Services, Services, Services     <br />Services, Services, Services     <br />Services, Services, Services     <br />Services, Services, Services     <br />Services, Services, Services </asp:Content> <asp:Content          ContentPlaceHolder     Runat="Server">     Services, Services, Services, Services, Services     <br />Services, Services, Services, Services, Services     <br />Services, Services, Services, Services, Services     <br />Services, Services, Services, Services, Services     <br />Services, Services, Services, Services, Services </asp:Content>

Figure 5.4. Nesting Master Pages to display the `Services.aspx` pages.

Using Images and Hyperlinks in Master Pages

You must be careful when using relative URLs in a Master Page. For example, you must be careful when adding images and links to a Master Page. Relative URLs are interpreted in different ways, depending on whether they are used with HTML tags or ASP.NET controls.

If you use a relative URL with an ASP.NET control, then the URL is interpreted relative to the Master Page. For example, suppose that you add the following ASP.NET Image control to a Master Page:

<asp:Image ImageUrl="Picture.gif" Runat="Server" />

The ImageUrl property contains a relative URL. If the Master Page is located in a folder named MasterPages, then the URL is interpreted like this:

/MasterPages/Picture.gif

Even if a content page is located in a completely different folder, the ImageUrl is interpreted relative to the folder that contains the Master Page and not relative to the content page.

The situation is completely different in the case of HTML elements. If an HTML element such as an <img> or <a> tag includes a relative URL, the relative URL is interpreted relative to the content page. For example, suppose you add the following <img> tag to a Master Page:

<img src="/books/3/444/1/html/2/Picture.gif" />

The src attribute contains a relative URL. This URL is interpreted relative to a particular content page. For example, if you request a content page located in a folder named ContentPages, the relative URL is interpreted like this:

/ContentPages/Picture.gif

Using relative URLs with HTML elements is especially tricky because the URL keeps changing with each content page. If you request content pages from different folders, the relative URL changes. There are three ways that you can solve this problem.

First, you can replace all the HTML elements that use relative URLs with ASP.NET controls. An ASP.NET control automatically reinterprets a relative URL as relative to the Master Page.

Note

Relative URLs used by ASP.NET controls in a Master Page are automatically reinterpreted relative to the Master Page. This process of reinterpretation is called rebasing. Only ASP.NET control properties decorated with the UrlProperty attribute are rebased.

Second, you can avoid relative URLs and use absolute URLs. For example, if your application is named MyApp, then you can use the following <img> tag to display an image file located in the MasterPages folder:

<img src="/books/3/444/1/html/2//MyApp/MasterPages/Picture.gif" />

The disadvantage of using absolute URLs is that they make it difficult to change the location of a web application. If the name of your application changes, then the absolute URLs will no longer work and you'll end up with a bunch of broken images and links.

Another option is to use a method to reinterpret relative URLs in a Master Page. For example, the Master Page in Listing 5.10 includes a method named MasterUrl(). This method is used with the <img> tag in the body of the Master Page, which displays the website logo.

Listing 5.10. `MasterPages\ImageMaster.master`

<%@ Master Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">     Public Function MasterUrl(ByVal url As String) As String         Return String.Format("{0}/{1}", Me.TemplateSourceDirectory, url)     End Function </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>Image Master</title> </head> <body>     <form  runat="server">     <div>     <img src='/books/3/444/1/html/2/<%=MasterUrl("Logo.gif") %>' alt="Website Logo" />     <asp:contentplaceholder  runat="server" />     </div>     </form> </body> </html>

The Master Page in Listing 5.10 is located in a folder named MasterPages. This folder also includes an image named Logo.gif. This image is displayed with the following HTML tag:

<img src='/books/3/444/1/html/2/<%=MasterUrl("Logo.gif") %>' alt="Website Logo" />

The MasterUrl() method appends the image's filename to the value of the Master Page's TemplateSourceDirectory property. The TemplateSourceDirectory property represents the folder that contains the Master Page.

The content page in Listing 5.11 uses the Master Page and correctly displays the website logo (see Figure 5.5):

Figure 5.5. Displaying a Master Page relative image.

Listing 5.11. `ImageContent.aspx`

<%@ Page Language="VB" MasterPageFile="~/MasterPages/ImageMaster.master" %> <asp:Content          ContentPlaceHolder     Runat="Server">     <h1>Content</h1> </asp:Content>

Registering Master Pages in Web Configuration

You can apply a Master Page to every content page in a particular folder or every content page in an entire application. Rather than add a MasterPageFile attribute to individual content pages, you can add a configuration option to the web configuration file.

For example, the web configuration file in Listing 5.12 applies the SimpleMaster.master Master Page to every page contained in the same folder (or subfolder) as the web configuration file.

Listing 5.12. `FolderA\Web.Config`

<?xml version="1.0"?> <configuration> <system.web>   <pages masterPageFile="~/SimpleMaster.master" /> </system.web> </configuration>

The Master Page is applied only to content pages. If a page does not contain any Content controlsit is a normal ASP.NET pagethen the Master Page is ignored.

You can override the Master Page configured in the web configuration file in the case of a particular content page. In other words, a MasterPageFile attribute in a content page takes precedence over a Master Page specified in the web configuration file.

Listing 5.1. SimpleMaster.master

Figure 5.1. Creating a two-column Master Page.

Listing 5.2. SimpleContent.aspx

Creating Default Content

Figure 5.2. Displaying default content in a Master Page.

Listing 5.3. DefaultMaster.master

Listing 5.4. DefaultContent.aspx

Nesting Master Pages

Listing 5.5. Site.master

Listing 5.6. SectionProducts.master

Listing 5.7. SectionServices.master

Figure 5.3. Nesting Master Pages to display the Products.aspx page.

Listing 5.8. Products.aspx

Listing 5.9. Services.aspx

Figure 5.4. Nesting Master Pages to display the Services.aspx pages.