Delphi Clinic C++Builder Gate Training & Consultancy Delphi Notes Weblog Dr.Bob's Webshop
Dr.Bob's Delphi Notes Dr.Bob's Delphi Clinics Dr.Bob's Delphi Courseware Manuals
 Dr.Bob Examines... #99
See Also: Dr.Bob's Delphi Papers and Columns

ASP.NET 2.0 Master-Content Pages and Navigation
ASP.NET 2.0 supports a feature called Master pages, which is similar to Delphi for Win32’s form inheritance, but with only one level of inheritance. In other words: we can have a master page, and several content pages that are derived from that master page.
The best way to illustrate this is to just create a new ASP.NET project.This time, we take the MasterPage-based ASP.NET Web Application icon in the Object Repository.We get a similar New ASP.NET Application to what we’ve seen before [in previous chapters of my ASP.NET courseware manual - BS], and this time I’ve entered MasterPageWebApp as name of the application and virtual directory:

When we click on OK, we get one extra entry in the Project Manager for MasterPage1.master and MasterPage1.pas.
The Default.aspx page is also displaying a different empty page now, showing a content placeholder in the designer.
The contents of the Default.aspx page is now as follows: 

  <%@ Page Language="c#" Debug="true" MasterPageFile="~/MasterPage1.master"
    Codebehind="Default.pas" AutoEventWireup="false" Inherits="Default.TDefault"
    Title="Untitled Page" %>

  <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
   Runat="server"> 
  </asp:Content>
No more html body or form, but only a page directive and a content placeholder.The Page directive refers to the masterpage file ~/MasterPage1.master which we’ll examine in a moment.The Title attribute says “Untitled Page” and we can change it here to something else (or leave it empty if we want to control the title from the page in another way).
The asp:Content control is the visual container that we can use in the designer to place the normal ASP.NET controls that we’ve been used to. The MasterPage.master file is the place where the html, body and form tages are found (and since there can be only one html or body tag, this is the reason why a master page cannot be derived from another master page of course).
The contents of the MasterPage.master file can be seen below, including the html, form, and body tags: 
  <%@ Master language="c#" Debug="true" Codebehind="MasterPage1.pas"
    AutoEventWireup="false" Inherits="MasterPage1.TMasterPage1"%>
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  <html>
    <head runat="server">
      <title></title>
    </head>
    <body>
      <form runat="server">
        <div>
          <asp:contentplaceholder id="ContentPlaceHolder1"
           runat="server"></asp:contentplaceholder>
        </div>
      </form>
    </body>
  </html>
Note the asp:contentplaceholder control, which is where the asp:Content control from the Default.aspx page will end up.
The idea of the master-content pages is that we can add any controls or layout definitions “around” the asp:contentplaceholder, that will be shared by all content pages that are using the master page.

New Content Page
To demonstrate this, we can add a new content page to the MasterPageWebApp, using File | New – Other, selecting the ASP.NET Content Page icon from the Object Repository.
This will give a New Content Page dialog were we can specify the name of the new content page, but also can select the master page file to use as master page.
As you can see in the Object Repository, you can also add multiple ASP.NET Master Pages to your project, so you can have entire collections of content pages belonging to one master page (and several different master pages to pick from).

CSS Layouts
The default masterpage is empty, but there are also a number of special CSS Layouts projects that can be used as starting point for master-content page projects. Do File | New – Other, and this time go to the CSS Layouts category of the Delphi for .NET Projects to see the available CSS Layout choices:

The text associated with the nine choices are as follows:

The description of these nine icons may not always be clear and informative enough to help you decide which CSS Layout to pick.That’s why the results of each of them will be shown in a screenshot in the following pages, so you can make up your mind before creatring your own nine sample projects.
Note that eight of these template are taken from (or based on) CSS defintions found at http://intensivstation.ch/en/templates/, where you can also find some more (background) information on these stylesheets.

Dynamic Box Centered
This result consists of a header (brown) and a subheader (green) followed by the content which can be filled in the content pages.The left and right space around the content will remain empty, also in the browser.

Dynamic with Header and Footer
This results in a master page with header (brown) and subheader (green), but also a left (yellow) and right (orange) fixed column around the content placeholder.The complete width of the browser window will be filled with the master page.

Menu Fixed Content and Header Dynamic
This results in a master page with a header (brown) and subheader (green), but also a left (yellow) and right (orange) column around the content placeholder.To be honest, it’s not much different from the last version on the previous page.

Menu Fixed Content Dynamic
This is a mater page with a header (brown) and subheader (green) with only a fixed left (yellow) column next to the content.There is a little empty space around the left and right borders.

Menu Floating
This results in a master page with header (brown) and subheader (green) plus a floating menu (greenish) at the right side, with the content placeholder on the left.There’s a little space left on the left and right side of the screen.

Right Menu and Content Dynamic
This master page also has the menu (blue) at the right side, as well as a content page on the left, but this time without the header and subheader.I’m not sure if I’ll end up using this one a lot, since I often find a header very useful.

Three Columns Fixed Centered
This master page template is similar to the one with the three columns (left, right and content in the middle), plus header and subheader.During design-time, the right column appears to be moved to the left side (probably because the design-time width is not enough)

During run-time, the result is as expected with the right column at the right side, of course:

Two Column Header Footer
This master page results in a header (green), left column, a little space between the left column and the content placeholder, plus a handy footer.
This is the only template not taken from http://intensivstation.ch/en/templates/.

