Walkthrough: Using Nested Master Pages in ASP.NET

Walkthrough: Using Nested Master Pa...

Switch on low bandwidth view

Collapse All

Language Filter

This page is specific to

Microsoft Visual Studio 2008/.NET Framework 3.5

Other versions are also available for the following:

Microsoft Visual Studio 2010/.NET Framework 4.0

Walkthrough: Using Nested Master Pages in ASP.NET

This walkthrough describes how to create a master page that is nested inside another master page. Master pages function as templates that specify how pages will look.

You can nest master pages so that each page can have a flexible layout but also retain a consistent look on a Web site. For example, you could create a parent master page that has a company banner at the top and site navigation controls in a side column. You could then create a child master page for a specific department or product that uses the parent master page. It could also act as a master page for all other related department or product pages. In this manner, each product line or department would have a consistent look, and all pages would have a consistent overall look by using the parent master page. For more information about master pages, see ASP.NET Master Pages Overview.

This walkthrough illustrates the following tasks:

Creating a master page.
Creating a master page that is nested inside another master page.
Creating an ASP.NET page with content that you want to display in the master page.

Prerequisites

To complete this walkthrough, you will need the following:

Visual Studio 2008 or Microsoft Visual Web Developer Express Edition. For download information, see the Visual Studio Developer Center Web site.
The .NET Framework version 3.5.
Optionally, a .jpg, .gif, or other graphics file that you can use as a banner on the master page. It is recommended that the banner be no more than 780 pixels wide and 150 pixels in height. However, displaying a logo is optional and the graphic's exact size is not critical to completing the walkthrough.

Creating a Web Site

If you have already created a Web site in Visual Web Developer (for example, by following the steps in Walkthrough: Creating a Basic Web Page in Visual Web Developer), you can use that Web site and go to the next section, "Creating the Master Page." Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

Open Visual Web Developer.
In the File menu, click New Web Site.
The New Web Site dialog box is displayed.
Under Visual Studio installed templates, click ASP.NET Web Site.
In the Location box, type the name of the folder where you want to keep the pages of the Web site.
For example, you could type the following: C:\Tasks
In the Language list, click the programming language that you prefer to work with.
Click OK.
Visual Web Developer creates the folder and a new page named Default.aspx.

Creating a Parent Master Page

In this section, you create a parent master page. This page contains a banner and navigation controls that can be used throughout the site. Later, you will create another master page that will be used inside this parent master page. Child master pages can provide various layouts for pages while retaining the look that is established by the parent master page.

To create the master page

In Solution Explorer, right-click the name of the Web site, and then click Add New Item.
The Add New Item dialog box is displayed.
Under Visual Studio installed templates, click Master Page.
In the Name box, type ParentMaster.
Clear the Place code in separate file check box.
In the Language list, click the programming language that you prefer to work with.
Click Add.
The new master page is opened in Source view.

Adding Elements to the Parent Master Page

At the top of the master page is an @ Master declaration instead of the @ Page declaration that is ordinarily found at the top of ASP.NET pages. The body of the page contains a ContentPlaceHolder control, which is the area of the master page where replaceable content will be merged with content pages at run time. You will work more with content placeholders later in this walkthrough.

Adding Graphics to the Parent Master Page

Before you can incorporate graphics into the parent master page, you have to add the graphic files to the Web site.

Create a graphic that is 780 pixels wide and 150 pixels in height for the banner and a graphic that is 780 pixels wide and 50 pixels in height for the footer. The graphics are used to show how graphics on the parent master page will appear in a nested master page. If you do not have these graphics, you can create them in Microsoft Paint or another graphics program.

To add an existing graphic file to the Web site

In Solution Explorer, right-click the name of the Web site, and then click Add Existing Item.
The Add Existing Item dialog box is displayed.
Select the graphic files that you created.
Click Add.

On the parent master page, you add two simple graphics, one for a banner and the other for a footer. These graphics let you see that the parent master page is being used in the nested master pages that you will create later in this walkthrough.

To add banner and footer graphics to the parent master page

