When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article
Jobs

ASP ASP.NET ASP FAQs Message Board Feedback ASP Jobs
 
Print this Page!
Published: Wednesday, April 7, 2004

Creating Template-Driven Web Sites with MasterPages

By Scott Mitchell


This Article Covers ASP.NET Version 1.x
MasterPages will be officially introduced in ASP.NET version 2.0. This article, written April 7th, 2004, gives an overview of what MasterPages are and their implementation in ASP.NET 1.x Web applications. There may be changes to the MasterPages implementation in ASP.NET version 2.0 than what are discussed here. (For an article on the MasterPages implementation planned for ASP.NET version 2.0 be sure to read Master Pages in ASP.NET Whidbey and A Sneak Peak at MasterPages in ASP.NET 2.0.)

- continued -

Introduction


When graphic designers create a layout for a Web site, they typically break down page layout into distinct regions. For example, as the screenshot to the right shows, all of Amazon.com's Web pages are divided into various sections, such as a header (circled in red), a left navigational region (circled in brown), a center content area (circled in green), and a right "recent news" area (circled in purple).

When building an ASP.NET Web application, you'll usually use a "header" and "footer" User Control. The header User Control would contain the starting <html> element, along with content that appeared at the top of every page. The footer User Control would contain the shared content that appeared at the bottom of every page, like a site map, and closing </html> and related tags. This works well if your site layout can be easily divided into a top HTML portion and a bottom HTML portion, but what if this is not the case? Or, what if you want to produce a more fluid layout for your site, perhaps one that a visitor to your site could customize just for her?

For intermixed content and static HTML along with site customization features, using just a simple top and bottom User Control will require a lot of tricky CSS positioning and code. A much simpler approach is to use MasterPages. A MasterPage is a single template with content regions. Your ASP.NET Web pages, then, can plug content into the defined regions. MasterPages make integrating a complex site design layout a breeze, and allow for neat features like site customization on a user-by-user basis. In this article we'll examine what MasterPages are and their implementation in ASP.NET 1.x.

Examining MasterPages


MasterPages were first released by Microsoft as a download from the ASP.NET Control Gallery. From the ASP.NET developer's perspective, MasterPages offer a means to define a single template file. The template file contains a mix of static HTML along with content regions. These content regions can then be populated with dynamic values from different ASP.NET Web pages.

To understand how these pieces fit together, let's examine a simple template page. The following template, as you can see, contains both HTML markup and two content regions: pageTitleRegion, which is a region where the page's <title> tag can be dynamically specified on a page-by-page basis; and a mainContentRegion, where the main content for each page will be placed.

<%-- This register directive is needed to register 
        the mp:region Web control syntax --%>
<%@ Register TagPrefix="mp" 
                namespace="Microsoft.Web.Samples.MasterPages" 
                assembly="MasterPages" %>

<html>
<head>
  <title>
    <mp:region runat="server" id="pageTitleRegion"></mp:region>
  </title>
</head>
<body>
  <h1>Welcome to My Site!</h1>
  <form runat="server">
    <mp:region runat="server" id="mainContentRegion"></mp:region>
  </form>
  <p><hr /></p>
  <p align="center">Copyright 2004 Scott Mitchell</p>
</body>
</html>

The above markup defines the template. At this point we can create any number of ASP.NET Web pages that provide the dynamic content for the template's placeholders. For example, imagine we wanted to have a Web page that prompted the user for their name. We could create a Web page called GetName.aspx with the following syntax:

<%@ Register TagPrefix="mp" 
             namespace="Microsoft.Web.Samples.MasterPages" 
             assembly="MasterPages" %>

<mp:ContentContainer runat="server" MasterPageFile="path to template">
   <mp:content id="pageTitleRegion" runat="server">
      Please Provide Your Name
   </mp:content>

   <mp:content id="mainContentRegion" runat="server">
      <b>Name:</b> <asp:TextBox runat="server" id="txtName"></asp:TextBox>
      <br />
      <asp:Button runat="server" id="btnSubmit" Text="Click Me!"></asp:Button>
   </mp:content>
</mp:contentcontainer>

Notice that the ASP.NET Web page contains a ContentContainer element, whose MasterPageFile points to the path of the sole template file. Inside the ContentContainer element you would place a Content element for each of the content regions in the template. Note that the Content elements can contain a mix of static HTML and Web controls.

MasterPages provide two distinct advantages:

  1. They provide a clean separation between an ASP.NET Web page's form and function. The form of the page - the associated HTML - is tucked away in the template. So, if you need to, say, update the HTML template for all ASP.NET Web pages on the entire site, all you have to do is modify the template file and all of the ASP.NET Web pages that utilize that template will be updated automatically.
  2. They allow for customization of the site. You could have multiple templates created and allow users to choose from one of a series of templates. When an ASP.NET Web page loads, then, you could dynamically choose the template the page should use based on the user's preferences.

Despite their advantages, the MasterPages implementation released by Microsoft isn't as polished as one would hope. As Paul Wilson points out in his article MasterPages: An Improved Version, Microsoft's MasterPages demo suffers from "... lack [of] designer support, ... poor performance, and is NamingContainer "happy", giving IDs like Container:_ctl0:Region:Control." There are two pieces of good news to temper Paul's observations: first, MasterPages are going to be available in the next version of ASP.NET and will solve these woes. (Be sure to read Master Pages in ASP.NET Whidbey for a sneak-peak on the upcoming MasterPages implementation!) Second, many developers have built upon Microsoft's MasterPages implementation, overcoming several of these disadvantages.

Improved MasterPage Implementations for ASP.NET 1.x


Paul Wilson has released an improved MasterPages implementation that provides some Visual Studio .NET designer support, improved performance, and the ability to define default content regions and template files. Paul has also written an article for MSDN on MasterPages in ASP.NET version 2.0, as well as his improved MasterPages version. (Read Standardize Your Site Fast With MasterPages.)

Andy Smith also has an improved MasterPages implementation available. Andy notes that his implementation offers "the ability to nest regions, so you could have a basic master that defined a header and footer, a second level master that defined left and right columns within the basic master, and a content pages can choose which master they want to use."

Conclusion


For more complex site designs, a simple header and footer User Control likely won't cut it. More intricate site designs tightly mix the static and dynamic HTML regions, making it next to impossible to cleanly separate the HTML into a single header section and a single footer section. MasterPages, initially implemented by Microsoft, provides a means to define a single template with both static HTML markup and content regions for dynamic markup. Individual ASP.NET Web pages, then, can populate these regions with dynamic values.

Expect more features and ease of use with MasterPages in the coming ASP.NET version!

Happy Programming!

  • By Scott Mitchell



  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article