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).