In Source view, immediately after the opening <form> tag, add a div element that contains an img element for the banner graphic.
For example, if you created a graphic named Banner.gif, the markup to add this graphic would resemble this:
```
<div id="banner">
  <img src="banner.gif" alt="banner graphic" />
</div>
```
Immediately before the closing </form> tag, add a div element that contains an img element for the footer graphic.
For example, if you created a graphic named Footer.gif, the markup to add this graphic would resemble this:
```
<div id="banner">
  <img src="footer.gif" alt="footer graphic" />
</div>
```
Save the master page.

Notice that you have not added anything inside the ContentPlaceHolder control. The next set of master pages that you create will be inside the ContentPlaceHolder control.

Creating a Child Master Page

To nest one master page inside another, you must create another master page. The new master page will be inside the content placeholder of the parent master page. The child master page lets you arrange the page in different ways while maintaining a consistent appearance that is established by the parent master page.

To create the child master page

In Solution Explorer, right-click the name of the Web site, and then click Add New Item.
The Add New Item dialog box is displayed.
Under Visual Studio installed templates, click Master Page.
In the Name box, type ChildMaster.
Clear the Place code in separate file check box.
Select the Select master page check box.
In the Language list, click the programming language that you prefer to work with.
Click Add.
The Select a Master Page dialog box is displayed.
Select the parent master page that you created earlier in this walkthrough.
Click OK.
The new master page is opened in Source view.

Notice that the @ Master declaration at the top of the new master page indicates that it references a master page.

Adding ContentPlaceHolder Controls to the Child Master Page

Because the child master page has another master page associated with it, it contains two Content controls. The first content placeholder can be used to add information to the page that would ordinarily appear in the head element, such as a script element. Inside the second Content control you can add a ContentPlaceHolder control. This lets an ASP.NET page that uses the child master page provide the content for the page. You can add other page elements inside the Content control. The child master page can contain additional page elements to provide a consistent look to pages that use the child master page.

To add ContentPlaceholder controls to the child master page

Open or switch to the child master page
Switch to Source view.

Add the following markup inside the second Content control section in order to create ContentPlaceHolder controls:

<div id="2col">
  <asp:ContentPlaceHolder ID="leftcolumn" runat="server">
  </asp:ContentPlaceHolder>
  <asp:ContentPlaceHolder ID="rightcolumn" runat="server">
  </asp:ContentPlaceHolder>
</div>

Save the file.

The child master page now has ContentPlaceHolder controls that contain markup from an ASP.NET page that uses the child master page.

Creating a Content Page That Uses the Child Master Page

In the previous steps, you created a master page that is nested inside another master page. The resulting child master page lets you use the UI elements of the parent master page. It also provides additional UI elements in the second master. In this walkthrough, you added graphics to the parent master page and placeholders in the second master page. To see the nested master pages in action, you have to create an ASP.NET Web page that uses the child master page. The new page that you create that uses the child master page will automatically contain a Content control for each ContentPlaceHolder control that you created in the child master page.

To create a page that uses the child master page

In Solution Explorer, right-click the name of the Web site, and then click Add New Item.
The Add New Item dialog box is displayed.
Under Visual Studio installed templates, click Web Form.
In the Name box, type Tasks.
Select the Place code in separate file check box.
Select the Select master page check box.
In the Language list, click the programming language that you prefer to work with.
Click Add.
In the Select a Master Page dialog box, select the child master page that you created earlier in this walkthrough.
Click OK.
The new content page is opened in Source view.
Change the ID of the first Content control to leftcolumn and change the ID of the second Content control to rightcolumn.
Add text or page elements to the left or right column Content controls.
Press CTRL+F5 to run the Web site.
Notice that the Tasks.aspx page displays a combination of all the elements that you created in this walkthrough. This includes the graphics on the parent master page, the two-column layout on the child master page, and text and controls you added to the Tasks.aspx page.

Next Steps

Now that you have seen how nested master pages work, you can create other child master pages that use the parent master page. The child master page that you created in this walkthrough created a two-column layout. Another child master page that you create for the parent master page could create a single-column layout or some other layout.

Tasks

Walkthrough: Creating and Modifying a CSS File