Master page & Navigation - 2 © Minder Chen, 1994-2006
Microsoft ASP.NET 2.0 UI Features
• Master Pages– Manage the “skeleton” of your site– Manage the XHTML
• Themes– Manage the CSS.– Manage the “skin” of your site
• Menu, Tree View, “Breadcrumbs”– Tools to get around your site
• Themes and Skins– CSS
• Additional UI Ticks and Tips
Master page & Navigation - 4 © Minder Chen, 1994-2006
Master Page Basics
• Masters define common content and placeholders (<asp:ContentPlaceHolder>)
• Content pages reference masters and fill placeholders with content (<asp:Content>)
<%@ Master %>
<asp:ContentPlaceHolder ID="Main" RunAt="server" />
<%@ Master %>
<asp:ContentPlaceHolder ID="Main" RunAt="server" />
<%@ Page MasterPage- File="Site.master" %>
<asp:Content ContentPlaceHolderID= "Main" RunAt="server" />
</asp:Content>
<%@ Page MasterPage- File="Site.master" %>
<asp:Content ContentPlaceHolderID= "Main" RunAt="server" />
</asp:Content>
Site.master default.aspx http://.../default.aspx
Master page & Navigation - 5 © Minder Chen, 1994-2006
Resulting PageResulting Page
Master Page Architecture
< asp :ContentPlaceHolder
runat = server
ContentName = ”Main” />
< asp :ContentPlaceHolder
runat = server
ContentName = ”Footer” / >
< % @ Master % >
.Master file “A.master”Master file “A.master”
< % @ Page
Master = ”A .master” % >
.
< asp :Content
runat = server
ContentName = ”Footer” >
< / asp :Content >
< asp :Content
runat = server
ContentName = ”Main” >
< / asp :Content >
Content file “B.aspx”Content file “B.aspx”
Master page & Navigation - 9 © Minder Chen, 1994-2006
Defining a Master Page
<%@ Master Language="VB" %>
<html> <body> <!-- Banner shown on all pages that use this master --> <table width="100%"> <tr> <td bgcolor="darkblue" align="center"> <span style="font-size: 36pt; color: white">ACME Inc.</span> </td> </tr> </table>
<!-- Placeholder for content below banner --> <asp:ContentPlaceHolder ID="Main" RunAt="server" /> </body></html>
Master page & Navigation - 10 © Minder Chen, 1994-2006
Master Pages: Creating a master page
1. Create a master page with .master extension
2. Define a master directive:<%@ master .. %>
3. Add content:Can contain any html or control page content
Define replaceable place-holder regions:Use an <asp:contentplaceholder> control
Add default content within it (optional)
Master page & Navigation - 11 © Minder Chen, 1994-2006
Modified Master Page<%@ Master Language="VB" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td colspan="2" style="height: 100px"> <img src="images/asp_net_logo.gif" /> <span style="font-size: 24pt">Minder Chen ASP.NET Learning Web Site</span></td> </tr> <tr> <td style="width: 49px" valign="top"> <asp:Menu ID="Menu1" runat="server"> </asp:Menu> </td> <td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </td> </tr> </table> </div> </form></body></html>
Master page & Navigation - 12 © Minder Chen, 1994-2006
Default Content
• ContentPlaceHolder controls can define content of their own ("default content")
• Default content is displayed ONLY if not overridden by content page
<%@ Master %> ...<asp:ContentPlaceHolder ID="Main" RunAt="server"> This is default content that will appear in the absence of a matching Content control in a content page<asp:ContentPlaceHolder>
Master page & Navigation - 15 © Minder Chen, 1994-2006
Create a Content Page: Applying a Master Page
<%@ Page MasterPageFile="~/MasterPage.master" %>
<asp:Content ContentPlaceHolderID="Main" RunAt="server"> This content fills the content place holder "Main" defined in the master page (site.Master)</asp:Content>
Master page & Navigation - 16 © Minder Chen, 1994-2006
Using a Master Page
1. Create an ASP.NET page (.aspx extension)
2. On the page directive:<%@ page masterpagefile= %> attribute to reference masterSet the title attribute <%@ Page title=“jeff” %>
3. Optionally add content to override the master:a. Only <asp:content> controls or server-side script allowedb. <asp:content> controls replace regions in the master:
The contentplaceholderid identifies master’s region<asp:content> controls can contain any page content
Master page & Navigation - 18 © Minder Chen, 1994-2006
Code for AboutUS.aspx
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"
Title="About US"Title="About US" %>
<asp:Content ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<strong><span style="font-size: 14pt">This is a web site developed
by Minder Chen to help others to learn ASp.NET 1.X and 2.0.
<br />
He has used ASP.NET for more than 3 years by now and has
developed a Web-based Decision Support System using ASP.NET. He can be reached at [email protected]
<br />
</span></strong>
</asp:Content>
Master page & Navigation - 19 © Minder Chen, 1994-2006
Applying a Master Page to a Site
<configuration> <system.web> <pages masterPageFile="~/MasterPage.master" /> </system.web></configuration>
Master page & Navigation - 20 © Minder Chen, 1994-2006
The Page.Master Property
• Retrieves reference to master page– Instance of class derived from
System.Web.UI.MasterPage
– Null if page doesn't have a master
• Used to programmatically access content defined in the master page
– Use FindControl for weak typing
– Use public property in master page for strong typing (preferred)
Master page & Navigation - 21 © Minder Chen, 1994-2006
Site Navigation
• Navigation UIs are tedious to implement– Especially if they rely on client-side script
• New controls simplify site navigation– TreeView and Menu - Navigation User Interface (UI)
– SiteMapDataSource - XML site maps
– SiteMapPath - "Bread crumb" controls
• Public site map API provides foundation
• ProviderProvider-based for flexibility
Master page & Navigation - 22 © Minder Chen, 1994-2006
Site Navigation Schema
Site Navigation API
Site Maps
Web.sitemapOther
Data Stores
ControlsMenuMenu TreeViewTreeView SiteMapPathSiteMapPathSiteMap-
DataSourceSiteMap-
DataSource
SiteMapSiteMap
SiteMapNodeSiteMapNodeSiteMapNodeSiteMapNode SiteMapNodeSiteMapNode
XmlSiteMapProviderXmlSiteMapProvider Other Site MapProviders
Other Site MapProviders
Providers
Master page & Navigation - 25 © Minder Chen, 1994-2006
Create a Site Map
<?xml version="1.0" encoding="utf-8" ?><siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description=""> <siteMapNode url="" title="" description="" /> <siteMapNode url="" title="" description="" /> </siteMapNode></siteMap>
Master page & Navigation - 26 © Minder Chen, 1994-2006
Web.sitemap
• XML document is "very" case sensitive
<?xml version="1.0" encoding="utf-8" ?><siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="Default.aspx" title="Home" description="Home Page"> <siteMapNode url="Assignments.aspx" title="Assignments"
description="Programming assignments"> <siteMapNode url="Assignment1.aspx" title="Assignment 1"
description="Programming assignment 1" /> <siteMapNode url="Assignment2.aspx" title="Assignment 2"
description="Programming assignment 2" /> </siteMapNode> <siteMapNode url="AboutUs.aspx" title="About Us"
description="Authors and purposes"> <siteMapNode url="ContactInfo.aspx" title="Contact information"
description="Contact phones and emails" /> <siteMapNode url="ManagementTeam.aspx" title="Management Teams"
description="Introduction of management teams" /> </siteMapNode> </siteMapNode></siteMap>
Master page & Navigation - 27 © Minder Chen, 1994-2006
SiteMapDataSource• Data source control
representing site maps– Site map = List of pages and
URLs– Nodes can include
descriptive text
• Permits TreeViews and Menus to be populated with links through data binding
• Supports "security trimming"
– Specified nodes visible only to specified roles
• Provider-based for flexible data storage
Master page & Navigation - 29 © Minder Chen, 1994-2006
Menu
• 200+ Properties; here are the top 4:– Orientation = Horizontal
– StaticDisplayLevels = 2
– StaticSubMenuIndent = 0
– DisappearAfter = 300
Master page & Navigation - 30 © Minder Chen, 1994-2006
Menu Control Tag
<asp:Menu ID="Menu1" runat="server" BackColor="#B5C7DE"
DataSourceID="SiteMapDataSource1"DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" Orientation="Horizontal"Orientation="Horizontal" StaticSubMenuIndent="10px">
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" BorderStyle="Groove" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<StaticSelectedStyle BackColor="#507CD1" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
</asp:Menu>
Master page & Navigation - 31 © Minder Chen, 1994-2006
SiteMapPath Controls
• "Bread crumbs" showing path to page– By default, renders current node as static text
– By default, renders parent nodes as hyperlinks
• Highly customizable UI– Nodes can be stylized and templatized
– Separators can be stylized and templatized
• Integrates with site map providers to acquire path info
<asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Size="14pt"> </asp:SiteMapPath>
Master page & Navigation - 32 © Minder Chen, 1994-2006
Stylizing SiteMapPath
<asp:SiteMapPath Font-Name="Verdana" Font-Size="10pt" RunAt="server"> <CurrentNodeStyle Height="24px" BackColor="Yellow" Font-Bold="true" /> <NodeStyle Height="24px" /> <PathSeparatorTemplate> <ItemTemplate> <asp:Image ImageUrl="~/images/arrow.gif" RunAt="server" /> </ItemTemplate> </PathSeparatorTemplate></asp:SiteMapPath>
Master page & Navigation - 33 © Minder Chen, 1994-2006
Menu or Tree: Choosing the right control
Features Menu TreeviewExpansion PopOut Expand in Place
Download on Demand No Yes
Checkboxes No Yes
Templates Yes No
Layout Horizontal & Vertical
Vertical
Mobile & Downlevel Yes Yes
Style Option Static, Dynamic, Level
Level or Parent/Root/Leaf by data item
Selection Model Link & Hover Postback, link & disabled
Master page & Navigation - 38 © Minder Chen, 1994-2006
Style Builder – Build Style Rule
H1{ font-size: 30px; color: yellow; font-style: italic; font-family: 'Comic Sans MS'; background-color: blue; font-variant: small-caps;}
Master page & Navigation - 40 © Minder Chen, 1994-2006
Apply Themes to the Web Site
<configuration>
<system.web>
<pages theme="ThemeName" />
</system.web>
</configuration>
Master page & Navigation - 41 © Minder Chen, 1994-2006
To apply a theme to an individual page
<%@ Page Theme="ThemeName" %>
<%@ Page StyleSheetTheme="ThemeName" %>
Master page & Navigation - 42 © Minder Chen, 1994-2006
Themes: Architecture
• Basically:– Inserts a link to your CSS Style Sheet
– Updates properties on your controls
• Two groups of files:– Your site – Nothing here changes
– Theme A – Style Sheets, Images, Skins
• At runtime these files are associated
Master page & Navigation - 43 © Minder Chen, 1994-2006
Themes: Recommended usage
• Do as much as you can inside the Style Sheet
• Foreground Images can’t be controlled by CSS, so use Skins
• Advanced controls, use Skins
Master page & Navigation - 44 © Minder Chen, 1994-2006
Themes: Advanced scenarios
• StyleSheetTheme vs. “Just” Theme
• Dynamically Switching Themes
• Extreme Changes
Master page & Navigation - 46 © Minder Chen, 1994-2006
SkinFile.skin<%-- Default skin template. The following skins are provided as examples only.1. Named control skin. The SkinId should be uniquely defined because duplicate SkinId's per control type are not allowed in the same theme.
<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" > <AlternatingRowStyle BackColor="Blue" /></asp:GridView>
2. Default skin. The SkinId is not defined. Only one default control skin per control type is allowed in the same theme.
<asp:Image runat="server" ImageUrl="~/images/image1.jpg" />--%>
<asp:Button runat="server" BackColor="Red" ForeColor="White" Font-Name="Arial" Font-Size="9px" SkinID="Red" /> <asp:Button runat="server" BackColor="Blue" ForeColor="Yellow" Font-Name="Arial" Font-Size="14px" />
Master page & Navigation - 48 © Minder Chen, 1994-2006
Sample Code You need to use Theme in order to use Skin
<%@ Page Language="VB" Theme="Theme1" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
End Sub
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h1>Contact Information</h1>
Email:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" SkinID="Red" runat="server" Text="Submit" />
<asp:Button ID="Button2" runat="server" Text="Reset" />
</asp:Content>
Master page & Navigation - 50 © Minder Chen, 1994-2006
UITricksTips.aspx<%@ Page Language="VB" MaintainScrollPositionOnPostback="true" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) LabelMsg.Text = "" LabelDefault.Text = "" If IsPostBack Then
TextBoxPassword.Focus() End If End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) LabelMsg.Text = "Thank you for testing this. Please continue!" End Sub Protected Sub ButtonDefault_Click(ByVal sender As Object, ByVal e As System.EventArgs) LabelDefault.Text = "You click the default button!" End Sub</script><script>function HelloAlert(){ alert("Hello World");} </script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body>
<form id="form1" runat="server" defaultfocus="TextBoxUserName" defaultbutton="buttonDefault">
Master page & Navigation - 51 © Minder Chen, 1994-2006
Continued…<div> <asp:Label ID="LabelUserName" runat="server" Text="<u>U</u>ser Name:" AssociatedControlID="TextboxUserName"></asp:Label> <asp:TextBox ID="TextBoxUserName" AccessKey="u" runat="server"
AutoCompleteType="displayName" /> <asp:RequiredFieldValidator ID="RequiredFieldValidatorUserName" runat="server" ErrorMessage="User name for secured login" ControlToValidate="TextboxUserName"
ValidationGroup="userlogin" ></asp:RequiredFieldValidator> <br /> <asp:Label ID="LabelPassword" runat="server" AccessKey="p" AssociatedControlID="TextboxPassword" Text="<u>P</u>assword:"></asp:Label> <asp:TextBox ID="TextBoxPassword" runat="server" > </asp:TextBox> <br /> <asp:Button ID="buttonSumit" runat="server" Text="Secured Login"
ValidationGroup="userlogin" /> <br /> <br /> <br /> <br /> <asp:Label ID="LabelEmail" runat="server" AccessKey="p" AssociatedControlID="TextboxEmail" Text="<u>E</u>mail:"></asp:Label><asp:TextBox ID="TextBoxEmail" runat="server"> </asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Email is required for login with email" ControlToValidate="TextboxEmail"
ValidationGroup="email" ></asp:RequiredFieldValidator> <br /> <asp:Button ID="buttonLoginWithEmail" runat="server" Text="Login with Email"
ValidationGroup="email" OnClientClick="HelloAlert();" /> <br /> <asp:Image ID="Image1" runat="server" AlternateText="ASP.NET Logo"
ImageUrl="~/images/asp_net_logo.gif" DescriptionUrl="~/AboutUs.aspx" /><br /> <br />
Master page & Navigation - 52 © Minder Chen, 1994-2006
Continued… <asp:Button ID="ButtonDefault" runat="server" Text="Default Button"
OnClick="ButtonDefault_Click" />
<asp:Label ID="LabelDefault" runat="server"></asp:Label><br /> Test<br />
Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br />
<asp:Button ID="Button1" runat="server" Text="Test Keep Scroll Position" OnClientClick="return confirm('Are you sure you want to submit?');"
OnClick="Button1_Click" /> <asp:Label ID="LabelMsg" runat="server"></asp:Label></div> </form></body></html>
Master page & Navigation - 54 © Minder Chen, 1994-2006
TreeView Controls
• Render hierarchical data as trees– Expandable and collapsible branches
– Nodes are navigable, selectable, or static and can include check boxes
• Content defined by TreeNode objects– TreeNodes can be added declaratively,
programmatically, or through data binding
– TreeNodes can also be demand-loaded
• Highly customizable UI
Master page & Navigation - 55 © Minder Chen, 1994-2006
Declaring a TreeView
<asp:TreeView RunAt="server> <Nodes> <asp:TreeNode Text="Training" RunAt="server"> <asp:TreeNode Text="Programming .NET" RunAt="server" Navigateurl="Classes.aspx?id=1" /> <asp:TreeNode Text="Programming ASP.NET" RunAt="server" NavigateUrl="Classes.aspx?id=2" /> <asp:TreeNode Text="Programming Web Services" RunAt="server" NavigateUrl="Classes.aspx?id=3" /> </asp:TreeNode> <asp:TreeNode Text="Consulting" RunAt="server" NavigateUrl="Consulting.aspx" /> <asp:TreeNode Text="Debugging" RunAt="server" NavigateUrl="Debugging.aspx" /> </Nodes></asp:TreeView>
Master page & Navigation - 56 © Minder Chen, 1994-2006
Key TreeView Properties
Name Description
ShowExpandCollapse Specifies whether expand/collapse indicators are shown
ExpandDepth Specifies the TreeView's initial expand depth
LevelStyles Specifies appearance of nodes by level
RootNodeStyle Specifies appearance of root nodes
LeafNodeStyle Specifies appearance of leaf nodes
SelectedNodeStyle Specifies appearance of selected nodes
HoverNodeStyle Specifies appearance of nodes when cursor hovers overhead
NodeStyle Specifies default appearance of nodes
Master page & Navigation - 58 © Minder Chen, 1994-2006
XML Site Map
<siteMap> <siteMapNode title="Home" description="" url="default.aspx"> <siteMapNode title="Training" url="Training.aspx" description="Training for .NET developers"> <siteMapNode title="Programming .NET" url="Classes.aspx?id=1" description="All about the .NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services" /> </siteMapNode> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for .NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> </siteMapNode></siteMap>
Master page & Navigation - 59 © Minder Chen, 1994-2006
TreeViews and Site Maps
<asp:SiteMapDataSource ID="SiteMap" RunAt="server" /><asp:TreeView DataSourceID="SiteMap" RunAt="server" />
<siteMap> <siteMapNode title="Home" description="" url="default.aspx"> <siteMapNode title="Training" url="Training.aspx" description="Training for .NET developers"> <siteMapNode title="Programming .NET" url="Classes.aspx?id=1" description="All about the .NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services" /> </siteMapNode> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for .NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> </siteMapNode></siteMap>
<siteMap> <siteMapNode title="Home" description="" url="default.aspx"> <siteMapNode title="Training" url="Training.aspx" description="Training for .NET developers"> <siteMapNode title="Programming .NET" url="Classes.aspx?id=1" description="All about the .NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services" /> </siteMapNode> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for .NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> </siteMapNode></siteMap>
Web.sitemap
Master page & Navigation - 60 © Minder Chen, 1994-2006
Changing the File Name
<configuration> <system.web> <siteMap> <providers> <remove name="AspNetXmlSiteMapProvider" /> <add name="AspNetXmlSiteMapProvider" type="System.Web.XmlSiteMapProvider, System.Web, ..." siteMapFile="Acme.sitemap" /> </providers> </siteMap> </system.web></configuration>
Master page & Navigation - 61 © Minder Chen, 1994-2006
<siteMapNode> Attributes
Name Description
description Description of node
roles Role or roles for which this node is visible*
title Title of this node
url URL of this node
* Multiple roles can be specified using comma- or semicolon-delimited lists
Master page & Navigation - 62 © Minder Chen, 1994-2006
Security Trimming
<siteMap> <siteMapNode title="Home" description="" url="default.aspx"> <siteMapNode title="Announcements" url="Announcements.aspx" description="Information for all employees" roles="*" /> <siteMapNode title="Salaries" url="Salaries.aspx" description="Salary data" roles="Managers, CEOs" /> <siteMapNode></siteMap>
Visible only to Managersand CEOs
Visible to everyone
Master page & Navigation - 63 © Minder Chen, 1994-2006
Enabling Security Trimming
<configuration> <system.web> <siteMap> <providers> <remove name="AspNetXmlSiteMapProvider" /> <add name="AspNetXmlSiteMapProvider" type="System.Web.XmlSiteMapProvider, System.Web, ..." securityTrimmingEnabled="true" siteMapFile="web.sitemap" /> </providers> </siteMap> </system.web></configuration>
Master page & Navigation - 64 © Minder Chen, 1994-2006
SiteMapDataSource Properties
Name Description
SiteMapProvider Name of provider used to obtain site map data
StartingNodeOffset Starting node identified by level (default = 0)
StartingNodeUrl Starting node identified by URL
StartFromCurrentNode Specifies whether starting node should be the root node(false) or the current node (true). Default = false
Provider Provider used to obtain site map data
ShowStartingNode Specifies whether to show the root node
Master page & Navigation - 65 © Minder Chen, 1994-2006
Hiding the Root Site Map Node
<asp:SiteMapDataSource ID="SiteMap" ShowStartingNode="false" RunAt="server" /><asp:TreeView DataSourceID="SiteMap" RunAt="server" />
<siteMap> <siteMapNode title="Home" description="" url="default.aspx"> <siteMapNode title="Training" url="Training.aspx" description="Training for .NET developers"> <siteMapNode title="Programming .NET" url="Classes.aspx?id=1" description="All about the .NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services" /> </siteMapNode> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for .NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> </siteMapNode></siteMap>
<siteMap> <siteMapNode title="Home" description="" url="default.aspx"> <siteMapNode title="Training" url="Training.aspx" description="Training for .NET developers"> <siteMapNode title="Programming .NET" url="Classes.aspx?id=1" description="All about the .NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services" /> </siteMapNode> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for .NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> </siteMapNode></siteMap>
Web.sitemap
Master page & Navigation - 66 © Minder Chen, 1994-2006
Using SiteMapPath
<asp:SiteMapPath RunAt="server" />
Master page & Navigation - 67 © Minder Chen, 1994-2006
Key SiteMapPath Properties
Name Description
CurrentNodeStyle Style used to render the current node
CurrentNodeTemplate HTML template used to render the current node
NodeStyle
NodeStyleTemplate
PathSeparatorStyle Style used to render node separators
PathSeparatorTemplate
Style used to render non-current nodes
HTML template used to render non-current nodes
HTML template used to render node separators
PathSeparator Text used for node separators (default = ">")
Master page & Navigation - 68 © Minder Chen, 1994-2006
Site Map Providers
• Site maps are provider-based– Provider interprets site map data and provides it
to SiteMapDataSource controls
– Provider also tracks current position and provides it to SiteMapPath controls
• ASP.NET 2.0 ships with one provider– XmlSiteMapProvider
• Use custom providers for other data stores
Master page & Navigation - 69 © Minder Chen, 1994-2006
Site Map API
• System.Web.SiteMap represents site maps– RootNode property identifies root node
– CurrentNode property identifies current node
• SiteMapNode represents nodes– Interrogate properties of node
– Walk up, down, and sideways in the hierarchy
• The magic underlying SiteMapPath controls
• Great for customizing SiteMapPaths
Master page & Navigation - 70 © Minder Chen, 1994-2006
Using the Site Map API
' Write the title of the current node to a Label controlLabel1.Text = SiteMap.CurrentNode.Title
' Write the path to the current node to a Label controlDim node As SiteMapNode = SiteMap.CurrentNodeDim builder As New StringBuilder (node.Title)
While Not (node.ParentNode Is Nothing) node = node.ParentNode builder.Insert (0, " > ") builder.Insert (0, node.Title)End While
Label1.Text = builder.ToString ()
Master page & Navigation - 71 © Minder Chen, 1994-2006
SiteMap.ResolveSiteMap
• Fired by SiteMapPath controls
• Used to perform on-the-fly customization of paths displayed by SiteMapPath controls
– Add nodes to site map for pages that don't appear in the site map
– Change the properties of the current node
• Register handler in Application_Start