I finally had an opportunity to utilize version two of the
.NET Framework when a client decided to redesign an existing ASP site using
ASP.NET 2.0. Many new features help to streamline development; one of my
favorite features is master pages. I’ll describe the master pages design
element and explain how you may use it in a project.

Centralized design

There are many ways to separate design elements to simplify
site maintenance. The following list examines three of these methods:

  • CSS: Cascading Style Sheets let
    you separate content and presentation, allowing you to maintain the
    look-and-feel of a site in a central location.
  • Controls: ASP.NET Web controls
    allow you to develop pieces of a site that you may reuse within one or
    more Web forms. They are also another way to centralize code.
  • SSI: Server-Side Includes offer
    another way to componentize Web site content.
    You may include the pieces in more than one file and centrally maintain
    them.

It has always been difficult to easily maintain the overall
design of a Web site. Many developers utilized template systems for their
ASP.NET 1.1 sites, but these were custom-developed in-house or via a third
party. The ASP.NET 2.0 master pages approach provides the necessary
functionality with no extra work.

Weekly .NET tips in your inbox

TechRepublic’s free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET.

Automatically sign up today!

Master pages

ASP.NET master pages allow you to easily create and maintain
a consistent look and feel for a Web site. You can use a master page to define
the presentation of the complete site or a subset of pages within a site. If
you use Visual Studio 2005, it’s easy to add a master page to a project via the
Add Item selection. A master page (which uses the .master file extension) has a
different page directive than a usual Web form, as you can see below:

<%@ Master Language="C#" %>

The language attribute varies with your language choice (VB
for VB.NET). You can choose to use the code behind structure or place the code
directly in the page. Visual Studio includes a checkbox (Place Code In Separate File) for signaling if code behind is used. The CodeFile attribute of the page directive can be used to
specify the code behind file with the Inherits attribute pointing to the class
name. The following line demonstrates the syntax:

<%@ Master Language="C#"  CodeFile="mp.master.cs" Inherits="mp" %>

Pages that utilize a master page are called content pages,
which are not special design elements—they are normal ASP.NET Web forms. The
only difference is the page directive includes a MasterPageFile
attribute that points to the necessary master page. If you’re using Visual Studio, a
checkbox (Select Master Page) allows you to select a master page (if used) for
a Web form; it also allows you to select from master pages defined in the
project. You can designate master pages at the application level (pages element
with web.config) as well as the folder level (web.config in specific folder).

Master pages contain all top-level HTML elements. This
includes the html, head, body, and form HTML elements, so content pages should
not contain these elements. The head element must contain the runat=server attribute with its head text replaced by the
header text from the content page during runtime.

Content placement

Master pages contain content placeholder controls to accept
the output from content pages. The controls have the following syntax:

<asp:contentplaceholder id="Main" runat="server" />

In addition, content pages utilize content controls to
specify content areas that will be inserted into its master page. Content
controls use the following syntax:

<asp:Content ID="ContentID" ContentPlaceHolderID="Main" Runat="Server">

Your content goes here.

</asp:Content>

The id attribute of the master page’s placeholder element
corresponds to the ContentPlaceHolderID attribute of
the page’s content element. The data or content between the opening and closing
asp:Content tags are inserted into the correct
location in the master page.

ASP.NET processes master pages using the following runtime
sequence:

  • A
    content page is loaded via its URL.
  • The
    page directive is processed. If the directive references a master page,
    the master page is read. Both pages are compiled the first time they are
    loaded/requested.
  • The
    master page with the updated content is merged into the control tree of
    the content page.
  • The
    content of individual Content controls is merged into the corresponding ContentPlaceHolder control in the master page.
  • The
    merged page is loaded and presented.

Listing A
contains an example. Here are a few notes about the master page:

  • The
    header text should not be altered. It will be replaced automatically by
    the header text of the content page.
  • The page contents contain two div elements that define the header and footer areas of a page. The content placeholders are in the middle of the page between the header and footer elements.
  • The
    page contains two contentplaceholder elements.
    Text from content pages may be directly placed in these areas of the page.

Now content pages may utilize the master page structure. The
Web form in Listing B is designated
as a content page that uses our example master page. Notice that the content page contains no top-level HTML
entities like html, head, body, or form—these are controlled by the master page.
The ContentPlaceHolderID attributes of the asp:Content elements correspond to
the id attribute of the asp:contentplaceholder
elements on the master page.

Coding

As far as coding goes, a content page behaves like a
container for the master page. An easy way to approach it is the master page’s
behavior is analogous to a user control within a page. However, you can
reference public master page members from content page code.

Master your site’s design

ASP.NET 2.0 master pages allow you to easily separate a site’s
design into global and page-specific features. The global elements may be
easily set up in a master page and assigned to individual pages. This allows
you to reuse your design across the entire site or a group of pages, while
making it easy to edit the design in one central design element.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Miss a column?

Check out the .NET Archive, and catch up on the most recent editions of Tony Patton’s column.