Programs for designing websites and creating web pages, like Microsoft FrontPage and Adobe Dreamweaver, have 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 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 the content page. A content page is the ASP.NET page that is bound to 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, 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:

Figure 22.1 shows the About page on this site.

Figure 22.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 22.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 website, we first create a master page. A master page needs to specify both the regions of the page that are common to all content pages as well as the regions that are customizable on a page-by-page basis. The content that is common to all content pages can be added to the master page the same as you add content to a regular ASP.NET page. You can enter the HTML and Web controls by hand, in the Source view, or by using 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 22.2 shows, this Web control 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 inside this box.

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

Figure 22.2 shows the master page used to create the common user interface shown in Figure 22.1. Note that the master page contains the common user interface elements—the title at the top of the page, the TreeView control (and SiteMapDataSource control), the SiteMapPath control, and the links at the bottom of the page—along 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. After 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 22.3 shows the Design view of the About page.

Figure 22.3. The About page’s only editable region is the Content region.

We don’t need to re-create the common page elements—the 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 on 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 edit the master page. After the master page was modified and saved, those content pages that inherited from this master page would immediately show the updated look and feel.

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

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

A master page is similar to the ASP.NET pages we’ve been creating throughout this book. Like ASP.NET pages, master pages consist of Web controls, static HTML, and server-side code. The main difference between a master page and an ASP.NET page is that a master page’s purpose is to define a template for the website. As we discussed earlier in this hour, the master page defines both the user interface elements common to all pages that inherit the master page, as well as the regions that are editable on a page-by-page basis.

To get started defining a sitewide template, add a master page to your project using the following steps:

After you add the new master page, the Design view shows a page with a single ContentPlaceHolder Web control (see Figure 22.4). This ContentPlaceHolder indicates the region that can be edited by the ASP.NET pages that inherit this master page. You can have multiple ContentPlaceHolders in your master page. In fact, the page already contains two ContentPlaceHolders: one within the <head> HTML element and one within the Web Form. (The one you see in the Design view in Figure 22.4 is the ContentPlaceHolder in the Web Form; the one in the <head> is not displayed.)

Figure 22.4. New master pages contain a single ContentPlaceHolder control.

To add a new ContentPlaceHolder, drag the ContentPlaceHolder control from the Toolbox onto the master page.

Take a moment to view the declarative markup of the master page (see Listing 22.1). If you compare the default declarative markup for a master page to that of a regular ASP.NET page, you’ll see two differences. The first is that the master page starts with a <%@ Master %> directive (line 1), whereas ASP.NET pages start with the <%@ Page %> directive. Furthermore, the master page contains, by default, two ContentPlaceHolder controls: one on lines 8 and 9 and the other spanning lines 14 to 16.

 1: <%@ Master Language="VB" CodeFile="MasterPage2.master.vb" Inherits="MasterPage2" %>
 2:
 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4:
 5: <html xmlns="http://www.w3.org/1999/xhtml">
 6: <head runat="server">
 7:     <title>Untitled Page</title>
 8:     <asp:ContentPlaceHolder id="head" runat="server">
 9:     </asp:ContentPlaceHolder>
10: </head>
11: <body>
12:     <form id="form1" runat="server">
13:     <div>
14:         <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
15:
16:         </asp:ContentPlaceHolder>
17:     </div>
18:     </form>
19: </html>

To create the sitewide look and feel, add the appropriate HTML and Web controls to the master page. Again, you can do this by manually entering the HTML and control syntax through the Source view, or in a more graphical way through the Design view.

Designing the Sitewide Template

Let’s create a master page that has the look and feel first shown in Figure 22.1—a title at the top, a TreeView control along the left, and so on. This design has each page laid out into four regions:

• The header region, which displays the title of the website.

• The navigation region, which contains the TreeView control and appears on the left of the page beneath the header region.

• The main region, which contains the SiteMapPath control and the ContentPlaceHolder control. This region is located beneath the header region and to the right of the navigation region.

• The footer region, which contains the common links—Legal, About Us, and so on—along with the copyright statement.

To provide this page layout, let’s use tables. A table is an HTML element that can be used to arrange a page into various columns and rows. For this site design, we want a table that takes up the entire page with two columns and three rows, with the top and bottom rows spanning two columns. Figure 22.5 illustrates this design concept graphically.

Figure 22.5. The site’s design lays out pages using a two-column, three-row table.

To create such a layout in HTML, you can manually enter the appropriate HTML table markup, or you can use Visual Web Developer. If you prefer entering the HTML by hand, feel free to do so.

