An Introduction to Master Pages

.NET Master Pages

Microsoft .NET 2.0 Master Pages

As part of Microsoft's drive toward web 2.0 they introduced a web site development technology referred to as Master Pages. Master Pages allow web developers and web designers to separate elements of a web page into individual pages or a single page that is reused through out an entire site. This form of development has been around for years in the form of includes. But Master Pages take the classic include process one step further.

The WSI site you are currently viewing utilizes Master Pages to provide our web designers and web developers one file that contains all of the "global" design elements in our site. The header, main navigation, footer and other HTML or JavaScript's are located in the master file.  This allows for site wide changes to take place by updating one page.

In addition to Master Pages, includes in the form of .ascx files are used for sectional navigation on both the right and left side of the site.  This allows our developers to add navigation items to an entire section of the website by updating one navigation file, rather than updating every single page.

Let's take a little closer look at our website and how it utilizes user controls in the form of includes and master pages to provide quicker development and website updates.

Let's start with a list of the major layout areas of this site.

We have a:

• Meta Information
• Header
• Main Navigation
• Left Navigation
• Content Area
• Right Navigation
• Footer

The header, footer, right navigation and main navigation are a global constant for this sites web design. So these items we have defined in our master page. The meta information, left navigation and content area are the only areas that change per page. Default values for these areas are defined in the websites master page, but have been marked in the master page as "dynamic".

Let's take a look at the files that make up the page you're looking at right now and what is contained in each of them.

• Master Page
  • Header (Global Constant)
  • Main Navigation (Global Constant)
  •  Left Navigation (Default - Dynamic Per Section)
  • Content Area (Default - Dynamic Per Page)
  •  Right Navigation (Global Constant)
  • Footer (Global Constant)
• Left Navigation (Include - One File Per Section)
• Actual Web Page (One Per Page)
  • Left Navigation (File Location)
  • Content
  • Meta Information

The master page contains all of the global items.  The left navigation includes links related to this section of the website. Finally, the actual web page, for this page, only includes two parts. The content area, which you are reading right now, and the meta information that search engines look at.

Let's look at this one more way before continuing on.  We will use pseudo code to show what's in each file.

Master Page

<meta information>Get this from the actual webpage or use the default value in the master file</meta information>

<header>Use this code on all pages that use the master page</header>

<main navigation>Use this code on all pages that use the master page</main navigation>

<left navigation>Get this from the actual webpage or use the default value in the master file</left navigation>

<content area>Get this from the actual webpage or use the default value in the master file</content area>

<right navigation>Use this code on all pages that use the master page</right navigation>

<footer>Use this code on all pages that use the master page</footer>

Left Navigation (for this section)

<links>Links for this section of the website</links>

Actual Web Page

<meta information>This information will replace the default information in the master page</meta information>

<left navigation>Location of file to us for left navigation</left navigation>

<content>This information will replace the default content area in the master page</content>

Now here is what happened when you visited this page, from the server's stand point.

• Your browser requested this page.
• The server saw that this page uses a master page.
• The server got a copy of the master page and looked for the "dynamic" areas of the page.
• The first dynamic area was meta information, so the server looked in the actual web page to see if there was replacement information. There was so it replaced the meta information in the master page with what was listed in the actual page.
• The next two areas were the header and main navigation. These are "static" so they the code for these areas was pulled from the master page.
• The next area was the left navigation, which is marked as dynamic in the master page, so the server looked in the actual web page to see what the replacement code should be.  The actual page said that the left navigation should use the left navigation file.  The server then grabbed the referenced left navigation file and replaced the left navigation area in the master page with the contents of that file.
• The next area in the master file is the content area.  Content area is marked as dynamic, so the actual web page was used to provide information for this area.
• The last two areas of the master page are the right navigation and footer. These areas are static so the code for these areas was pulled from the master page.

The master page system works by identifying the page as a whole, then marking areas as "dynamic". I know I have kind of rushed through the whole concept, but if you navigate our site, you can see how the content area is specific for each page, and the left navigation changes per section of the site.  The use of master pages allows us to only maintain common html or code once.

Additionally a new master page can be created and applied to different pages, as long as they share the same "dynamic" area's.