|Delphi Clinic||C++Builder Gate||Training & Consultancy||Delphi Notes Weblog||Dr.Bob's Webshop|
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).
<%@ 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.
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).
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:
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.
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.
<?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.
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.
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.
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).