Master pages in ASP.NET2 allow you to apply consistent look to all the web pages of your web site. You can use more then one master page on your website. When more than one master page is used, you can make use of nested master pages. This type of requirement typically arises in situations when you have two important entities that need to be referred together.

Introduction:

Master pages in ASP.NET2 allow you to apply consistent look to all the web pages of your web site. You can use more then one master page on your website. When more than one master page is used, you can make use of nested master pages. This type of requirement typically arises in situations when you have two important entities that need to be referred together.

For example, consider your company has a number of business partners or franchise companies. In such a scenario, you can define the layout and design for the standard elements such as logos, menus, copyright notices on the main master page of your company’s website. The franchise companies can then also define their own master pages and then nest their master page with the master page of your company.

This article briefly discusses about nested master pages. It explains nested master pages by creating a simple main master page, a child master, and a content page. The article further demonstrates how the different masters can be nested within one main master page and can be referenced in a content page.

Understanding Nested Master Pages:

When a master page contains a reference of another master page, then it is called a nested master page. A single master page can have a reference of multiple master pages or a number of master pages can be componentized into a single master page. There is no limit to the number of child master pages in a project. The child masters can contain some unique properties of their own, besides using the layout and other properties of their parent master. All master pages, be it a child or a main master page, have the extension .master. However, child master pages cannot be designed using the design view in ASP.NET 2.0. You always need to use source view to create nested master pages in ASP.NET 2.0.

Building Nested Master Pages:

To understand how nested master pages are created and how they work, we will create a main master page and then a child master page. We will then create a content page that will be inherited from the child master file and will use both the masters as nested masters.

Creating the Main Master Page:

To create the main master page, follow the steps given below:

1. Create a new website.
2. Right click the application in the solution explorer and select Add New Item from the menu that appears.
3. Select Master Page from the Visual Studio installed templates dialog box.
4. Provide the name of the master page in the Name field as MainMaster.master.
5. Select Place code in separate file if it is not already selected and then select the Language for your master page. This will generate the code-behind in the language you have selected.
6. Click Add, as shown in Figure 1:

 
 

The master page will be added to your project.

7. Switch to Design view of the Master page, MainMaster.master (in this example) to design your master page.
8. Design your master page by adding a table having two columns and three rows and setting the background color of the table.
9. Add a menu to the middle left cell of the table
10. Drag and drop the content place holder to the middle cell of the table.
11. Add a heading to the page “Welcome to Global Inc. Master Page” in the middle cell of the top row.
12. Add a logo image to the top left cell of the table, as shown in Figure 2.

 

Alternatively, you can write the code for your master page, as follows.



Creating the child master page:

1. Right click the application in the solution explorer and select Add New Item from the menu that appears.
2. Select Master Page from the Visual Studio installed templates dialog box.
3. Provide the name of the master page in the Name field as ChildMasterPage.master.
4. Select Place code in separate file if it is not already selected and then select the Language for your master page. This will generate the code-behind in the language you have selected.
5. Click Add.

The child master page called ChildMasterPage.master will be added to your project.

6. Open the ChildMasterPage.master and add MasterPageFile="~/MainMaster.master" in the "@Master" directive to associate the child master with the parent master, as shown in the code below:


7. Remove all the code below the @Master directive and add the <asp:Content> control.
8. Add a <asp:contentplaceholder> controls under the <asp:Content> control.
9. Ensure that ContentPlaceHolderID property of a <asp:Content> points to the Contentplaceholder control of <MainMaster.master>.
10. Add a heading “Welcome to the Franchise Master Page”   

Alternatively copy the code given below to the ChildMasterPage.master file


Add a Content Page:

1. Add Content page by right clicking the "ChildMasterPage.Master" in solution explorer.
2. Add a login control to the content page.



3. Compile and execute the application.

The content page will appear, as shown in Figure 3:
 
    
                
Conclusion:

This article provides an overview of nested master pages, which is a new addition to ASP.NET2. The article further explains the creation and usage of nested master pages by creating a main master page, a child master page, and a content page. 

[Download Sample]