O'Reilly logo

Visual C# 2005: A Developer's Notebook by Jesse Liberty

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Unify Your Look and Feel with Master Pages

Web sites look better and are less confusing to users when they have a consistent "look and feel" as you move from page to page. ASP.NET 2.0 facilitates creating consistency with master pages.

A master page provides shared HTML, controls, and code that you can use as a template for all the pages of a site. The O'Reilly web site (http://www.oreilly.com) is a good example of a site that you can implement using a master page. With a master page, the logo (the O'Reilly tarsier) and an image (the O'Reilly header) can be shared across multiple pages.

Note

Themes allow your users to personalize the look and feel of your site's controls.

How do I do that?

To see how to use master pages in this lab, follow these steps:

  1. Create a new web site and add a master page.

  2. Design the master page.

  3. Add content pages that use the master page.

Create a new web site and add a master page

To begin, create a new web site and call it MasterPages. From the Add New Item dialog, choose Master Page, and name your master page SiteMasterPage.master, as shown in Figure 4-42.

Adding a new master page

Figure 4-42. Adding a new master page

Design the master page

Open the page. You'll find that an asp:contentplaceholder control has been added for you. This placeholder will be filled by the content of the pages that use this master page.

Within the master page itself you can add anything you want surrounding the asp:contentplaceholder control. Whatever you add will be replicated on all pages that use the master page.

In this example, you'll use the O'Reilly logos, provided for your use in the download files at the O'Reilly site for this book (see the Preface for details). Create an images directory within your application and copy into it the Animal.gif and OReillyLogo.gif files. Then add the files to the project by right-clicking the images folder and choosing Add Existing Item....

You'll place the logos and the asp:contentplaceholder control into a table within the SiteMasterPage.master file, as shown in Example 4-6.

Example 4-6. Creating the SiteMasterPage.master file with logos

<%@ Master Language="C#" AutoEventWireup="true" 
CodeFile="SiteMastPage.master.cs" Inherits="SiteMastPage_master" %>
    
<!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 id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td style="width: 71px; height: 127px">
                <asp:Image ID="animalLogo" Runat="server" 
                 ImageUrl="~/Images/Animal.gif" ImageAlign="Left" />
             </td>
            <td style="width: 423px; height: 127px"> &nbsp;
              <asp:Image ID="oreillyLogo" Runat="server" 
              ImageUrl="~/Images/OreillyLogo.gif" ImageAlign="Bottom" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <div>
                    <asp:contentplaceholder 
                         id="SiteMasterPageContent" 
                         runat="server">
                        If you see this content,
                        then the master page content was not replaced<br />
                    </asp:contentplaceholder>
                </div>  
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

If you switch to Design view in Visual Studio, you'll see the master page with standard logos in place and an asp:contentPlaceHolder control displaying where content from other pages will be placed, as shown in Figure 4-43.

The master page in Display view

Figure 4-43. The master page in Display view

You can type directly into the placeholder area; in Figure 4-43, I typed in the words "If you see this content, then the master page content was not replaced."

Add content pages that use the master page

To see the master page at work, create two .aspx pages. Name them Page1.aspx and Page2.aspx, respectively. Create these pages as normal web pages, but check the "Select master page" checkbox, as shown in Figure 4-44. When you click Add, you'll be asked to pick which master page you want to use; so far we have selected only one.

Creating the content pages

Figure 4-44. Creating the content pages

Open your new page in Design mode. You'll see exactly how the content for this new page will fit within the master page you've chosen, as shown in Figure 4-45.

Content page within the master page

Figure 4-45. Content page within the master page

Tip

Visual Studio 2005 assumes you want to use custom content. If you want to use the default content, click the smart tag and choose Default to Master's Content.

Let's add some code to Page1.aspx that will replace the default master content:

Note

Whatever is in the content area will be replaced by the content pages. You can place more than one asp:contentPlaceHolder control in a master page. Each has its own unique ID.

<%@ Page Language="C#" MasterPageFile="~/SiteMastPage.master" 
AutoEventWireup="true" CodeFile="Page1.aspx.cs" Inherits="Page1_aspx" 
Title="Untitled Page" %>
    
<asp:Content ID="Content1" ContentPlaceHolderID="SiteMasterPageContent" 
Runat="Server">
<table>
    <tr>
        <td>
          <asp:Label ID="lblFirstName" Runat="server">First Name</asp:Label>
        </td>
        <td>
          <asp:TextBox ID="txtFirstName" Runat="server" />
        </td>
    </tr>
    <tr>
        <td>
          <asp:Label ID="lblLastName" Runat="server">Last Name</asp:Label>
        </td>
        <td>
          <asp:TextBox ID="txtLastName" Runat="server" />
        </td>
    </tr>
    
</table>
</asp:Content>

Switch to Page2.aspx, and this time drag a Calendar control onto the content area of the page. Add hyperlinks between your two pages so that you can move back and forth between them. Notice that the two pages share a common look and feel, though each page is made unique by the data and controls you placed within the asp:contentPlaceHolder control, as shown in Figure 4-46.

Two pages sharing a common master page

Figure 4-46. Two pages sharing a common master page

What about...

...nesting master pages within one another? Can I do that?

Yes, you can create submaster pages. To do so, create a new master page, but within the submaster set the MasterPageFile attribute to the parent-master page. Thus, if you create SubMaster.master, in the heading of SubMaster.master you will have a line such as this:

<%@  Master  MasterPageFile="SiteMasterPage.master" 
language ="c#" CompileWith="Submaster.master.cs" 
ClassName="Submaster" %>

...what if I want to modify properties of the master page at runtime?

You can do that, no problem. Just reach up into the master and change it from within your content page.

Sometimes you'll want to modify the master on the fly, from within the code of the content page. To accomplish this, you must expose a property in the master page. Then you can use the (implicit) Master member field of your .aspx page to access that property.

Tip

You can accomplish the same thing with late-binding (FindControl( )), but this uses reflection and is slower:

public void Page_Load(object sender, EventArgs e)
{
    Control c = Master.FindControl("AnimalLogo");
    Image img = c as Image;
    if (img != null)
    {
           img.ImageUrl = "~//images//Triangle.gif";
    }
}

Suppose you add a property such as this to SiteMasterPage_master:

public Image AnimalLogo
{
   set { this.animalLogo = value; }
}

Now you can change the image used for animalLogo by setting that property from within a .aspx page. Change Page2.aspx to add this code:

public void Page_Load(object sender, EventArgs e)
{
   ((SiteMasterPage)this.Master).AnimalLogo.ImageURL = "~//images//Triangle.gif";
}

The result is shown in Figure 4-47. Page2.aspx has reached up into its master page and changed its logo. This can be very useful when implementing Emerson's advice in Self Reliance: "A foolish consistency is the hobgoblin of little minds."

Setting the master page image

Figure 4-47. Setting the master page image

Where can I learn more?

For more information, see my article "Master Pages in ASP.NET" on ONDotnet.com (http://www.ondotnet.com). In addition, a very helpful QuickStart tutorial titled "Creating a Layout Using Master Pages" is available on http://beta.asp.net/quickstart/aspnet/.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required