Buy My Account


Basics
Overview
Easy Code Customization
Sample Applications
Video Demos
Customers
Free Training
Pricing & Ordering
Download Now!

Product Tour
Product Tour
Web & Cloud Applications
Mobile Applications
SharePoint Applications
Charts and Reports
Security
Team Development
What's New in V10.2

Technical Materials
Training Courses
Online Help
Technical Forums
White Papers
One Day Web Apps E-book
System Requirements
Product Roadmap
Version History

Add Master Pages to Iron Speed Designer Applications


Learn how to add Master Pages in Iron Speed Designer Version 6.0.
- Jay Patel, President of JNovation, Inc.

March 24, 2009
Iron Speed Designer V6.0 & V6.1

A First Look

ASP.NET Master Pages provide an opportunity to develop more robust company- and department-wide layouts. They also facilitate integration of Iron Speed Designer pages with existing ASP.NET applications that already use Master Pages. The Master Page feature allows traditional .ASPX pages to be separated into core content (in an .ASPX content page) and application-wide layout (in a .master file).

What are Master Pages?

While excellent Master Page resources are available online (see resources at end of article), this article provides a brief overview of how they work. Traditional .ASPX pages are often structured as shown below, generally containing page-specific content with the remainder of the page common throughout some or all of the site.

The ASP.NET Master Page feature allows you to develop the page-specific content separately from the common site-wide content by using two separate files. The page-specific content remains in the .ASPX file and the remainder of the content goes in a .master file. At execution time, the ASP.NET engine merges the contents of the two into a single .ASPX page. This works the same way a UserControl works, where content from a UserControl is merged into an .ASPX page at runtime.

Why use Master Pages?

While the built-in Iron Speed Designer Header and Footer controls provide similar capabilities to ASP.NET Master Pages, the controls are placed on every page at the top and bottom. This limits site-wide layout changes to the top and bottom of a page. Adding site-wide content to the right or left of the main content on a page, or attempting more creative layout changes is challenging; you have to make layout changes on every page. With Master Pages, the application-wide layout is independent of the individual pages.

Master Pages become even more compelling when multiple departments within an organization need different branding or layout of the common page content (header, footer, etc.). In addition, Master Pages can be swapped out dynamically at runtime, which allows you to use your business criteria to select the appropriate Master Page for a given user, department, etc.

Process

The goal of this article is not to completely separate page-specific content from common site-wide content, but to walk through a smaller, more manageable change and demonstrate a working concept. The overall aim is render the same content as a standard Iron Speed Designer page. No changes are required to any code-behind file, except to demonstrate how to dynamically change a Master Page.

Before proceeding, Iron Speed recommends backing up the \Program Files\Iron Speed\Designer v6.00 folder to protect your license in case your system crashes. Ideally, you should make a backup to another physical location in case you need to revert back to the original version of a file or recover from a crash.

Create a Master Page

Create a minimal Iron Speed Designer application using Kilimanjaro Page Style, SouthWind.mdb database (found in \Program Files\Iron Speed\Designer v6.0.0\Sample Databases). Only select Categories table at this time and a minimal number of pages (Show Record, Add, Edit, and Show Table).

Open the new application in Visual Studio and create a folder named MasterPages. Right-click on the folder, select Add New Item, select Master Page, name the file Corporate.master, and check Place Code in Separate File. You should end up with something like the screen shot below.

The Master Page looks like a normal .ASPX page with <html>, <head>, <body>, and <form> tags. The differences are <asp:ContentPlaceHolder tags that indicate content will come from an .ASPX content page.

At the very least, a Master Page contains everything outside the <form> tag. This article addresses incorporating some of the common content from an existing .ASPX page into the Corporate.master page. Open ShowCategoriesTable.aspx file in your favorite editor and review the HTML content up to the <form> tag.

The general aim is to extract the <form> tag and everything outside of it to a Master Page. A completed version of Corporate.master is provided here, with explanations below.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Corporate.master.cs" Inherits="MasterPages_Corporate" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>
        <asp:ContentPlaceHolder id="ContentTitle" runat="server">
        </asp:ContentPlaceHolder>
    </title>
    <link rel="stylesheet" rev="stylesheet" type="text/css" href="../Styles/BaseStyles.css"/>
    <link rel="stylesheet" rev="stylesheet" type="text/css" href="../Styles/Styles.css"/>
    <asp:ContentPlaceHolder id="ContentHead" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body id="Body1" runat="server" class="pBack">
    <form id="Form1" method="post" runat="server">
        <script language="JavaScript" type="text/javascript">clearRTL()</script>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
 
        <asp:ContentPlaceHolder id="ContentMain" runat="server">
        </asp:ContentPlaceHolder>
    </form>
