Using ASP.NET Master Pages in your MCMS Applications

Introduction
With the recent release of Service Pack 2 for MCMS, it is now possible to take advantage of many ASP.NET 2.0 features within your MCMS applications. One the best new features introduced with ASP.NET 2.0 is Master Pages, which allow developers to enforce common layout and behaviour across pages within an application. Whilst at first pass many Master Pages concepts are similar to those of MCMS, there are a number of benefits to be gained by taking advantage of Master Pages within MCMS applications.

This article provides an overview of the benefits of using Master Pages and a step by step guide for implementing them in your MCMS applications.

Overview and Benefits of Master Pages Master Pages provides the ability to enforce common layout and behaviour across pages within an application. A Master Page is defined which includes common mark-up and one or more Content Placeholders. From this Master Page, new Content Pages can be created which include Content controls which are linked to the Content Placeholders in the Master Page. This provides an ideal way to separate common site branding, navigation etc from the actual Content Pages and can significantly decrease duplication and mark-up errors. Therefore, in MCMS applications the logical place for individual template mark-up and PlaceHolder controls is within the Content control within the Content Page, as shown in the diagram to the right. Note: MCMS PlaceHolder controls in the Master Page will work, but are not supported.

Click for full size image

Whilst at first glance Master Pages concepts are similar to those of MCMS, (for example the separation of content from site-wide layout, branding and navigation) they offer a number of benefits to MCMS developers:

• Avoids duplication in MCMS Template files.
  Commonly MCMS Templates contain common page layout code (usually a HTML table) along with headers and footers (usually User Controls), which is copy and pasted into each new Template after it is created (although this mark-up can be added to a Visual Studio template). So for example a MCMS application with ten templates, will duplicate this mark-up ten times. By placing this mark-up within a Master Page this duplication can be removed.
• Separation of site-wide mark-up from Template mark-up.
  One of the biggest drawbacks to MCMS is that the task of developing Templates cannot be easily separated. It is a common requirement to separate the tasks of defining site branding, layout and the development of controls such as navigation (performed by webmasters and programmers) from the task of designing template layouts (performed by business users). Whilst Master Pages and Visual Studio 2005 do not address this completely due to MCMS's inherent architecture, they offer a substantial improvement in this area.
• Avoids issues with MCMS Template File Visual Studio templates.
  The MCMS Project Item Templates have a number of issues, and do not fully embrace the Visual Studio 2005 project system. Although any Web Form can be MCMS 'enabled', Master Pages offers a more seamless development experience with less manual tweaks.
• Visual Studio 2005 Designer support.
  One of the common problems with using User Controls within Template files in Visual Studio.NET is that the template design view doesn't provide an adequate experience for template developers. Visual Studio 2005 offers a much improved design view experience including rendering of User Control content, and this is especially valuable when working with Master Pages.
• Experience of Master Pages
  Just as MCMS is a great way to learn ASP.NET, MCMS SP2 is a great way to learn ASP.NET 2.0! In addition, Master Pages are a fundamental building block of future Web Content Management offerings from Microsoft.

Note: the naming of the Master Pages Content Placeholder control is perhaps unfortunate, but this control has nothing to do with MCMS PlaceHolder controls.

Getting Started
Before you can use Master Pages within MCMS, you need to install (or upgrade to) and configure MCMS Service Pack 2. The Rational Guide to installing MCMS Service Pack 2 provides instructions for installing SP2 and configuring your development environment.

This article will walkthrough a simple sample to demonstrate how you can use Master Pages within your MCMS applications. The screenshots below show the final sample in Authoring Mode and the Template design experience in Visual Studio 2005.

Creating a new MCMS Web Application
Follow the steps below to create a new MCMS application for this sample:

1. Open Visual Studio 2005.
2. Choose New from the File Menu, followed by Web Site.
3. In the New Web Site dialog, select the MCMS Web Application icon in the My Templates section.
4. Select HTTP in the Location List Box.
5. Enter http://localhost/MasterPages in the Location Text Box.
6. Choose your desired Language in the Language List Box.
7. Click OK and wait while the Web Site is created.
8. In the Solution Explorer, right click your Web Site and click New Folder.
9. Overtype NewFolder1 with Templates.

Creating a Master Page for use with MCMS
Follow the steps below to create a Master Page to be used in this sample:

1. In the Solution Explorer, right click your Web Site and click Add New Item....
2. In the Add New Item dialog, select the Master Page template within the Visual Studio Installed Templates section.
   
