How To: Use Dynamic Images in the ASP.NET SiteMapPath control

ASP.NET offers all kinds of controls for all of your development needs. I'm convinced that in 5 years there will be one control <asp:YourWebsite runat=”server”/> However, until that part there is still use for us programmers. Recently, I had use to use a new one and I thought I'd share my experience.

So, the SiteMapPath control is very convenient when you are adding breadcrumbs to your web application. However, if you want to make your breadcrumbs a little more dynamic then they are packaged, you will need to do it pro grammatically, I will share my process below. 

Ok, so step one: Creating your site map. Your control needs a datasource , and you have to add that in the form of an asp SiteMap. It's basically an xml page the guts of which look a little like this:

<siteMapNode url="Default,aspx" title="Home" >

<siteMapNode url="DoSomeJunk.aspx" title="Here's Where Users Do Junk" >

<siteMapNode url="AboutUs.aspx" title="About Us" />

</siteMapNode>

 

The outer node is the parent for the others, and that is how you indicate it in the site map. Ok, now creating your SiteMapPath control, your default datasource will be the web.sitemap, if you want it to point to a different site map you can set the SiteMapProvider property.

 

Your default SiteMapPath ends up coming out like this:

 

 

<asp:SiteMapPath ID="siteMapPath" runat="server">

</asp:SiteMapPath>

 

Now, you can leave it like that and it will look like this when you are on the About Us page:

 

Home > About Us

 

However, some of us like adding some snazz to our apps. My designer gave me breadcrumbs that look like kind of like this:

  HOME LOCAL SEARCH

 

Now, the SiteMapPath allows you to add images inbetween your links by populating the SMP (SiteMapPath)'s “PathSeparatorTemplate” property. There are a few templates in the SMP, the others are “CurrentSeperatorTemplate” which is the node that represents the page you are on, the “ParentSeperatorTemplate” which is the parent node (obv), and the “RootSeperatorTemplate (you get the drift). You can put an image in the PathSeperatorTemplate, or some words, a picture of your kids... whatever you want, and it will go between each one of your nodes like so:

 

However, since I had different pictures inbetween each of my nodes I needed to dynamically load the images in runtime after testing which nodes were displayed and where. Upon learning that the SMP had a ItemDataBound event I was able to load I t like a repeater (a control I use a little more often.) There are two ways to do this, I used an if statement,but it got a little long... It looks like this:

 

 

protected void siteMapPath_ItemDataBound(object sender, SiteMapNodeItemEventArgs e)

{

 

      var node = e.Item.SiteMapNode;

      if (e.Item.ItemType == SiteMapNodeItemType.PathSeperator)|

     {

          if (node.Url == "/Default.aspx")

         {

               ((Image) e.Item.FindControl("imgNode")).ImageUrl = "~/Images/blue-dot-small.gif";

         }

        if (node.Url == "/Classifieds.aspx")

        {

          ((Image) e.Item.FindControl("imgNode")).ImageUrl = "~/Images/green-dot-small.gif";

        }

 

        if (node.Url == "/ViewCalendar.aspx")

        {

             ((Image) e.Item.FindControl("imgNode")).ImageUrl = "~/Images/grey-dot-small.gif";

       }

}

}

 

So I graduated to naming my images after my pages and did this:

 

protected void siteMapPath_ItemDataBound(object sender, SiteMapNodeItemEventArgs e)

{

      var node = e.Item.SiteMapNode;

      if (e.Item.ItemType == SiteMapNodeItemType.PathSeperator)

      {

           ((Image) e.Item.FindControl("imgNode")).ImageUrl = "~/Images/" + node.Title + “_Breadcrumb.gif”;

     }

}

 

 

And that, I decided, was the best way, for now. So that's how you add dynamic images to your asp.net SiteMapPath control! Thanks for reading, and as usual: