Republished With Permission - Original Article
Feb 2006 Update: Please also check
out this
new blog posting I did on Site Navigation.
The new Site Navigation features in ASP.NET 2.0 can make
building navigation structures across a web-site much easier.
Scott Mitchell has published a good quick overview
of the new ASP.NET 2.0 Site Navigation features if you aren’t familiar with
them yet and want to come up to speed quickly. There is also a ton of
information on it on MSDN,
and Danny Chen from the ASP.NET team has some extra great information on his blog.
At a high-level, the new Site Navigation features allow you
to define (outside of code or pages) the “site map” structure of how your site
is laid out. Specifically, it allows you to define the relationships between
pages on the site – what is the “home” entry-point, what are the sub-sections
of it, and how individual pages fit within it. This information is cached by
ASP.NET, and you can then get access to this sitemap structure at runtime.
ASP.NET includes a basic built-in XML based SiteMap provider
that allows you to define this site structure within an XML file whose default
name is “web.sitemap” (note: you can change the name if you want). For
example, the below web.sitemap XML file example defines a sitemap with several
levels of hierarchy (a homepage root, then three sub-nodes, and under the
products node three additional sub-nodes):
Listing 1
<?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="The WebSite's Home Page">
<siteMapNode url="Products.aspx" title="Products" description="Product Listing Section of Site">
<siteMapNode url="Software.aspx" title="Software" description="Software Products" />
<siteMapNode url="Hardware.aspx" title="Hardware" description="Hardware Products" />
<siteMapNode url="Services.aspx" title="Services" description="Service Products" />
</siteMapNode>
<siteMapNode url="Documentation.aspx" title="Documentation" description="Documentation about something"/>
<siteMapNode url="About.aspx" title="About" description="About the Company"/>
</siteMapNode>
</siteMap>
The simplest way as a page developer to access the site-map
at runtime (and figure out where the current page is within it) is by using the
new “SiteMap” property on pages.
For example, the below code snippet shows a pretty simple
scenario of how you could use the SiteMap system to dynamically build a
“bread-crumb” UI on your page to provide a way for users visiting the site to
see what page or section of the site they were within, and allow them to
quickly navigate up the hierarchy chain:
Listing 2
SiteMapNode node = SiteMap.CurrentNode;
do
{
HyperLink link = new HyperLink();
link.NavigateUrl = node.Url;
link.Text = node.Title;
SiteHierarchy.Controls.AddAt(0, link);
Label label = new Label();
label.Text = " >> ";
SiteHierarchy.Controls.AddAt(0, label);
node = node.ParentNode;
}
while (node != null);By adding a placeholder or label control called
“SiteHierarchy” in your .aspx page, then the above code will dynamically
generate a hierarchy with this UI when the Software.aspx page is accessed:
>> Home >> Products >> Software
An even simpler way to achieve this is to use the new
<asp:sitemappath> server control – which encapsulates and provides the
breadcrumb UI logic for you (the control is also templated – so you can
override the rendering using templates defined either inline or in an external
skin file):
Listing 3
<asp:SiteMapPath ID="SiteMapPath1"runat="server">
You can also then use the new <asp:SiteMapDataSource>
control to data-bind any control to the SiteMap (for example: you can databind
a GridView, or DataList to one). Two new controls in ASP.NET 2.0 are the
<asp:treeview> and <asp:menu> that will probably be the most
popular way to databind to the SiteMap and provide a hierarchical UI navigation
structure.
What is great about ASP.NET 2.0 is that you can do all these
navigation things in conjunction with the new Master Pages feature – so that
you could define a breadcrumb or menu in one .master file, and then have every
page on the site pick it up and include it (and the navigation shown will be
relative to the .aspx page using the master page – not the master page
itself).
The combination lets you whip up navigation structure and UI
in only a few minutes, and provides the flexibility for you to dive down and
customize things even further if necessary.
