Master Pages in ASP.NET 2.0

In this intorductory series I will show you how to use the new Master Pages feature of ASP.NET 2.0 to manage the look and feel of your website from a single location. In the second installment of the series I will show you how to add Theme support to enable quicly modifying the look and feel of your website, either declaritively, or programatically based on some environment context. In this first installment I will discuss what Mast Pages are, and show you how to create and apply them.

Overview

In ASP.NET v1.x one of the missing features was the abbility to create a sort of template for your website that enabled you to define the look and feel in one location, and only change the content from page to page. In essence, there was no place to define the chrome of the website - the top and bottom banners or navigation, etc. The following image highlights the "chrome" on dotnetjunkies.com.

There were a number of custom solutions for making a site master that emegred after the release of ASP.NET v1.x. In fact, dotnetjunkies.com used a custom master page solution to keep the chrome of the website consistent through out all of the pages. In ASP.NET v2.0 Microsoft added support for Master Pages.

A Master Page is somewhat of a template for multiple pages on your website. In a Master Page you define the layout of the pages, including content that is on all of the pages, such as navagation or advertisements, as well as editable content regions (such as the blacked out area in the image above). Each .aspx page that implements the Master Page simply references it in the @Page directive. The editable regions of the master are then available to the .aspx page through a Content control, which I will discuss later.

Creating a Master Page

A master page is nothing more than a text file with the .master extension - much like how an ASP.NET page is a test file with the .aspx extension. In the Master page you indicate that the content of the file is to be treated as a Master page with the @Master directive, as shown here:

In the above directive, the page is specified as a Master Page (with the @ Master directive), written in C#, to be compiled with the code-behind page MyMaster.master.cs, which has the class name MyMaster.

Once the page has been specified as a Master page, the rest works very much like any other ASP.NET page. You can use both HTML and ASP.NET controls/user controls to create the layout you desire. Here is a simple example.

The basic layout of a page is defined within the Master page. In this example I didn't really add anything to the master page other than a DIV for the title and a DIV for the copyright info. Once implemented, the title and copyright info will be rendered on ever page that uses this master page. If I wanted to (and I will later) I could even add more HTML and ASP.NET Web Controls to the master page. I can't browse to a master page; a master page must be implemented by an ASP.NET Web Form in order to be seen. We'll get to that in just a minute.

The ContentPlaceHolder Control

You may notice that I added an HTML comment (<!-- -->) to the master page. The comment indicates that the main body content will be placed in the location of the comment. THis was just a place holder until we go to this point. WIthin a master page you can specify zero or more "editabe regions." These regions are the places where you want to add either content that is static to the page it is on, but different from one page to the next, or all together dynamic content. To do this, you specify the regon by adding a ContentPlaceHolder control.

The ContentPlaceHolder control is used to define a specified region of the page as editable content. You must provide a unique ID value for the ContentPlaceHolder - this will be important later on. You may also define default content for the region - that is, content to be displayed on the page if no other content is specified. This is done by placing the content between the opening and closing tags of the ContentPlaceHolder.

Applying the Master Page

Up to this point I have been working on the MyMaster.master page. I specified it as a master page with the @ Master directive, and I added some static content. Lastly, I specified an editable region on the master page by adding a ContentPlaceHolder control. The next step is to implement the master page on an ASP.NET Web Form. Here, I have created a Web Form named Default.aspx (yes, this is the entire text of the file).

What you should notice is that the file is only one line long! This is different from a traditional ASP.NET Web Form - most of the normal content (i.e. HEAD, BODY, and FORM elements) are missing. Instead, all you see is the @ Page directive. Since this page implements the MyMaster.master master page, which already includes all of the critical page emlements, I don't need to (and shouldn't) duplicate them. You can see where I specified the master page implementation in the @ Page directive, with the MasterPageFile attribute (MasterPageFile="~/MyMaster.master").

Here is the rendered Default.aspx page.

The Content control is how I specify the content for the "editable regions" I created in the master page file. In the master page file I gave my ContentPlaceHolder the ID value of "MainBodyContainer." In the Default.aspx page file I added a Content control and specified the ContentPlaceHolderID value of "MainBodyContainer." This marries the Content control to the ContentPlaceHolder control.

Perhaps you can see how this enables multiple content regions per master page? Here is the rendered Default.aspx page.

Multiple Master Pages

You can create multiple master pages and use each one for a different purpose. Perhaps you have an annonymous guest master page and a member master page, each redering different content. Perhaps you have master pages based on the time of day. Be creative.

You have three different ways to specify which master page is to be used.

1. At the page-level using the @Page dierective (as I did previously)
2. At the folder-level using a Web.config
3. At the site-level using the root Web.config

In the event that a master page is defined in multiple places (i.e. in a Web.config anf in the @Page directive), the definition closest to the user wins. That is to say, the folder-level definitions superceeds the site-level definition, and the page-level definition superceeds the folder-level definition.

Here is how you implement the Master Page in a Web.config:

Summary

In this article I showed you how to create and implement a Master Page in ASP.NET 2.0. You learned how to create a .master file and use it to define the standard layout for your web pages. Next you leaned how to define editable content regions with the ContentPlaceHolder control. Then you learned how to implement the master page in a Web Form, and how to use the Content control to marry custom content to a specific ContentPlaceHolder control. Lastly you learn the three different places you can define how a web form uses a master page.

In a couple weeks I will follow up this tutorial with a tutorial on Themes in ASP.NET. Master Pages, paired with Themes, give you a great deal of control over how to render your web site.