</body>
</html>

Highlights of the main changes:

  • A ContentPlaceHolder tag was added inside the <title> tag, because each Iron Speed Designer .ASPX page adds a literal control that sets the browser title. Since this is page-specific content, we put a place holder here. The .ASPX page is responsible for generating the title literal tag.

    <asp:ContentPlaceHolder ID="ContentTitle" runat="server">
    </asp:ContentPlaceHolder>
  • Add the common styles after the title tag.

    <link rel="stylesheet" rev="stylesheet" type="text/css" href="../Styles/BaseStyles.css"/>
    <link rel="stylesheet" rev="stylesheet" type="text/css" href="../Styles/Styles.css"/>
  • Updated the Body and Form tags with additional items since the master page must generate the same content as the .ASPX page.

    <body id="Body1" runat="server" class="pBack">
       <form id="Form1" method="post" runat="server">
  • Include the following tags just inside the Form tag as they are required on all pages.

    <script language="JavaScript" type="text/javascript">clearRTL()</script>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

Modify XSL Page Template

You are now ready to update the Page Template so Iron Speed Designer does not generate .ASPX pages with tags such as <html>, <head>, <body>, and <form>. These is handled by the Corporate.master file. Close Iron Speed Designer for the time being and open \Iron Speed\Designer v6.0.0\PageTemplates\ MasterPage.Html.xsl in your favorite editor. Be sure to create a backup of this file in case you need to revert back later.

Below is a view of the original MasterPage.Html.xsl file. Notice the portion that starts with <!DOCTYPE html PUBLIC and ends with the form tag. Since all of this, minus the literal control for the page title, is rendered by the Master Page, you must remove it. This essentially leaves the title literal control as-is, but wrapped in a Content tag.

Copy and paste the replacement markup below into the MasterPage.Html.xsl file.

<xsl:text disable-output-escaping="yes"><![CDATA[<asp:Content ID="ContentTitle" ContentPlaceHolderID="ContentTitle" Runat="Server"><GEN:Literal NAME=]]></xsl:text><xsl:value-of select="concat('&quot;', Self/PageTitle)"/><xsl:text disable-output-escaping="yes"><![CDATA["/></asp:Content>
   <asp:Content ID="ContentMain" ContentPlaceHolderID="ContentMain" Runat="Server">]]
   ></xsl:text>

Youve removed the opening <html>, <body>, and <form> tags from the XSL template, and now need to take care of the closing tags as well. Scroll down towards the bottom of the MasterPage.Html.xsl and find the </form>, </body>, and </html> tags.

Replace <xsl: text tags with closing Content tags, like the one below, to indicate the end of the main content section.

<xsl:text disable-output-escaping="yes"><![CDATA[
</asp:Content>]]></xsl:text>

Assign Master Page to All Content Pages

Finally, tell ASP.NET to use the new master page as a default for all Content pages, and update the <pages> tag in the system.web section of Web.Config. If you wish to use this setting for all new projects, change it in the Iron Speed Designer install directory (\Program Files\Iron Speed\Designer v6.0.0\ProjectTemplates\vs2008\cs or vb).

<pages masterPageFile="~/MasterPages/Corporate.master" validateRequest="false">

Review the Results

You have just completed the full extent of the code changes needed for this simple demonstration. Save your changes, fire up Iron Speed Designer 6.0, and open the application you just generated.

This time, go to Tools | Application Wizard to generate a new Show Table page for the Categories table. Open the new page in the browser and notice it looks the same as the original ShowCategoriesTable.aspx page that does not use a Master Page. Open ShowCategoriesTable2.aspx in your favorite editor and notice the page has content tags versus the usual <html>, <body>, and <form> tags.

Additional Examples

This example was kept short to demonstrate what is possible with Master Pages and Iron Speed Designer. It is not within the scope of this article to move the Header, Menu and Footer controls from the .ASPX page and to the Master Page as well. Further, copying and pasting HTML and XSL markup can be error prone, so that was not addressed in this article.

