The default method to handing the asp:Menu is to have a single RootNode (default is ‘Home’) and use hover-over menus to drill down. In my case, I wanted to have a row of items going across the top of my webpage like so:
instead of the default layout that looks like this:
Understanding App_Code\ISESiteMapProvider.cs
So, software such as Interprise is special. It can’t just use a normal SiteMap stuck in a file somewhere. They need to be dynamic. The Categories and Manufacturers are obvious, but what about showing something like the nearest store? Or how about if you are a “Woot” style company and want to have a “Quantity Remaining: 481” link on your menu? To allow all this functionality, Interprise turned to XmlPackages.
XmlPackages, and how they work, are outside the scope of this post, but they allow you to take a group of data sources (Query strings, SQL Servers, RSS Feeds, Locale information, etc.) and combine them using XML/XSLT to render content (usually HTML or XML).
Interprise uses a two step system for its SiteMap. First the SkinBase gets the contents of XmlPackages\page.menu.xml.config via App_Code\ISESiteMapFactory.cs. Then it takes that information, localizes some strings (everything with the (!menu.YourAccount!) style syntax) via your string tables, and finally it pulls all your categories, section, and/or manufacturers. This is all done with magic in App_Code\ISESiteMapProvider.cs.
Now, to reach our goal, you would be thinking that all we need to do is change the starting node used in ISESiteMapProvider, but doing so creates an invalid sitemap (more on this in a bit). So, we leave this alone for now…
Setting Up the New SiteMap
First thing we need to do is edit the default SiteMap to move ‘Home’ alongside the other categories and create a new empty RootNode. We need a RootNode because Microsoft’s standard requires one, and only one, RootNode. While I have linked to the docs, it is good to point out that Urls must be unique, you cannot have two links pointing to the same page in a single SiteMap.
As I mentioned above, the required file is located at XmlPackages\page.menu.xml.config. Here is an example after moving Home to be along the rest of my nodes and adding a new RootNode to be ignored:
- <xsl:template match="/">
- <siteMap>
- <siteMapNode title="this gets ignored">
- <siteMapNode title="Home" url="default.aspx" />
- <!-- Titles are predefined entities, the contents are not explicitly set here but runtime they are dynamically populated per entity-->
- <siteMapNode title="(!menu.Categories!)" />
- <siteMapNode title="(!menu.Manufacturers!)" url="manufacturers.aspx" />
- <!-- These are static links -->
- <siteMapNode title="(!menu.CustomerService!)" url="t-service.aspx" >
- <siteMapNode title="(!menu.YourAccount!)" url="account.aspx" />
- <siteMapNode title="(!menu.FAQs!)" url="t-faq.aspx" />
- <siteMapNode title="(!menu.PolicyReturns!)" url="t-returns.aspx" />
- <siteMapNode title="(!menu.Shipping!)" url="t-shipping.aspx" />
- <siteMapNode title="(!menu.Contact!)" url="t-contact.aspx" />
- <siteMapNode title="(!menu.PolicyPrivacy!)" url="t-privacy.aspx" />
- <siteMapNode title="(!menu.PolicySecurity!)" url="t-security.aspx" />
- <siteMapNode title="(!menu.LeadForm!)" url="t-Leadform.aspx" />
- </siteMapNode>
- </siteMapNode>
- </siteMap>
- </xsl:template>
Changing App_Code\SkinBase.cs
Now that we have our new and improve SiteMap, we need to tell our SkinBase class to handle the SiteMapNode information explicitly instead of relying on data binding. Again, this is required because even if we wanted to replace the ISESiteMapProvider, we still would be stuck with a single root node.
Edit the SetupTelerikMenu() method inside App_Code\SkinBase.cs replacing the commented lines with this block:
- // Explicit Menu setup inside SetupTelerikMenu()
- SiteMapDataSource ds = new SiteMapDataSource();
- ds.Provider = ISESiteMapProviderFactory.Instance.GetProvider(ThisCustomer.LocaleSetting);
- //telerikMenu.DataSource = ds;
- //telerikMenu.DataBind();
- SetupRadMenu(telerikMenu, ds.Provider as SiteMapProvider);
If you are trying to use the asp:Menu control instead of the Telerik control you would want to edit SetupMenu() instead.
Now we just have to add the SetupRadMenu method and its related code. Again, if you are using the asp:Menu instead, just change instances of RadMenu to System.Web.UI.WebControls.Menu. Add these methods to your App_Code\SkinBase.cs:
- private void SetupRadMenu(RadMenu menu, SiteMapProvider provider)
- {
- // Use this one for a single root
- //BuildNodes(menu, null, provider.RootNode);
-
- // Use this one for multiple roots
- foreach (SiteMapNode node in provider.RootNode.ChildNodes)
- BuildNodes(menu, null, node);
- }
- public void BuildNodes(RadMenu menu, RadMenuItem item, SiteMapNode node)
- {
- var CurrentItem = AddNodeToMenu(menu, item, node);
-
- foreach (SiteMapNode CurrentChildNode in node.ChildNodes)
- {
- BuildNodes(menu, CurrentItem, CurrentChildNode);
- }
- }
-
- private RadMenuItem AddNodeToMenu(RadMenu menu, RadMenuItem item, SiteMapNode node)
- {
- var ThisItem = new RadMenuItem();
- ThisItem.Text = node.Title;
- ThisItem.NavigateUrl = node.Url;
-
- if (item == null)
- menu.Items.Add(ThisItem);
- else
- item.Items.Add(ThisItem);
-
- return ThisItem;
- }
and that’s it for SkinBase. Notice that I left the ability to revert back to a single root node just by uncommenting a section of SetupRadMenu and commenting out the other.
Skin Template.ascx
And just for completeness, here is what your Templace.ascx might look like. Again, I am using a Telerik menu instead of the ASP.NET Menu, but you get the idea I am sure:
- <telerik:RadMenu runat="server" ID="aspnetMenu" Skin="TTX" EnableEmbeddedSkins="false" />
Notice that there is nothing ‘special’ here, everything is handled in SkinBase.
Next Steps
If you are following my series here, you will notice that we have a Telerik menu, and now we have complete control over what we are displaying on it, while still using the dynamic items from the ISESiteMapProvider.cs. But where can we take this? Here is my next step:
But that will have to wait until I get a bit more time to write everything down. But trust me, it might be awesome.
Subscribe