Master Pages | Professional C# 2005 with .NET 3.0

Master pages provide an excellent way to make your Web sites easier to design. Putting all (or at least most) of your page layout in a single file allows you to concentrate on the more important things for the individual Web pages of your site.

Master pages are created in files with the extension .master, and can be added via the Website Add New Item... menu item, like any other site content. At first glance, the code generated for a master page is much like that for a standard .aspx page:

  <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MyMasterPage.master.cs"     Inherits="MyMasterPage" %> <!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>

The differences are:

A <%@ Master %> directive is used instead of a <%@ Page %> directive, although the attributes are the same.
A ContentPlaceHolder control with an ID of ContentPlaceHolder1 is placed on the page.

It is the ContentPlaceHolder control that makes master pages so useful. You can have any number of these on a page, and they are used by .aspx pages using the master page to “plug in” content. You can put default content inside a ContentPlaceHolder control, but .aspx pages can override this content.

For an .aspx page to use a master page, you need to modify the <%@ Page %> directive as follows:

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"   Inherits="_Default" MasterPageFile="~/MyMasterPage.master"   Title="Page Title" %>

Here you’ve added two new attributes: a MasterPageFile attribute saying which master page to use and a Title attribute that sets the content of the <title> element in the master page.

When you add an .aspx page to a Web site, you can choose to select a master page, as shown in Figure 33-7.

image from book
Figure 33-7

If you do this, you can navigate through your site structure to find the master page you want, as shown in Figure 33-8.

image from book
Figure 33-8

The .aspx page doesn’t have to contain any other code, if you want to use the default master page content. In fact, it is an error to include a Form control, because a page may only have one of these.

.aspx pages that use a master page can contain no root-level content other than directives, script elements, and Content controls. You can have as many Content controls as you like, where each one inserts content into one of the ContentPlaceHolder controls in the master page. The only thing to look out for is to make sure that the ContentPlaceHolderID attribute of the Content control matches the ID of the ContentPlaceHolder control where you want to insert content. So, to add content into the master page shown earlier, you’d simply need the following:

 <%@ Page Language="C#" MasterPageFile="~/MyMasterPage.master" AutoEventWireup="true"   CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %> <asp:Content  ContentPlaceHolder   runat="Server">   Custom content! </asp:Content>

The true power of master pages comes when you wrap your ContentPlaceHolder controls in other page content, such as navigation controls, site logos, and other HTML. You could supply multiple ContentPlaceHolder controls for main content, sidebar content, footer text, and so on.

Accessing Master Page Content from Web Pages

When you add a master page to a Web page, you will sometimes need to access the master page from code in your Web page. To do this, you can use the Page.Master property, which will return a reference to the master page in the form of a MasterPage object. You can cast this to the type of the master page as defined by the master page file (for the example in the previous section, this class would be called MyMasterPage). Once you have this reference, you can access any public members of the master page class.

Also, you can use the MasterPage.FindControl() method to locate controls on the master page by their identifier. This enables you to manipulate content on the master page that is outside of content place holders.

Master Pages in PCSDemoSite

In PCSDemoSite the single master page MasterPage.master (the default name for a master page) is used, with code as follows:

  <%@ 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">   <link rel="stylesheet" href="StyleSheet.css" type="text/css" />   <title></title> </head> <body>   <form  runat="server">     <div >       <h1><asp:literal  runat="server"         text="<%$ AppSettings:SiteTitle %>" /></h1>       <asp:SiteMapPath  Runat="server" Css />     </div>     <div >       <div >         <asp:TreeView  runat="server"           DataSource ShowLines="True" />       </div>       <br />       <br />       <asp:LoginView  Runat="server">         <LoggedInTemplate>           You are currently logged in as           <b><asp:LoginName  Runat="server" /></b>.           <asp:LoginStatus  Runat="server" />         </LoggedInTemplate>       </asp:LoginView>     </div>     <div >       <asp:ContentPlaceHolder  Runat="server" />     </div>   </form>   <asp:SiteMapDataSource  Runat="server" /> </body> </html>

Many of the controls here are ones that you haven’t looked at yet, and you’ll come back to those shortly. The important things to note here are the <div> elements that hold the various content sections (header, navigation bar, and body), and the use of <%$ AppSettings:SiteTitle %> to obtain the site title from the Web.config file:

 <appSettings>   <add key="SiteTitle" value="Professional C# Demo Site"/> </appSettings>

There is also a style sheet link to StyleSheet.css:

 <link rel="stylesheet" href="StyleSheet.css" type="text/css" />

This CSS style sheet contains the basic layout information for the <div> elements on this page, as well as for a section of the meeting room booker control:

  div#header {     position: absolute;     top: 0px;     left: 0px;     height: 80px;     width: 780px;     padding: 10px; } div#nav {     position: absolute;     left: 0px;     top: 100px;     width: 180px;     height: 580px;     padding: 10px; } div#body {     position: absolute;     left: 200px;     top: 100px;     width: 580px;     height: 580px;     padding: 10px; } .mrbEventList {     width: 40%; }

Note that none of this style information includes colors, fonts, and so on. This is achieved by style sheets within themes, which you see later in this chapter. The only information here is layout information, such as <div> sizes.

Tip

Note that Web site best practices have been adhered to in this chapter wherever possible. Using CSS for layout rather than tables is fast becoming the industry standard for Web site layout and is well worth learning about. In the preceding code, # symbols are used to format <div> elements with specific id attributes, while .mrbEventList will format an HTML element with a specific class attribute.