ASP.NET 2.0 Site Navigation Features
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):
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:
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 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):
<asp:SiteMapPath ID=”SiteMapPath1″ runat=”server”>
You can also then use the new 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 and 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.
