Overview and Benefits of Master Pages
A master page includes common markup and one or more content placeholders. From this master page, new content pages can be created, which include content controls that 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 markup errors.
Master pages make working with template files a lot easier than before. You can add common markup and shared controls such as headers, footers, and navigation bars to master pages. Once a master page has been built, you can create MCMS template files based upon it. The template files will immediately adopt the look and feel defined in the master template.
You can also mark certain regions of the master page to be customizable by introducing content placeholders (note that these are controls designed specifically for master pages and are not to be confused with MCMS placeholder controls). The space marked by content placeholders provides areas where you could add individual template markup as well as MCMS placeholder controls, as shown in the following diagram:
Although at first glance both master pages and MCMS templates offer a way to standardize the look and feel of a site, their similarities end there. Don’t be mistaken into thinking that master pages take over the role of MCMS templates completely. A key difference between the two is that the use of master pages is reserved solely for site developers to ensure that template files created have a common look and feel. You can’t create a master page and expect authors to use it to create postings.
In fact, master pages work alongside template files and offer a number of benefits to MCMS developers.
- Avoids duplication in MCMS Template files: Often MCMS templates contain common page layout code (usually an HTML table) along with navigation bars, headers, and footers (usually web user controls). This code has to be copied and pasted into each new template file after it is created or abstracted into user controls. In addition a change in the layout of this common code has to be applied to all template files. So, for example, an MCMS application with ten template files will duplicate this markup ten times. By placing this markup within a master page, this duplication can be removed.
- Separation of site-wide markup from template markup: 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). While 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 offer a more seamless development experience with less manual tweaks required.
- 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 an 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.
MCMS placeholder controls in the master page will work, but are not officially supported.
As we will see in this article, master pages provide an ideal way to separate common site branding, navigation, etc., from the actual content pages, and can significantly decrease duplication and markup errors.
The TropicalGreen Web Site
Tropical Green is the fictitious gardening society upon which the article’s sample website is based. In the book, Building Websites with Microsoft Content Management Server from Packt Publishing (ISBN 1-904811-16-7), we built the Tropical Green website from scratch using ASP.NET 1.x.
In this article series, we will attempt to rebuild parts of the website using MCMS SP2 and ASP.NET 2.0. While the code will be rewritten from the ground-up, we won’t start with a blank database. Instead, we’ll take a shortcut and import the TropicalGreen database objects from the TropicalGreen.sdo file available from the support section on Packt Publishing’s website (http://www.packtpub.com/support).
Importing the TropicalGreen Site Deployment Object File
Before we begin, let’s populate the database by importing objects using the Site Deployment Manager.
- Download the TropicalGreen.sdo file.
- Open Site Manager and log in with an MCMS administrator account.
- From the menu, select File | Package | Import….
- In the Site Deployment Import dialog, click on the Browse… button. Navigate to the TropicalGreen_Final.sdo file downloaded earlier.
- In the Container Rules tab, set the following:
When Adding Containers
Use package container rights
When Replacing Containers
Keep destination container rights
- In the Rights Group tab, set the following:
Select how Rights Groups are imported
Import User Rights Groups
- Click on Import.
- The import confirmation dialog appears. Click on Continue.
Creating a New MCMS Web Application
To get started, let’s create a new MCMS web application using the project templates we created in the previous article.
- From Visual Studio, from the File Menu, choose New | Web Site.
- In the New Web Site dialog, select the MCMS SP2 Web Application icon in the My Templates section.
- Select HTTP in the Location list box.
- Enter http://localhost/TropicalGreen in the Location textbox, and click on OK.
Our MCMS web application is created and opened in Visual Studio 2005.
Creating a Master Page for Use with MCMS
We will now add a master page to our MCMS web application and add the necessary elements for it to be usable with MCMS.
- In the Solution Explorer, right-click on your website and click on Add New Item...
- In the Add New Item dialog, select the Master Page template within the Visual Studio Installed Templates section.
- Enter TropicalGreen.master in the Name textbox, and click on on Add.
- 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.
- 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" %>
Adding this Register directive in the master page allows us to use MCMS controls within the master page and prevents us from having to add it to the templates that make use of the master page.
Now MCMS controls can be added, and with full Visual Studio 2005 IntelliSense support!
- Place the cursor directly below the <title /> element within the <head /> element.
- Type <cms:, and IntelliSense will pop up. Select cms:RobotMetaTag and press Space.
The RobotMetaTag control is responsible for emitting the robots meta tags used by search engines to decide whether a page should be indexed, and whether the search engine should follow links on the current page. The values for these meta tags are controlled by the IsRobotIndexable and IsRobotFollowable properties of the posting. In addition, the control adds a base tag to the HTML content to ensure that relative references to files inside the template project can be found when a posting is requested.
- 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. We will now re-create our TropicalGreen design, using a simple layout based on an HTML table.
- Download the Logo.gif file.
- In Solution Explorer, right-click on your website and click on New Folder and name it images.
- Add the Logo.gif file to the images folder.
- We will configure the page to not have any margins on the top and left edges. Modify the <body /> element as follows:
<body topmargin="0" leftmargin="0">
This markup will produce validation errors. We could avoid this by replacing it with definitions in a global CSS file.
- Enter the following code as you see it between the <form> tags, replacing the existing content. Include the text markers (e.g. (Space for Console)). The markers give us a visual cue to tell us where to place controls later. The page is formatted within a table, with the logo and horizontal menu at the top of the page and the vertical menu on the right-hand side. The rest of the space is for the main body or content.
<table width="100%" border="0" cellspacing="0" cellpadding="0"
<td width="100%" colspan="2" valign="top" bgcolor="#FFD300">
<td rowspan="10" valign="top">
(Space for Console)
<td colspan="2">(Space for Top Menu)</td>
(Space for SiteMapPath Control)<br/>
(Space for Main Body)
<td class="RightMenuBar" width="20%" valign="top" height="100%"
align="middle" rowspan="2" bgcolor="#669900">
(Space for Right Menu Bar)
- Toggle to Design view. Drag a ContentPlaceholder control from the Standard section of the toolbox and drop it in the table cell that contains the words (Space for Main Body). Delete the text markers.
- Save your work.
At this stage our simple master page contains the skeletal structure and layout of the page. It could be further modified to include any common elements required. For example, web controls can be used to add a common footer. Generally speaking, existing resources from MCMS applications can be reused without any issues once they are added to a website. However, careful consideration as to the best place to store such elements should be taken; for example, simply reusing user controls from a previous project may not be the best approach, as their content could be transferred to the master page.
Now let’s add the MCMS Web Author Console to our master page:
- In Solution Explorer, expand the Console folder.
- Drag and drop DefaultConsole.ascx onto the page directly after the (Space For Console) text marker, and then delete the text marker.
- From the Build menu choose Build Web Site.
We have completed our TropicalGreen master page!
Creating an MCMS Template File Based on a Master Page
Now it is time to create an MCMS template file based on the master template that we have just created. We will create a plant template, which will be used within the TropicalGreen site to create fact-sheet postings about plants.
The fact sheet is a resource for hobbyists wishing to find out more about certain plants. Club members are avid gardeners. They often exchange gardening tips with fellow members. Younger green thumbs look up the information posted in the Plant fact sheet to tap into the wealth of experience that has been posted by fellow gardeners.
- In Solution Explorer, right-click on the Templates folder, and click on the Add New Item... button.
- Select Web Form template within the Visual Studio Installed Templates section.
- In the Name textbox, enter Plant.aspx.
- Select the Select master page checkbox and click on the Add button.
- In the Select a Master Page dialog, select the TropicalGreen.master page previously created, and click on OK.
- The template file is created and opens in Source view.
- Select the MCMS Template Explorer window. If you have imported the TropicalGreen.sdo file at the start of the article, you should see the template gallery structure of TropicalGreen, which looks as follows:
- Navigate to the TropicalGreen | PlantCatalog template gallery. Right-click on the Plant template and select Properties. Ensure that the template is configured to have:
- An HtmlPlaceholderDefinition named Description (click on the ellipsis in the PlaceholderDefinitions property field to show the Placeholder Definition Collection Editor).
- A TemplateFile property value of /tropicalgreen/templates/plant.aspx.
- Toggle to Design view. Drag a Literal control from the Standard section of the toolbox and drop it into the Content control. Set the ID of the control to litHeader.
- Drag an HtmlPlaceholderControl from the Content Management Server section of the toolbox and drop it into the Content control below the Literal control.
- Click on HtmlPlaceholderControl, and set its PlaceholderToBind property to Description.
- Save your work, and from the Build menu, choose Build Web Site.
That’s it! Our master-page-based MCMS template is now ready for use within the MCMS application by content contributors. At this stage any additional markup required could be added in the template file. The template can now be tested in the usual manner with the MCMS Web Author.
Modifying Master Page Properties from the Template File
You may have noted that the master page <title /> element contained the text Untitled Page. Properties such as this can be modified from within the template file. Let’s set the <title /> element and the litHeader control to the MCMS Posting Display Name:
- In Solution Explorer, right-click on the Plant.aspx file, and click on View Code.
- Add the following using statement:
- Enter the following code within the Page_Load() method of the template file:
string displayName = CmsHttpContext.Current.Posting.DisplayName;
Master.Page.Title = displayName;
litHeader.Text = displayName;
Code to manipulate master page properties can also be placed in the master page.
- Save your work, and from the Build menu, choose Build Web Site.
- Add the following using statement:
We can now see that the Display Name is displayed in the Internet Explorer title bar as well as the ASP.NET Literal control.
We have covered the basics of ASP.NET 2.0 master pages, created our first MCMS master template, and seen the numerous benefits these offer to MCMS developers, including greatly enhanced design-time experience and removal of markup duplication. By using master pages, you can enforce design consistency, reduce code, and enjoy a rich design-time experience while developing MCMS applications.
If you have read this article you may be interested to view :
- Installation And Configuration of Microsoft Content Management Server: Part 1
- Installation And Configuration of Microsoft Content Management Server: Part 2
- Getting Started with the Development Environment Using Microsoft Content Management Server