To show why Master Pages are intriguing, consider these extensions:

  1. Add markup to the left side of the page by modifying the Corporate.master page. No changes will be made to any .ASPX pages and it is not necessary to regenerate any Iron Speed code to change site-wide layout.
  2. Use a different .master page through code to demonstrate that you can choose a different Master Page at runtime based on your specific business needs. For example, your company has multiple operating units with their own brand, logo, etc., but these units share content. You want to brand the application (or specific group of pages) within the application differently based on user or other criteria.
  3. For those IT environments that already have Master Page-based applications, Iron Speed Designer pages can more easily be incorporated if they are generated using the Master Page feature.

Example 1: Adding a Left Section for Content Pages

Open Corporate.master in an editor and enclose the main content (contentplaceholder ID="ContentMain") in an HTML Table with one row containing two cells. For demonstration purposes, the first cell will contain a simple blue bar that runs from the top to the bottom of the page. This could be a left navigation bar, a location for advertisements, or other custom content. The second cell will contain the ContentPlaceHolder tag that gets its content from an ASPX content page.

<form id="Form1" method="post" runat="server">
<script language="JavaScript" type="text/javascript">clearRTL()</script>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td style="border-left:solid 10px blue;"> 
        </td>
        <td>
            <asp:ContentPlaceHolder ID="ContentMain" runat="server">
            </asp:ContentPlaceHolder>
        </td>
    </tr>
</table>
</form>

Since the new .ASPX page is generated as a content page, the Master Page can layout the content in any way needed without the usual challenges of touching each content page. A left-side navigation panel could be added, a vertical advertisement space could be setup on the right side of the page, etc. Master Pages facilitate this type of layout creativity, without touching content pages.

Example 2: Changing a Master Page Programmatically

Create a new Master Page named Corporate2.master and replace its content in a similar manner to Corporate.master. The only difference is the left side bar is orange so you can easily see the difference between the two pages. Add a cell to the right of the content for placement of vertical advertisements.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Corporate2.master.cs" Inherits="MasterPages_Corporate2" %&g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>
        <asp:ContentPlaceHolder id="ContentTitle" runat="server">
        </asp:ContentPlaceHolder
    </title>
    <link rel="stylesheet" rev="stylesheet" type="text/css" href="../Styles/BaseStyles.css"/>
    <link rel="stylesheet" rev="stylesheet" type="text/css" href="../Styles/Styles.css"/>
    <asp:ContentPlaceHolder id="ContentHead" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body id="Body1" runat="server" class="pBack">
    <form id="Form1" method="post" runat="server">
    <script language="JavaScript" type="text/javascript">clearRTL()</script>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
 
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
        <tr>
         <td style="border-left:solid 10px orange;"> 
         </td>
         <td>
            <asp:ContentPlaceHolder ID="ContentMain" runat="server">
            </asp:ContentPlaceHolder>
         </td>
         <td style="border:solid 1px gray;"> Advertisement
         </td>
        </tr>
    </table>
    </form>
</body>
</html>

Now create another Show Table page for the Categories table. In the new pages code behind (ShowCategoriesTable3.aspx.cs), add an event handler (this.PreInit +=...) to the ShowCategoriesTable3 constructor and a Page_PreInit method to handle the event. Your application could have multiple .master files and be assigned based on your custom business rules.

Section 1: Place your customizations here.
 
public ShowCategoriesTable3()
{
    this.Initialize();
 
    this.PreInit += new EventHandler(Page_PreInit);
}
 
// Handles PreInit Event
protected virtual void Page_PreInit(object sender, System.EventArgs e)
{
    // Add your custom logic to set any master page based on your business rules
    this.MasterPageFile = "~/MasterPages/Corporate2.master";
}

With these changes in place, ASP.NET uses your custom Master Page instead of the default indicated in Web.Config.

Conclusion

The ASP.NET Master Page feature can be utilized as an alternative way to provide branding and application consistency. It provides an opportunity to develop more robust application-wide layouts and facilitate integration of Iron Speed Designer pages with existing ASP.NET applications that already use Master Pages.

Download the project files for this example.

Additional Resources

About the Author

Jay Patel has been involved in software development and IT for more than 15 years. He has worked in all phases of the software development cycle, from initial concept, through requirements gathering, design, maintenance and support. Jay has been involved with web technologies for more than eight years. His principal toolset and technologies include Visual Studio.NET 2008, ASP.NET, C#, Iron Speed Designer, SQL Server 2005/2008, TFS, TeamCity, and Subversion (VisualSVN Server).

Jay holds Bachelor of Science degrees in both Computer Science and Computer Engineering from University of South Florida.

Contact the author.

   
 

Terms of Service Privacy Statement