3. Enter a name in the Name text box, and click Add.
4. The Master Page is created and opened in the Visual Studio Source View.

In order to make use of MCMS controls such as the RobotMetaTag control within the Master Page, a Register directive is required:

1. Enter the following directly underneath the existing Page directive in the Master Page:
   <%@ Register Assembly="Microsoft.ContentManagement.WebControls, Version=5.0.1200.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="Microsoft.ContentManagement.WebControls" TagPrefix="cms" %>

Now MCMS controls can be added, and with full Visual Studio 2005 Intellisense support! :)

1. Place the cursor directly below the <title /> element within the <head /> element.
2. Type <cms:, and Intellisense will popup, select cms:RobotMetaTag and press SPACE.
   
3. Use Intellisense to complete the tag by adding a runat="server" attribute.

The Master Page is now ready for any common layout, branding and navigation elements. This sample will use a simple layout based on a HTML Table.

1. Switch to Design View by clicking the Design button at the bottom left corner of the code editor.
2. From the Layout menu, select Insert Table.
3. In the Rows text box, enter 1.
4. In the Columns text box, enter 3.
5. Select left in the Align combo box.
6. Select the Width and Height check boxes, accepting the default values of 100%.
7. Select the Border, Cellpadding and Cellspacing check boxes, accepting the default values of 0.
8. Click the Cell Properties... button.
9. Select left in the Horizontal Align combo box.
10. Select top in the Vertical Align combo box.
11. Click OK twice.
12. Drag and drop the ContentPlaceHolder control to the table's middle column.

At this stage the Master Page can be further modified to include any common elements required. For example a style sheet can be applied, or Web Controls can be used to add a common header, as shown below. Generally speaking existing resources from MCMS applications can be reused without any issues once they are added to a Web Site.

Once the 'design' is complete the MCMS Web Author Console should be added to the Master Page:

1. In Solution Explorer, expand the Console folder within the Web Site.
2. Drag and drop DefaultConsole.ascx into a suitable location on the Master Page.
3. From the Build menu. choose Build Web Site.

Creating a Content Page for use as a MCMS Template

The Master Page is now complete, and it is time to create a Content Page, which will be an MCMS Template.

1. In Solution Explorer, right click the Templates folder, and click the Add New Item... button.
2. Select Web Form template within the Visual Studio Installed Templates section.
3. In the Name text box, enter MasterPageDemo.aspx.
4. Select the Select Master Page check box and click the Add button.
   
5. In the Select a Master Page dialog, select the Master Page previously created, and click OK.
   
6. The Content Page is created and opened in Source View.
7. Select the MCMS Template Explorer Window.
8. In Template Explorer, right click Templates and click New Gallery.
9. Left click New Template Gallery, and rename it MasterPages.
10. Right click MasterPages, click New Template and name the template MasterPageDemo.
11. Right click MasterPageDemo, and click Properties.
12. In the Data section, click the ellipsis (...) to the right of the TemplateFile property.
13. In the Select File dialog, select the template file created above, and click the Select button.
14. In the Data section, click the ellipsis (...) to the right of the PlaceholderDefinitions property.
15. Use the Placeholder Definition Collection Editor to add two HtmlPlaceholderDefinitions named Intro and Body, and click OK.
16. Move into the Design View for the template file by clicking the Design button in the lower left of the code editor.
17. Scroll the Toolbox until you see the Content Management Server section.
18. Drag and drop two HtmlPlaceholderControls into the Content control.
19. Click the first HtmlPlaceholderControl, and set it's PlaceholderToBind property to Intro.
20. Click the second HtmlPlaceholderControl, and set it's PlaceholderToBind property to Body.
21. From the Build menu. choose Build Web Site.

That's it! The Master Page based MCMS template is now ready for use within your MCMS application by content contributors. At this stage any additional mark-up required could be added in the Content Page.

The Template can now be tested in the usual manner with the MCMS Web Author.

Modifying Master Page properties from the Content Page
Observant readers will have noted that the Master Page <title /> element contained the text Untitled Page. Properties such as this can be modified from within the Content Page (MCMS Template).
To set the <title /> element to the MCMS Posting Display Name, enter the following code within the Page_Load method of the Content Page:

this.Master.Page.Title = CmsHttpContext.Current.Posting.DisplayName;

Conclusion
Master Pages offers numerous benefits to MCMS developers, including greatly enhanced design time experience and removal of mark-up duplication. Have fun developing MCMS applications with Master Pages! Future articles will cover building MCMS Navigation and Authentication functionality using new ASP.NET 2.0 features.