If you are not an HTML aficionado and would rather have Visual Web Developer assist with creating the page’s layout, follow these steps. First, go to the master page’s Design view and make sure that the focus is on the <div> element in the Web Form and not on the ContentPlaceHolder control.

Next, go to the Table menu and choose Insert Table. This displays the Insert Table dialog box, from which you can specify the precise table settings, indicating the number of rows and columns, the alignment, the width and height, and so on (see Figure 22.6). Create a table with two columns and three rows. We want the table to fill the width of the page, so check the Specify Width check box, enter 100 into the text box, and select the In Percent option button. Finally, set the Cell spacing to 0 and the Cell padding to 5.

Figure 22.6. Add a table to the master page using the Insert Table dialog box.

The Insert Table dialog box adds the new table to the page before the ContentPlaceHolder Web control. Because we want the ContentPlaceHolder control in the main region, take a moment to drag the ContentPlaceHolder from beneath the table into the second column in the second row of the table.

Creating the Header Region

The header region is currently divided into two cells. We want to merge these two cells into one so that we can enter the website title here. To accomplish this, select both cells from the Design view. Then right-click the cells and, from the Modify menu option, choose to Merge the cells.

Now enter the site’s title here, such as Welcome to My Website!. I’ve opted to have this title centered, bolded, and displayed using the X-Large font size. These settings can be specified when typing in the website name, through the myriad of formatting options along the toolbar or through the Format menu. Alternatively, you can add a Label Web control for the title and configure its formatting properties to achieve the desired effect.

These settings can also be made to apply to the entire table cell, rather than just the particular piece of text being entered. To tailor the entire header region, perform the following steps:

1. Click inside the table cell and then go to the Properties window.

2. Click the Style property, which displays a set of ellipses.

3. Click these ellipses. This displays the Modify Style dialog box where you can set the font, background, layout, and other options that apply to the entire table row (see Figure 22.7).

   

   Figure 22.7. Customize the appearance of the header region through the Style Builder dialog box.

For example, to have the header region display white text on an olive background, from the Font tab, select the white color from the color drop-down list, and from the Background tab, choose olive from the background-color drop-down list. To specify the height of the header region, use the height drop-down list in the Position tab. You can also specify font sizes, alignment, and a host of other settings through the Style Builder dialog box.

Crafting the Navigation Region

The purpose of the navigation region is to provide the visitor with a complete listing of the site’s structure, making it easy to quickly move to another page on the site. As we discussed in Hour 20, “Defining a Site Map and Providing Site Navigation,” the ASP.NET TreeView Web control can be used in tandem with a SiteMapDataSource control to display the site’s structure, assuming that there is a properly defined site map. For this hour, I am using the same site map used in Hour 20.

After you have created your site map, add the SiteMapDataSource and TreeView controls to the first column in the second row of the table, configuring the TreeView control to use the SiteMapDataSource.

By default, the content in a table cell is vertically placed in the middle of the cell. If the navigation region’s row is particularly tall, which can happen in pages that include lengthy content in the main region, whitespace will appear between the header region and the TreeView control. In fact, if the main region holds several pages’ worth of content, the visitor may have to scroll down to see the TreeView.

Often the common sitewide elements are formatted so that their position is not affected by the page-specific content. To accomplish this, we need to have the navigation region’s content appear at the top of the cell, rather than in the middle. This is configurable through the table cell’s valign property. To set this property, click inside the cell that makes up the navigation region, go to the Properties window, and set the valign property to top. This causes the navigation region’s content to be vertically aligned with the top of the table cell, regardless of how much or how little content is in the main region.

In addition to the vertical alignment, we should fix the navigation region’s width. If we don’t specify a fixed width, the navigation region’s width will depend on the width of the page-specific content in the main region. To set the width, load the navigation region cell’s properties in the Properties window and set the Width property to 200px.

Creating the Main Region and Footer Region

At this point the only two regions remaining are the main and footer regions. The main region already has the ContentPlaceHolder control (dragged into it after adding the table) but still needs the SiteMapPath control, which shows a breadcrumb. Drag this control from the Toolbox into the main region, placing it above the ContentPlaceHolder control. Finally, set the main region’s table cell’s valign property to top, just as we did with the navigation region. This ensures that regardless of how little content is in the main region, it will appear at the top of the cell.

Finally, add the content for the footer region in the bottommost row. But first merge the bottom row’s two cells, just like we did with the header region. My footer region contains three links: Legal, About Us, and Privacy Policy. I manually typed in these links, although you could opt to use three HyperLink Web controls, if you prefer.

