An In-Depth Coverage of ASP.NET 2.0’s Master Pages: Part 1 of 3

Version 2.0 of the .NET Framework has a truckload of new features, and a significant part of these are in ASP.NET 2.0. Among the new features in ASP.NET 2.0, the one that excites me the most and that I feel will be the most useful, is Master Pages.

This is a series of three articles in which I will cover master pages in-depth—right from an introduction to master pages to migrating an ASP.NET 1.1 application to use master pages. I will also talk of the common problems you might encounter.

Using Master Pages to Create a Consistent Layout

The different pages in a Web site typically have the same look and feel; for example, the header, footer, and menu bar would be the same for the pages although the content changes from page to page. The way this was achieved was by copying common code and ASPX file sections in the different pages, including files, using user-defined controls, using frames, and so on. ASP.NET 2.0 provides a solution for this. You can use master pages to create a consistent page layout for your Web site or for a group of related pages. On the master page, you place the common UI elements and code; you then can create individual content pages that contain the content you want to display. When users request the content pages, those pages merge with the master page to produce output that combines the layout of the master page with the content from the content page.

A Simple Example

Here is an example that would give a clear picture of the use of master pages. This sample is a scaled-down version of a typical Web site; it has just two pages: a Home page and an About Us page. Both these pages have a consistent look to them; they have the same header and footer. The common part is put into the master file. The concept of master pages will be explained using this example.

Figure 1: The sample Web site’s Home page. The common UI elements and code will be moved to a master page.

Figure 2: The sample Web site’s About Us page. The common UI elements and code will be moved to a master page.

The Master Page

A master page is an ASP.NET file with the extension .master, such as SiteMaster.master. The master page is similar to a regular ASPX page but with the following changes:

  1. Instead of the @ Page directive, there is a special @ Master directive.
  2. For an ordinary ASPX page, the class in the code-behind file inherits from System.Web.UI.Page whereas for the master page the class in the code-behind file inherits from System.Web.UI.MasterPage. Both these changes are taken care of by Visual Studio when you create your Web form and master page through it.

As on an ordinary ASPX page, on the master page one can put static text, HTML elements, and server controls. Master pages will have one or more ContentPlaceHolder controls. The pages in a Web site that share a common look and feel use the same master page and on this master page the common UI elements and code is put. The content pages (ASPX pages) have Content controls that provide content for the ContentPlaceHolder controls of the master pages. The master page for the sample Web site is:

Figure 3: SiteMaster.master b: the master page for your sample Web site.

SiteMaster.master.cs
using System;
using System.Web;

public partial class SiteMaster : System.Web.UI.MasterPage
{

}

Note: Because there is no common code in the sample, the SiteMaster class is empty. Also, notice that the master page class is derived from the class MasterPage and not the Page class, as happens in an ordinary ASPX class.

More by Author

Must Read