Software Development

Centralize site design with ASP.NET 2.0 master pages

Web developers are always looking for ways to ease site maintenance and nothing saves time like negating the need to edit multiple pages when a design changes. ASP.NET 2.0 allows you to centralize site design with master pages. Learn more about this exciting new feature.

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.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

0 comments

Editor's Picks