Refer to Figure 22.2 to see the completed master page when viewed through the Visual Web Developer’s Design view.

Did you Know?

Creating an aesthetically pleasing sitewide design can be difficult if you are new to HTML or if you are not artistically inclined. Fortunately, there are many websites that offer pre-designed sitewide templates. One such site is www.OpenDesigns.org, which includes hundreds of free website designs that you can use in personal and commercial web applications.

With our master page created, the next step is to create a content page. A content page is an ASP.NET page that inherits from a master page. When creating a content page, we must define the content that belongs in the master page’s ContentPlaceHolder controls. We cannot add any additional content outside these regions. To create a content page, when adding a new ASP.NET page to the project, check the Select Master Page check box (see Figure 22.8).

Figure 22.8. Associate the new ASP.NET page with a master page by checking Select Master Page.

After you check Select Master Page and click the Add button, the Select a Master Page dialog box appears, as shown in Figure 22.9. This dialog box lists the master pages in the website project.

Figure 22.9. Select the new ASP.NET page’s master page.

After you choose a master page, the new ASP.NET page’s Design view shows the master page’s sitewide markup as grayed-out, uneditable content (refer to Figure 22.3). The master page’s ContentPlaceHolder controls are replaced with Content controls, which are editable regions whose content is unique to the particular ASP.NET page. You can type directly into the Content region or drag controls from the Toolbox.

If you create the content page before saving the master page, the content page’s Design view displays an error message explaining that the content page has one or more Content controls that do not correspond with ContentPlaceHolders. To remedy this, save the master page file; the content page’s Design view will then refresh and the error message will go away.

Listing 22.2 shows the declarative markup of the new content page. As you can see, the declarative markup for a content page differs substantially from the default markup for a regular ASP.NET page. The <%@ Page %> directive on line 1 includes a MasterPageFile attribute that indicates the path to the master page. And rather than having the typical markup, a content page has, in its place, a Content control for each ContentPlaceHolder control in the associated master page. The Content control’s ContentPlaceHolderID property associates the Content control with a particular ContentPlaceHolder control in the master page.

1: <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Legal.aspx.vb" Inherits="Legal" title="Untitled Page" %>
2:
3: <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
4: </asp:Content>
5: <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
6: </asp:Content>

Because our master page has two ContentPlaceHolder controls (head and ContentPlaceHolder1), the corresponding content page’s markup contains two Content controls: Content1, on lines 3 and 4, which is mapped to the head ContentPlaceHolder; and Content2, on lines 5 and 6, which is mapped to the ContentPlaceHolder1 ContentPlaceHolder.

When you visit a content page through a browser, the ASP.NET engine grabs the associated master page’s content. It then fuses in the markup and Web controls specified in the content page’s Content controls into the master page’s corresponding ContentPlaceHolder controls. Because this infusion of master page and ASP.NET page occurs when the page is visited through a browser, any changes to the underlying master page are immediately reflected in its content pages.

The ContentPlaceHolder controls in a master page represent the portions of the template that are editable on a page-by-page basis. Typically, these regions are customized in the content page. However, in some circumstances a content page may not want to customize a particular ContentPlaceHolder region, instead falling back on some default value specified by the master page.

For example, imagine that instead of having the title Welcome to My Website! displayed on each page in the header region, you wanted to allow each page to customize this title. However, you suspect that the majority of the pages will probably use the value Welcome to My Website! To accomplish this, you could add a ContentPlaceHolder control in the master page’s header region and specify the default value of the ContentPlaceHolder as the title Welcome to My Website! Then, in the content pages, you could indicate whether the page should use the master page’s default content or specify its own customized content.

To illustrate creating a default value in a master page’s ContentPlaceHolder control, let’s create a new master page called DefaultExample.master that has the same layout as the MasterPage.master master page we created earlier.

In the DefaultExample.master page, replace the text Welcome to My Website! with a second ContentPlaceHolder control. Set this ContentPlaceHolder control’s ID property to HeaderRegion. To specify a default value for the HeaderRegion ContentPlaceHolder, add the default content to the ContentPlaceHolder, much like you would on an ASP.NET page to customize a particular content region. Because we want the default title to still be Welcome to My Website!, type this text into the ContentPlaceHolder in the header region. That’s all there is to it!

<%@ Page Language="VB" MasterPageFile="~/DefaultExample.master" AutoEventWireup="false" CodeFile="DefaultExample.aspx.vb" Inherits="DefaultExample" title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeaderRegion" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>

