The following is Chapter 3, "Using Master Pages," from Enhancing Microsoft Content Management Server with ASP.NET 2.0, published by Packt Publishing. Reprinted with the publisher's permission.
Using Master Pages
One the best features introduced with ASP.NET 2.0 is master pages, which allow developers to enforce common layout and behavior across pages within an application. While at first pass many master pages concepts are similar to those of MCMS templates, there are a number of benefits to be gained by taking advantage of master pages within MCMS applications.
This chapter provides an overview of the benefits of using master pages and a step-by-step guide for implementing them in your MCMS applications, where they become master templates!
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.
Note: MCMS placeholder controls in the master page will work, but are not officially supported.
As we will see in this chapter, 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 book'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 book, 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 from the book's companion website.
- 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 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 Import.
- The import confirmation dialog appears. Click 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 chapter.
- 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 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 your website and click Add New Item....
- In the Add New Item dialog, select the Master Page template within the Visual Studio Installed Templates section.
- 3. Enter TropicalGreen.master in the Name textbox, and click Add.
- The master page is created and opened in the Visual Studio Source View.
Note: 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"
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.
Note: 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 from the book's companion website.
- In Solution Explorer, right-click your website and click 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">
Note: This markup will produce validation errors. We could avoid this by replacing it with definitions in a global CSS file. Themes and skins are covered in Chapter 5.
- 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"
(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 the Templates folder, and click 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 the Add button.
- In the Select a Master Page dialog, select the TropicalGreen.master page previously created, and click 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 chapter, 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:
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 HtmlPlaceholderControl, and set its PlaceholderToBind property to Description.
Save your work, and from the Build menu, choose Build Web Site.
- 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.
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 the Plant.aspx file, and click View Code.
- Add the following using statement:
Enter the following code within the Page_Load() method of the template file:
string displayName =
Master.Page.Title = displayName;
litHeader.Text = displayName;
Note: 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.
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.
About the Authors
Spencer Harbar, an MCSD for Microsoft .NET, MCSE and MVP for MCMS, has over twelve years commercial experience of architecture, design, development, deployment, and operational support of web-based applications and hosting platforms for some of Europe's largest organisations.
Spencer maintains www.mcmsfaq.com: an MCMS resources portal, and is active in the public newsgroups. His experience of MCMS goes back to the days of NCompass Resolution, and he has been involved in many enterprise implementations.
Currently working as an independent consultant, Spencer delivers enterprise content management and portal systems architecture, design, development, and deployment solutions, application security best practices, threat modeling, and the implementation of highly available Windows-Server-System-based hosting platforms.
Product expertise includes MCMS, SharePoint Technologies, IIS, SQL Server, Commerce Server and BizTalk Server, Windows Security, PKI, and High Availability.
Selected clients include Barclays Bank, Scottish Power plc, HBOS, Microsoft, The Royal Bank of Scotland, Scottish Enterprise, Centrica, Clifford Chance, The Automobile Association, and BASF.
Spencer resides in Edinburgh, UK.
Lim Mei Ying is a Senior Consultant with Avanade and has extensive experience in setting up MCMS systems at the enterprise level. She has spent many hours figuring out the dos and don'ts of the product, and enjoys fi nding new ways to solve MCMS-related problems. She contributes actively to the newsgroup community and is a Microsoft Most Valuable Professional for Content Management Server. Mei Ying lives on the sunny island of Singapore and blogs at http://meiyinglim.blogspot.com. She also coauthored the earlier book, Building Websites with Microsoft Content Management Server (ISBN 1-904811-16-7, Packt Publishing).
Thanks to my husband, Louis, for the much needed support throughout the many months of writing. Special thanks to my family and friends for their encouragement.
Stefan Goßner works for Microsoft as an Escalation Engineer in the Developer Support department. He provides customers with technical solutions to problems related to Microsoft Internet Server Products. Stefan has a wide understanding of all areas of MCMS.
His contributions to the newsgroup have helped many people to implement MCMS solutions in corporations around the globe to the point where it has been said that if you don't know Stefan, then you're probably new to MCMS.
Stefan maintains a huge MCMS 2002 FAQ on the Microsoft website, and provides MCMS tips and tricks on his personal blog http://blogs.technet.com/stefan_gossner.
Stefan has also written the books Building Websites With Microsoft Content Management Server (ISBN 1-904811-16-7, Packt Publishing), and Advanced Microsoft Content Management Server Development (ISBN 1-904811-53-1, Packt Publishing).
He lives in Munich, Germany, and can be reached at email@example.com.
I would like to thank my girlfriend Michaela, for her support throughout months of writing, reviewing, and coding for the book. Also many thanks to my friends in the MCMS Support Teams worldwide and to my friends in the MCMS product team in the US.
About the Reviewers
Andreas Klein started in the PC business in 1981, working as a consultant for several years before joining Microsoft in 1990. Since then he has held programming trainings. On the technical side, he has covered many different areas, including Win16 (Windows 2.x, 3.x) and Win32 Application and Driver Programming, helping customers manage their systems running Windows 9x, Windows NT, and later versions, and even Exchange 4.0 - 2000.
His current focus is web server scenarios (IIS, MCMS 2002), DHTML programming, and PKI/Security concepts in the IT scope.
Mick Badran has been performing Microsoft technical classroom-based training for more than nine years, and has over 12 years commercial development experience in various languages. Mick has been consulting for Microsoft in areas of CMS, SPS, and BizTalk for over fi ve years. He also specializes in customized training in these areas.
Mick speaks at various Microsoft Events such as TechEd and Security summits, and is a BizTalk MVP.
He can be reached at firstname.lastname@example.org, and would love to hear your feedback.
Joel Ward works as a web developer and technical manager. Once destined to be an architect, he switched tracks midway through college and instead graduated with a degree in Integrative Arts from the Pennsylvania State University. His professional career has taken him on a journey through design, programming, usability, and accessibility.
Joel has enjoyed working with MCMS since its first release in 2001. Over the years, Joel has been active in the newsgroups and has been recognized as a Microsoft Most Valuable Professional for his work in the MCMS community.
He enjoys a good challenge, which includes working on projects that use ASP.NET, MCMS, and SharePoint.
Joel lives in the Commonwealth of Virginia in the United States.