Sams Teach Yourself ASP.NET 2.0 in 24 Hours, Complete Starter Kit

With our master page created, the next step is to create an ASP.NET page that inherits from this master page. When we're creating such a page, our responsibility will be to define the content that belongs in the master page's ContentPlaceHolder controls. We won't be able to add any additional content outside these regions. To indicate that an ASP.NET page inherits a master page, when adding a new ASP.NET page to the project, simply check the Select Master Page check box (see Figure 21.8).

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

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 21.3). Where the master page's ContentPlaceHolder controls were, however, are 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 prefer working through the Source view, entering the HTML markup and Web controls manually, you'll no doubt notice the default declarative markup for an ASP.NET page that inherits a master page (see Listing 21.3). The <%@ Page %> directive on line 1 includes a MasterPageFile attribute that indicates the path to the master page.

Rather than having the typical HTML markup, a new ASP.NET page that inherits a master page has, in its place, a Content control for each ContentPlaceHolder control in the associated master page (lines 2 and 3). The Content control's ContentPlaceHolderID property associates a Content control with a particular ContentPlaceHolder control in the master page.

Listing 21.3. The Markup of an ASP.NET Page That Inherits a Master Page

When you visit an ASP.NET page that inherits a master 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 ASP.NET page's Content control into the corresponding master page's ContentPlaceHolder control. 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 the pages that inherit from it.

Having an Existing Page Inherit from a Master Page

Creating a new ASP.NET page that inherits from a master page is easy enough: Just check a check box and choose the master page. However, taking an existing, master page-less ASP.NET page and having it inherit from a master page is, unfortunately, not as simple. To take an existing page and have it inherit an existing master page, we must do two things:

• Add a MasterPageFile attribute to the page's <%@ Page %> directive.

• Create a Content control for each ContentPlaceHolder control in the master page, with the page's existing HTML markup and Web controls moved into the appropriate Content controls.

The first step is simple enough to accomplish. Start by opening the ASP.NET page that you want to have inherit a master page and go to the Source view. Next, place your cursor in the <%@ Page %> directive and type in MasterPageFile=. At this point, a drop-down list should appear containing the various master pages in your project. Simply choose which master page file you want to use and press the Tab key. In the end, the <%@ Page %> directive should include an attribute that looks like MasterPageFile="~/masterPageFileName".

With the MasterPageFile attribute specified, the final step is creating a Content control for each of the master page's ContentPlaceHolders and moving over the appropriate markup. Assuming the existing page already has content, what I do is typically cut all of the content inside the Web Form and paste it into Notepad. After I have removed the content from inside the Web Form, I delete all the content in the web page except for the <%@ Page %> directive. (Recall that the Web Form is denoted by <form runat="server">.)

Finally, I go to the Design view of the ASP.NET page. Because the ASP.NET page now inherits the master page, it will show the master page's sitewide content as noneditable along with the content regions. To create the Content controls, right-click on the content regions in the Design view and choose the Create Custom Content menu option. After you have created the Content control for each of the ContentPlaceHolder controls in the master page, go back to the Source view and paste the code saved in Notepad back into the appropriate content regions.

To help make these concepts more concrete, let's look at a real-world example. Imagine that we had the page shown in Listing 21.4 and wanted to have it inherit from the MasterPage.master master page. (This markup shown in Listing 21.4 is the actual page content from an example we looked at in Hour 15, "Displaying Data with the Data Web Controls.")

Listing 21.4. A Sample ASP.NET Page

We would start by going to the <%@ Page %> directive on line 1 and adding the attribute MasterPageFile="~/MasterPage.master". Next, we would cut and paste the content inside the Web Formthat is, the content spanning from line 11 through line 36into Notepad. We would then remove all content from the ASP.NET page except for the <%@ Page %> directive on line 1. Then, from the Design view, we'd right-click on the master page's single content region and choose Create Custom Content. After we have completed all of these steps, our ASP.NET page's declarative markup would look like so:

[View full width]

We'd complete this process by pasting in the saved content from Listing 21.4 (specifically lines 1136) into the Content Web control.