Friday, July 5, 2013

Multi Level ASP.NET Menu with CSS Friendly Control AdaptersBuilding the New Code Camp Web Site (Part 2)

Article Series
(Source Code Available in Article 6 Below – (Added March 2009))
Article 1:

Article 2:

Article 3:

Article 4:

Article 5:

Article 6:


If you have complex styling issues involving ASP.NET we are experts and might be able to help. This technique is fairly old however newer methods could be used for similar results. Contact Peter Kellner and his associates .

It’s often the case that brilliant designers will make interfaces that are hard to implement using standard frameworks like ASP.NET.  As Software engineers striving for consistency, we always want to do the best we can with the standard tool kits to take advantage for built in functionality.  built in menu system is a perfect example.  If you use that menu system, you get to make very simple declarative site maps by simply using the
The requirement faced today has to do with building the web site for our .  We have that brilliant designer I mentioned above, and he has made a design that just seems too perfect to compromise.  Here are some screen shots of how the designer envisions the sight looking and working after it is completed.





Notice the interesting behavior of the top menu (REGISTER;PROGRAM;NEWS;ABOUT AND WIKI).  Unselected, the bottom line strip is the same as selected.  When selected, the background of the selection changes to a different shade of the same color as the bottom strip.
Also notice the interesting behavior of the secondary menu. that is, when ABOUT is selected from the top menu, notice that the secondary menu shows: Contact;Venue;Organizers;Sponsors and Previous.  As you can see above (on the bottom of the 5 pictures), when Venu is selected, it is highlighted to in bright white to indicate that you have selected that.  The really cool part here is that the ABOUT on the primary menu stays highlighted when you choose different  secondary menu choices.
Why Go Through The Trouble, why not just do it with HTML and CSS directly
So, a reasonable person might say that since you can’t easily get this behavior with the asp:menu control and the site map provider (OK, at least I couldn’t figure it out), why not just code this up with simple list items, button clicks and a pile of code to react to those things?  Well, the answer is you can certainly do that.  The problem is the next time you want to do something similar you will find yourself doing a lot of cut and pasting.  Personally, whenever I find myself cutting and pasting a lot I know I should probably think about how to refactor the code to make it more reusable and therefore more reliable.
What Are the Benefits of Using asp:menu and the site map providers
I mentioned that there are benefits to using the asp:menu and site map providers.  What are those benefits you might ask.  Well, let me first show you what you have to do to set up a simple menu system using these, then list the benefits of what comes out.
The Web.SiteMap
First, you need to create a web.sitemap file in your web directory.  Here is what a simple one looks like similar to what will create the pictures above.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="" >
<siteMapNode url="Default.aspx" title="HOME" description="Silicon Valley CodeCamp 08">
<siteMapNode url="Register.aspx" title="REGISTER" description="" />
<siteMapNode url="News.aspx" title="NEWS" description="" />
<siteMapNode url="About.aspx" title="ABOUT" description="">
<siteMapNode url="Contact.aspx" title="Contact" description="" />
<siteMapNode url="Sponsors.aspx" title="Sponsors" description="" />
<siteMapNode url="Previous.aspx" title="Previous" description="" />

The Web.Config
You need to declare which sitemap provider you are using. In our case, we are simply reading from a file.  Then, you should (do not have to) declare a section for each web page you want to provide role access to.  Here is an example of my web.config. This first part says give access to any logged in user for Sponsors.aspx

<location path="Sponsors.aspx">
<deny users="?"/>

The Second part defines the Site Map Provider and sets securityTrimming to true to only show pages the user has access to.

<siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
<add name="XmlSiteMapProvider"
description="SiteMap provider which reads in .sitemap XML files."
type="System.Web.XmlSiteMapProvider, System.Web, Version=,...

No comments:

Post a Comment