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.

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

Content Pages

Once you have moved the common UI elements and code to the master page, only the page specific part will remain in the ASPX pages. This page-specific content is placed within the content control. In an ASPX page that has a master page, no content can be outside the content control; otherwise, ASP.NET would not know how to merge this page with the master page. For the ASPX page, you specify which master page to use in the page's @ Page directive by including a MasterPageFile attribute that points to the master page to be used. The content pages for your Home and About Us pages are:

Home.aspx

<%@ Page MasterPageFile="~/SiteMaster.master"
    CodeFile="Home.aspx.cs"
    Inherits="Home"
    Title="Home Page" %>
<asp:Content ID="Content1"
     ContentPlaceHolderID="myHolder"
     runat="Server">
   Welcome to Falconsoft Systems - a company formed by people
   having worked in the industry for a good many years. <p />
</asp:Content>

AboutUs.aspx

<%@ Page MasterPageFile="~/SiteMaster.master"
         CodeFile="AboutUs.aspx.cs"
         Inherits="AboutUs"
         Title="About Us Page" %>
<asp:Content ID="Content1"
     ContentPlaceHolderID="myHolder"
     Runat="Server">
   About Us - A group of IT professionals who shared a common
   vision and outlook to software design and development came
   together to form this company. <p />
</asp:Content>

AboutUs.aspx.cs

using System;
using System.Web;

public partial class AboutUs : System.Web.UI.Page
{
}

Default Content

Along with layout and code that applies to all pages, the master page can also supply default content, which can be overridden by content pages or displayed if not overridden. This is achieved by simply inserting the content within the ContentPlaceHolder element. For example, your MySite.master page could have the following default content:

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
   <h2>Welcome</h2>
   Welcome to my site, where you'll find lots of interesting stuff.
</asp:ContentPlaceHolder>

Creating Master Pages through Visual Studio

In Visual Studio 2005, the way one creates an ASP.NET application has been changed a little. It can be created from File->New->Web Site. Another change made is that it's not mandatory to have IIS on the ASP.NET development machine because Visual Studio installs an ASP.NET Development Server in which the application can run.

After creating a new Web site, one can add a master page from Website->Add New Item. The Add New Item screen is shown below:

Figure 4: The Add New Item screen to add a master page to the Web project

After the master page has been added, you can add a Web form that uses the master page. To do this, check the Select master page option in the Add New Item screen, as shown below:

Figure 5: Check the Select master page option to add a Web form that uses a master page

Runtime Behavior of Master Pages

The client never requests the master page directly and the master page is not known to the client. The client requests the content page (ASPX pages); if there is a master page associated with it, the master page is merged into the content page and treated as a control in the content page. ASP.NET processes a page request in the following sequence:

  1. ASP.NET fetches the page.
  2. ASP.NET determines whether the content page references a master page.
  3. If so, ASP.NET fetches the master page associated with the content page.
  4. ASP.NET merges the master page into the content page and treats it as a control in the content page.
  5. ASP.NET renders results to the browser.

Some Useful Links

1. This book has a great chapter on master pages. (You can download master page chapter for free!)
A First Look at ASP.NET v 2.0

2. The master pages section on ASP.NET Web:
Visual Web Developer 2005 Express Edition Guided Tour



About the Author

Manoj Agarwal

Manoj Agarwal has over a decade of industry experience on a wide spectrum of technologies. He currently runs a software company called Falconsoft Systems which specializes in consulting, application development and training mainly in Microsoft .NET. Manoj was among the top-10 winners at the nationwide Microsoft Technology Adopter Challenge.

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: May 7, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT This eSeminar will explore three popular games engines and how they empower developers to create exciting, graphically rich, and high-performance games for Android® on Intel® Architecture. Join us for a deep dive as experts describe the features, tools, and common challenges using Marmalade, App Game Kit, and Havok game engines, as well as a discussion of the pros and cons of each engine and how they fit into your development …

  • With JRebel, developers get to see their code changes immediately, fine-tune their code with incremental changes, debug, explore and deploy their code with ease (both locally and remotely), and ultimately spend more time coding instead of waiting for the dreaded application redeploy to finish. Every time a developer tests a code change it takes minutes to build and deploy the application. JRebel keeps the app server running at all times, so testing is instantaneous and interactive.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds