An Overview of Master Pages

Ever since the first websites appeared on the World Wide Web, being able to define a consistent look and feel for all pages across a site has been an important part of the design process. Programs like Microsoft FrontPage and Macromedia's Dreamweavertools designed for designing websites and creating web pageshave long offered template features. With these tools, a designer can create a single template page that contains both common, sitewide content as well as regions that can be customized by each page that uses the template.

With ASP.NET 2.0 and Visual Web Developer, a page developer provides a sitewide template by creating a master page. Just like the template files in FrontPage and Dreamweaver, a master page consists of two pieces: content that appears on each and every page that inherits the master page and regions that can be customized by pages using the master page. The master page model in ASP.NET outshines simple HTML-based templates because master pages, like any ASP.NET page, can contain not only HTML markup, but Web controls and server-side source code as well.

Before we jump into creating our own master pages, let's first look at how the entire master page model works. Imagine that we wanted a website where each page on the site had the following four common user interface elements:

• The website's name on the top of the page

• A navigation breadcrumb at the top of the page

• A navigation treeview on the left of the page, showing the site's structure

• A copyright statement and a series of linksLegal, Privacy Policy, About Us, and so onat the bottom of the page

By the Way

The navigation treeview and breadcrumb on the pages in our site would ideally be implemented using the site navigation features and the SiteMapPath and TreeView Web controls examined in Hour 19, "Defining a Site's Structure and Providing Site Navigation."

Figure 21.1 shows the About page on this site.

Figure 21.1. Each page in the site will have the same look and feel.

The title at the top of the page ("Welcome to My Website!"), the treeview on the left, the breadcrumb, and the list of links at the bottom will exist on each page in our site precisely as they appear in the About page in Figure 21.1. The remaining portion of the page, the part that says About Us and Lorem ipsum blah blah blah, can be unique to each of the web pages on the site.

To accomplish this in an ASP.NET site, we would first create a master page. A master page needs to specify both the regions of the page that are common to all pages that inherit the master page as well as the regions that are customizable on a page-by-page basis. The content that is common to all pages that inherit the master page can simply be added to the master page just like you would add content to a regular ASP.NET page. You can enter the HTML markup and Web controls by hand, in the Source view, or use the WYSIWYG designer.

To indicate a region in the master page that is customizable on a page-by-page basis, use the ContentPlaceHolder Web control. As Figure 21.2 shows, this Web control simply renders as a box in the Design view of the master page. Later, when creating an ASP.NET page that inherits from this master page, we will be able to add content only to the page inside this box because the area outside is the user interface that is common to all pages that inherit the master page.

Figure 21.2. The master page has the common UI elements defined, along with a ContentPlaceHolder control.

Did you Know?

A master page may have multiple ContentPlaceHolder Web controls. Each ContentPlaceHolder control represents a location on the master page that can be customized by the ASP.NET pages that inherit it.

Figure 21.2 shows the master page used to create the common user interface shown in Figure 21.1. Note that the master page contains the common user interface elementsthe title at the top of the page, the TreeView control (and SiteMapDataSource control), the SiteMapPath control, and the links at the bottom of the pagealong with a ContentPlaceHolder control. (We'll look at the steps in creating a master page in greater detail later in this hour.)

With this master page created, the next step is to create an ASP.NET page that inherits from the master page, a topic that we'll delve into later this hour. Once such a page has been created, the Design view for the ASP.NET page shows both the noneditable master page content as well as the editable content regions. Figure 21.3 shows the Design view of the About page.

Figure 21.3. The About page's only editable region is the Content region.

We don't need to re-create the common page elementsthe title, TreeView control, and so on. They are automatically shown in the page's Design view, inherited from the master page. Although it may not be particularly clear from the figures in this book, these common master page elements are grayed out and cannot be modified by the ASP.NET page. Rather, the only modifiable region o n the page is the Content region, which shows up precisely where the ContentPlaceHolder control was added to the master page.

With this master page setup, we can easily adjust the overall look and feel of the site by updating the master page. For example, if we wanted to change the text displayed at the top of the page or wanted to add new links to the bottom of this page, we could simply edit the master page. After the master page was modified and saved, those pages that inherited from the master page would immediately start showing the new look and feel.

To summarize, defining a sitewide template with master pages involves two steps, which should be done in the following order:

1.	Create a master page that specifies the common, sitewide user interface elements along the regions that are customizable on a page-by-page basis.
2.	Create the site's ASP.NET pages, with the pages configured to use the master page created in step 1.

The remainder of this hour examines these two steps in greater detail.