ASP.NET 4 : Web Site Navigation (part 3) - Trapping the SiteMapResolve Event, Defining Custom Attributes for Each Node

4. Trapping the SiteMapResolve Event

ASP.NET is full of extensibility points. They're all over the place—and the navigation architecture is no exception. ASP.NET site map support includes an application-wide event that informs listeners (usually the application object) whenever the end user is navigating through the Web site using a control connected to the site map data. Here's an example that shows how to handle that event.

Handling the SiteMapResolve event

1. You can add the SiteMapResolve handler anywhere in the project. In this example, you add it to the global application object. Open the file Global.asax, which Visual Studio has created for you already.

2. Add a SiteMapResolve event handler to the Global.asax file you just added. The handler can do whatever you want it to do. The example here clones the SiteMapNode object that's passed in by the event arguments. (By cloning the node, the handler avoids modifying the underlying data structure.) Then, the handler modifies the node's Title field to add the phrase "(you are here)." (Note that you see this only if the Title field is displayed by your navigation control. The SiteMapPath control displays it by default.) After finishing the handler, update Application_Start to connect the handler to the SiteMapResolve event in the Application_Start handler of Global.asax:

   <%@ Application Language="C#" %>
   
   <script runat="server">
   
       void Application_Start(object sender, EventArgs e)
       {
           SiteMap.SiteMapResolve +=
            new SiteMapResolveEventHandler(ResolveNode);
       }
   
       SiteMapNode ResolveNode(object sender,
                               SiteMapResolveEventArgs e)
       {
           SiteMapNode n = e.Provider.CurrentNode.Clone();
           n.Title = n.Title + " (you are here)";
           return n;
       }
   
       ...
   </script>

3. Now run the site and navigate through the pages. You should see the title of each SiteMapNode change as you page through the site. This is reflected by the display name in the SiteMapPath control. The following graphic shows the site map path control with the modified title:

   

5. Defining Custom Attributes for Each Node

Another way to extend your Web application's navigation is to define custom attributes for the site nodes in web.sitemap and retrieve them at run time. Imagine that you want to associate a specific image with each page in your site. To accomplish this, just create a new attribute and specify it in the siteMapNode element in the site map data.

ASP.NET site map navigation support makes it very easy to add arbitrary attributes to each node. In this example, you add JPEG URLs to the site map nodes. As each page is loaded, the master page shows the JPEG in an Image control. The following example shows how to add custom attributes to the site map nodes.

Adding custom attributes to the site map

1. Add six new JPEGs to the project—one to represent each kind of page. For example, produce separate JPEGs for the home page, the products page, the three contact pages, and the support page. Update the web.sitemap file to include an ImageURL property in each siteMapNode element, like so:

   <?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="This is the home page"
       ImageURL="~/homeimage.jpg">
       <siteMapNode url="~/Products.aspx" title="Products"
         description="This is the products page"
         ImageURL="~/productsimage.jpg" />
       <siteMapNode url="~/Support.aspx" title="Support"
         description="This is the support page"
         ImageURL="~/supportimage.jpg"/>
       <siteMapNode url="~/Contact.aspx" title="Contacts"
         description="This is the contacts page"
         ImageURL="/contactimage.jpg">
         <siteMapNode url="~/ContactAddress/ContactAddress.aspx"
           title="Contact using physical address"
           description="This is the first contact page"
           ImageURL="~/contactPhysicalAddressimage.jpg"/>
         <siteMapNode url="~/ContactEmailPhone/ContactEmailPhone.aspx"
           title="Contact by email or phone"
           description="This is the second contact page"
           ImageURL="~/contactPhoneimage.jpg" />
     </siteMapNode>
   
     </siteMapNode>
   </siteMap>

2. Programmatically, the ImageURL custom attribute appears as a property of the node when the nodes are accessed. There are many ways to use the new property. Probably the easiest way is to add an Image control to the master page and update the Image control's ImageUrl property with the value from the node in the master page's Page_Load method.

   public partial class SiteMaster: System.Web.UI.MasterPage
   {
       protected void Page_Load(object sender, EventArgs e)
       {
           SiteMapNode current = SiteMap.CurrentNode;
           string strImageURL = current["ImageURL"];
           if (strImageURL != null)
           {
               this.Image1.ImageUrl = strImageURL;
           }
       }
   }

3. Although setting an image during the master page's Page_Load method is pretty straightforward, it's not the only way to change the UI based on specific SiteMapNode information. For example, you might handle the OnMenuItemDataBound event and set any custom properties there. The following two graphics illustrate how the master page plugs in a new image URL each time a postback is issued:

   

   The following graphic shows the products page: