Creating a UL SiteMap Menu
It's been awhile since I last bloged! I'm still alive and still working on my ASP.Net 2.0 project.
Today I was working on a new menu and I wanted to use the unordered list approach (UL) and I wanted it to be driven by the web.sitemap file. After some googling I came across this post by Danny Chen which uses a repeater control and then goes on to create a template control. Close to what I wanted, but I really didn't need a template, just a simple list with a class declaration on the active menu item. I also found this post by Jeff Lynch which talked about the need for a simple sitemap menu. So I created one. :)
The code is pretty simple. It is made up of two classes and it currently renders all the items in the sitemap starting with the root. This suites my needs perfectly so I'm not adding any other features, but it would be very easy to customize this to add more hierarchies. Below is the code for the SimpleSiteMenu and SimpleMenuItem controls:
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.Collections;
using System.Web.UI;
using System.Web;
namespace DavisTwelve.Web.Controls
{
public class SimpleSiteMenu : CompositeDataBoundControl
{
private string _activeCssClass;
public string ActiveItemCssClass
{
get { return _activeCssClass; }
set { _activeCssClass = value; }
}
private string _itemCssClass;
public string ItemCssClass
{
get { return _itemCssClass; }
set { _itemCssClass = value; }
}
private int AddChildNodes(SiteMapNode node, SiteMapNode current)
{
int count = 0;
foreach (SiteMapNode child in node.ChildNodes)
{
count++;
Controls.Add(new SimpleMenuItem(child, GetCssClass(child, current)));
count += AddChildNodes(child, current);
}
return count;
}
private string GetCssClass(SiteMapNode node, SiteMapNode current)
{
if (node == current)
{
return _activeCssClass ?? _itemCssClass;
}
else
{
return _itemCssClass;
}
}
protected override int CreateChildControls(IEnumerable dataSource, bool dataBinding)
{
int count = 0;
SiteMapNode current = null;
SiteMapNodeCollection nodes = dataSource as SiteMapNodeCollection;
SiteMapDataSource siteMap = this.GetDataSource() as SiteMapDataSource;
if (dataBinding && nodes != null)
{
if (siteMap != null)
{
current = siteMap.Provider.CurrentNode;
}
foreach (SiteMapNode node in nodes)
{
count++;
Controls.Add(new SimpleMenuItem(node, GetCssClass(node, current)));
count += AddChildNodes(node, current);
}
}
return count;
}
public override void RenderBeginTag(System.Web.UI.HtmlTextWriter writer)
{
writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID);
writer.RenderBeginTag(HtmlTextWriterTag.Ul);
}
public override void RenderEndTag(System.Web.UI.HtmlTextWriter writer)
{
writer.RenderEndTag();
}
}
}
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.Web;
namespace DavisTwelve.Web.Controls
{
public class SimpleMenuItem : WebControl
{
string _url;
string _title;
string _cssClass;
public SimpleMenuItem(SiteMapNode node, string cssClass)
{
_url = node.Url;
_title = node.Title;
_cssClass = cssClass;
}
protected override void Render(HtmlTextWriter writer)
{
if (!string.IsNullOrEmpty(_cssClass))
{
writer.AddAttribute(HtmlTextWriterAttribute.Class, _cssClass);
}
writer.RenderBeginTag(HtmlTextWriterTag.Li);
writer.AddAttribute(HtmlTextWriterAttribute.Href, _url);
writer.RenderBeginTag(HtmlTextWriterTag.A);
writer.Write(_title);
writer.RenderEndTag(); // a
writer.RenderEndTag(); // li
}
}
}
To use the control just add a SiteMapDataSource to the page and then set the DataSourceID to the data source's id.
BTW - Thanks to Jeff Atwood for the cool copy as RTF macro.