ASP.NET v2.0 V: Master pages and navigation

By: Chris Sully Date: November 14, 2007 Printer Friendly Version

Introduction

This article is the fifth in a series looking at ASP.NET 2.0 though it follows on from my earlier overview articles on the subject. Here's what we've covered thus far:

I: we looked at the enhancements to existing controls.
II: we proceeded to provide an overview of the new controls that have been introduced
III: we looked at the changes to the compilation and deployment architecture in v2.0 as well as briefly looking at the tool support in VS .NET 2005.
IV: we looked at data source controls and data binding via articles A and B.

In this article we look at master pages and navigation which comes down to how ASP.NET 2.0 aids in the design and consistency of sites. Previously bespoke coding would have been required to achieve these aims but now functionality is built in to assist in ASP.NET v2.0.

Master Pages

Master pages provide a template for all content pages of your web site thus facilitating a consistent look and feel. A master page defines a template which can include UI, code and any default content but it also defines content areas that will change on a per page basis using the ContentPlaceHolder control. Pages that user a master page to define the layout can place content only in the areas defined by the ContentPlaceHolder, thus enabling a consistent site design.

Master pages are ASP.NET pages with a different file extension (.master). No new knowledge is required apart from the use of the ContentPlaceHolder control. When you view the code for the page the only difference you will see is that the Master directive replaces the Page directive.

To make a page use the master page you include the masterpagefile attribute in the page directive. You then add Content controls to the page in the permitted area which are assigned a ContentPlaceHolder id. When the page is constructed ASP.NET first adds all the content from the master page. Then it loops through the ContentPlaceHolder controls and, for each, looks in the content page for a Content control where the ContentPlaceHolderID matches the id of the ContentPlaceHolder. This ensures the correct content is placed in the correct holder.

The master page can also supply default content which can be overridden by content pages. This is achieved simply by placing the content in the ContentPlaceHolder element.

Here's a 'real world' example from a client project (CWMasterPage.master):

And here is the corresponding default.aspx:

Further points regarding master pages in summary form are:

• You can also nest master pages. This is useful for sites that require some overall branding but also have sub-sites whose look must be consistent.
• You can attach a master file to a page as indicated above but they can also be applied globally by modifying the corresponding element within <system.web> of web.config: <pages masterPageFile="master1.master" />

Note that any locally defined master file in the page directive will override this setting.

• The 'unified control and adapter architecture' as introduced in an earlier article has also been utilised for master pages thus enabling different master pages to be used for different devices. For example different master pages could be automatically delivered for IE and Mozilla. This is achieved in the Page directive as follows:

Of course this technique comes in handier when the multiple devices you are supporting are very different and hence very different content and/ or amounts of content can be displayed. Device-specific support is also available on the Content control.

• Note that as per user controls embedded in pages the order of events is content page first, master page second.
• You can also set the master page programmatically which must be done in the PreInit event of the page.
• Content pages that have a master page have a property Master allowing access to the master page. The Master property returns an instance of Page (from System.Web.UI) and you can then use properties and methods defined in the master page in the page itself.

Navigation

With ASP.NET 2.0 new controls and configuration files provide a set way to define site structure and techniques for displaying navigation information as well as extracting the current path within the structure. The architecture for navigation has been broken down into parts:

1. a configurable site map provider supplying the site map information as well as keeping track of the current position
2. a set of controls that can take advantage of the supplied data

Let's take a quick look at each.

Site Map Provider

A configurable site map provider supplies the site map information to other controls. Site maps are pluggable within the <system.web> section of web.config. The default provider for the SiteMap class is the XmlSiteMapProvider class, allowing site navigation structure to be stored in an XML file, Web.Sitemap. You also have the option of creating your own providers.

So, with the default provider in place, setting up site map data is involves creating a Web.Sitemap XML files that conforms to the required schema. This best demonstrated by example:

Then it is a matter of setting up a page with controls to use this data.

Navigation controls

The two primary navigation controls are the Treeview and Menu, both of which can be bound to a SiteMapDataSource control. You also have access to the SiteMapPath control which displays a navigation path, also known as a breadcrumb, that shows the current page location and displays links as a path back to the home page.

Here are some code snippets by way of example:

Simply placing the SiteMapDataSource on the page will by default utilise Web.Sitemap. The navigation controls can be styled with CSS and their inbuilt properties to achieve the required design effects and, as you’d expect from server controls, can be customised programmatically at runtime.

Summary

In this article we’ve introduced the new features in ASP.NET 2.0 aimed at improving the consistency of pages and the navigation between those pages of your web site. In the next article we’ll take a closer look at some of the new security controls in ASP.NET 2.0.

References

ASP.NET v2.0 – the Beta Version
Homer et al.
Addison-Wesley

.NET 2.0 SDK documentation