A master page has all the functionality found in an ASP.NET page. That means that it can have Web controls in addition to static HTML. The Web controls in the master page can collect user input or retrieve data from a data source. For instance, the master page created in the “Creating a Master Page” section had SiteMapDataSource and TreeView controls, which queried and displayed the site’s structure based on the site map. Websites that support user accounts often allow visitors to log in from any page on the site. We could accomplish this by adding a Login control to the master page.

In addition to Web controls and static HTML, a master page can also have a server-side source code portion. This source code portion can contain event handlers for the Web controls added to a master page or code that is to run each time a content page is visited. To illustrate the server-side source code portion capabilities of master pages, create a new master page named CodeDemo.master.

Let’s add a Label Web control that displays the current date and time along with a mechanism to search the Internet from our site. Start by adding the Label Web control above the ContentPlaceHolder. Clear out its Text property and set its ID to CurrentDateTime. Next, type in the word Search and, after that, add a TextBox Web control, setting its ID to SearchTerm. Finally, add a Button Web control after the TextBox, setting its ID and Text properties to SearchButton and “Search,” respectively. After you have completed these steps, your screen should look similar to Figure 22.10.

Figure 22.10. The master page includes three Web controls: a Label, a TextBox, and a Button.

With these Web controls in place, we’re ready to add the server-side source code for the master page. Start by creating the Page_Load event handler. This event fires each time an associated content page is visited. Add the following code to the Page_Load event handler:

CurrentDateTime.Text = "It is now " & DateTime.Now

For the search interface, when the user enters a search term and clicks the Search button, a postback will ensue, and the Button Web control’s Click event will fire. For this example, let’s have the user search the Internet using Google. This can be accomplished by sending the user to http://www.google.com/search?q=searchTerm. To accomplish this, create an event handler for the Button’s Click event and then use Response.Redirect(url) to send them to Google’s site, passing in the search term through the querystring:

Response.Redirect("http://www.google.com/search?q=" & SearchTerm.Text)

Listing 22.3 contains the complete source code portion for the master page.

 1: Partial Class CodeDemo
 2:     Inherits System.Web.UI.MasterPage
 3:
 4:     Protected Sub Page_Load(ByVal sender As Object, ByVal e As  System.EventArgs) Handles Me.Load
 5:         CurrentDateTime.Text = "It is now " & DateTime.Now
 6:     End Sub
 7:
 8:     Protected Sub SearchButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles SearchButton.Click
 9:         Response.Redirect("http://www.google.com/search?q=" & SearchTerm.Text)
10:     End Sub
11: End Class

Testing the Master Page’s Functionality

At this point we have created a master page that displays the current date and time along with an interface for searching the Web through Google. Unfortunately, we’ve yet to test this master page’s functionality in a browser. To do so, we must create an ASP.NET page that is bound to this new master page.

Take a moment to create a new ASP.NET page, using CodeDemo.master as its master page. Add a short blurb to the Content control in the ASP.NET page and then view it in a browser. As Figure 22.11 shows, when visiting the page, you’ll see the current date and time displayed at the top of the page. Furthermore, when you enter a search term into the text box and click the button, you are whisked to Google’s search results for the entered search term. Figure 22.12 shows a user’s browser after he has entered the term Scott Mitchell into the search text box and clicked the button.

Figure 22.11. The current date and time is displayed at the top of the page.

Figure 22.12. Users can enter a search term and be taken to Google’s results page.

When creating a website, designers strive to have all pages share a common look and feel. This includes a consistent color and font scheme along with consistent user interface elements. For example, most designers strive to have navigation controls and login-related controls available on all pages throughout the site. Implementing a consistent, sitewide design with ASP.NET is easy and hassle-free, thanks to master pages. A master page contains both sitewide user interface elements along with regions that can be customized on a page-by-page basis. These editable regions are indicated in the master page by ContentPlaceHolder controls.

After a master page is created, an ASP.NET page can inherit from this master page. This is accomplished by selecting the master page when adding the ASP.NET page to the project. When an ASP.NET page is associated with a master page, it contains a Content Web control for each of the ContentPlaceHolder controls in the master page. The content placed in these editable regions is fused with the master page’s content when the page is viewed through a browser. Because the melding of the master page and the ASP.NET page is performed when the page is requested, any changes to a master page are automatically and instantly reflected in its content pages.

As we saw throughout this hour, Visual Web Developer provides rich design-time support for master pages. Creating a master page is tantamount to creating an ASP.NET page and can be done entirely through the Design view. When an ASP.NET page is associated with a master page, the Design view shows the master page’s sitewide content grayed out, indicating that it cannot be modified on this page.