Two Columns Fixed Centered
This template is almost the same as the previous one, with the exception that we have a header and subheader, and the two columns are aligned to each other without space in between.

ASP.NET Web Navigation
New in ASP.NET 2.0 is the Web Navigation category of controls, which contains the Menu, SiteMapPath and TreeView components. We can extend the MasterPageWebApp with these controls in order to show how the new navigation capabilities of ASP.NET work.
Do File | New – Other, and go to the ASP.NET Files category of the Object Repository again, where we can find a new icon called Site Mape:

Double-click on the Site Map icon to add a new web.sitemap file to the ASP.NET project. A sitemap is a special XML file that can be used by several ASP.NET 2.0 controls to feed the menu and sitemap controls.
By default, the web.sitemap file has the following contents: 

  <?xml version="1.0" encoding="utf-8" ?>
  <siteMap>
      <siteMapNode url="" title="" description="">
          <siteMapNode url="" title="" description="" />
          <siteMapNode url="" title="" description="" />
      </siteMapNode>
  </siteMap>
As you can see, the siteMapNode sections can be nested, which explains why the result can be used by menu, treebiew as well as sitemap controls.
For a menu that contains four top level items (Home, Products, Services and About) and some sub-items, the web.sitemap can be defined as follows: 
  <?xml version="1.0" encoding="utf-8" ?>
  <siteMap>
   <siteMapNode url="" title="root" description="">
    <siteMapNode url="Default.aspx" title="Home" description="" />
    <siteMapNode url="Products.aspx" title="Products" description="">
      <siteMapNode url="Licenses.aspx" title="Licenses" description="" />
      <siteMapNode url="Courseware.aspx" title="Courseware" description="" />
      <siteMapNode url="http://stores.lulu.com/drbob42" title="Books at Lulu" />
    </siteMapNode>
    <siteMapNode url="Services.aspx" title="Services" description="">
      <siteMapNode url="Training.aspx" title="Training" description="" />
      <siteMapNode url="Consultancy.aspx" title="Consultancy" description="" />
      <siteMapNode url="Development.aspx" title="Development" description="" />
      <siteMapNode url="Coaching.aspx" title="Coaching" description="" />
    </siteMapNode>
    <siteMapNode url="About.aspx" title="About" description="" >
      <siteMapNode url="http://www.bobswart.com" title="Bob Swart" />
      <siteMapNode url="http://www.linkedin.com/in/drbob42 " title="LinkedIn" />
      <siteMapNode url="http://drbob42.hyves.net/" title="Hyves" />
    </siteMapNode>
   </siteMapNode>
  </siteMap>
Note that the description is not always required, and the url attribute can also point to an external resource (with the http:// prefix).Also note that we need an empty “root” item to allow multiple top-level menus to be shown at once.
With this content of the web.sitemap file, we can feed the Web Navigation controls.But first we need a datasource to hold the information.This is the SiteMapDataSource control, which can be found in the Web Data categorie of the Tool Palette. For maximum effect, place the SiteMapDataSource on the master page. It will automatically read the contents of the web.sitemap file.
As soon as we place the SiteMapDataSource on the master page, a menu pops-up that allows us to select one of the SiteMapDataSource Tasks.

In this case only Refresh Schema, which is useful if we modify the web.sitemap file and want to refresh the controls bound to it.
We can now place the Web Navigation controls: Menu, SiteMapPath and Treeview on the master page.

Menu
Let’s start with the Menu control, and set the DataSourceID to the SiteMapDataSource component, or use the Choose Data Source smart task to select the SiteMapDataSource component.
As a result, we only see the root menu item, but not the other top level items.This can be changed by setting the StaticDisplayLevels to 2, and Orientation to Horizontal.We can use the Auto Format smart task to select a nice layout, like Classic.

Note that the top level menu items can also be selected. If you want menu items to be visible but not selectable, you need to make sure their url attribute is empty.Also note the URL in the statusbar of the browser: if the description attribute in the web.sitemap file is used, then this description will be displayed here as toolbar tip on the menu item:

The next control we can use if the TreeView. We can also place this on the master page, and use the Choose Data Source smart task to set its DataSourceId to the SiteMapDataSource control.
We can use the Auto Format smart task to give the treeview a nice look and feel.

Such a treeview layout is perfect for the left column of one of the CSS Layout templates that we’ve seen before, but can also be used in a normal (master) page layout:

The final Web Navigation control is the SiteMapPath. This one can be used to show the current location in the menu path, and is a nice navigational aid as well.Using the Auto Format smart task we can also make this control look a bit nicer (or you can assign a CssClass to it and use a css stylesheet to specify the way the control looks in the browser).

Note that we do not have to connect any of the properties of the SiteMapPath control.

Summary
In this article, I’ve covered the master-content pages of ASP.NET 2.0, as well as the CSS Layout examples. We also examines the ASP.NET 2.0 navigation controls such as the Menu, Treeview and SiteMapPath.
This article is an abstract from my PDF courseware manual “CodeGear RAD Studio 2007 ASP.NET 2.0 Web Development” which can be purchased from my courseware page for 195 Euro (with support and 12 months of updates to the PDF file).

This webpage © 2008-2010 by Bob Swart (aka Dr.Bob - www.drbob42.com).All Rights Reserved.