Introducing ASP.NET 2.0 Master Pages

Building individual Web pages is easy. Building Web pages that adhere to specific site and application guidelines is much more difficult. Microsoft has come to the rescue with Master Pages, which builds page template capability directly into ASP.NET 2.0. This article shows you how to use the new Master Pages feature to create consistent page layouts for your Web applications.

by Thiru Thangarathinam

Dec 15, 2003

Page 1 of 3

WEBINAR:

On-Demand

Application Security Testing: An Integral Part of DevOps

~~Watch~~→

SP.NET 2.0 introduces a new concept known as Master Pages, in which you create a common base master file that provides a consistent layout for multiple pages in your application. To create a Master Page, you identify common appearance and behavior factors for the pages in your application, and move those to a master page. In the master page, you add placeholders called ContentPlaceHolders where the content (child) pages will insert their custom content. When users request the content pages, ASP.NET merges the output of the content pages with the output of the master page, resulting in a page that combines the master page layout with the output of the content page. In this article, you'll take a look at the theory behind the master pages and see how to leverage the new Master Pages feature in a Web application. Along the way, you'll also see some of the advanced concepts of master pages, such as accessing master page controls from code in content pages, nesting master pages, and configuring master page for an entire Web application.

Master Pages Architecture
To use Master Pages in your ASP.NET Web application, you create a Master Page for the site layout and design and create Content Pages for each content resource, and then connect the content pages to the master pages using the new controls and attributes supplied by ASP.NET 2.0. After you make that connection, ASP.NET will serve up the page by merging the content from the master page with the content of the content pages.

What You Need

The Master Pages feature is available only in ASP.NET 2.0, which ships with Visual Studio.NET Whidbey, Alpha Edition or later.

The master page defines content areas using the ContentPlaceHolder control, and the content pages place their content in the areas identified by the ContentPlaceHolder control in the master page. Pages that use a master page to define the layout may place content only in the areas defined by the ContentPlaceHolder, thus ensuring a consistent site design. Master pages have a .master file extension. Apart from the content required to define the standard look and feel of the application, the master pages also contain all the top-level HTML elements for a page, such as <html>, <head>, and <form>. Finally, each master page contains one or more content placeholders that define regions into which the child pages render content.

Walkthrough: Creating Master and Content Pages


Figure 1. Master Page Picker Dialog: The Master Page Picker lists all the master pages available in the current Web site, letting you pick the master page you want to use.

In Visual Studio.NET Whidbey, you create a master page by opening the Add New Item dialog box, and selecting the Master Page item from the list. For this example, create a new project, add a master page, and then modify the master page code so it looks like the code in Listing 1.

The code in Listing 1 looks similar to a normal ASP.NET page; it contains simple HTML and ASP.NET controls. The main difference between this page and a standard ASP.NET page is the use of the Master directive and the file suffix .master. Note the use of the ContentPlaceHolder control, which dictates where content pages can insert content. The id attribute uniquely identifies the placeholder, allowing you to put more than one placeholder in a master page. The master page can contain code as well as content, which allows it to render contents dynamically, or perform other generic processing. The code defines a header, a left navigation bar, and the page body using HTML table elements. The page body table contains an asp:contentplaceholder control, which you'll link to all the content pages so that the content pages can insert their own content. Any content page that uses the master page in Listing 1 will automatically inherit the header, left navigation and the body from the master page.

After creating the master page, create a content page that leverages the master page. To create a content page using Visual Studio .NET Whidbey, select the Content Page item from the Add New Item dialog box. You'll see the Master Page Picker dialog box (see Figure 1) that lists all the master pages available in the Web application.

After creating the content page, modify it to look like the following code.

   
<%@ page language="C#" master="~/Intro.master" %>
   <script runat="server">
     void Page_Load(object sender, 
       System.EventArgs e)
     {
       lblMessage.Text = "This content is 
         generated from the content page";
     }    
   </script>
   
   <asp:content id="Content1" contentplaceholderid="middleContent" runat="server">
      <asp:label runat="server" 
         id="lblMessage"></asp:label>  
   </asp:content>

The content page code is very simple and straightforward. First define the Page directive, in which you must specify a new attribute named master used to identify the name of master page associated with the content page. The page contains an asp:content control linked to the master page's asp:contentplaceholder using the contentplaceholderid attribute. In the Page_Load event, the code sets the text of the server-side Label control defined within the asp:content control. If you navigate to the Design view of the content page, you will find that you can see the master page content, but they're grayed out. You can edit only the content within the asp:content control (see Figure 2).