CSS menus

There are many solutions to implementing menus including built in ASP.NET controls and those from vendors such as Telerik and ComponentOne. I worked with the Telerik controls on my last project and was mostly impressed although they have issues like ever one else. I then checked out ComponentOne, I only looked at briefly as my ISP (Discount.asp) offered free access to their WebMenus and tree. I was not nearly as impressed by their offering and as a result started my search for an alternative .I came across a really interesting solution at http://alistapart.com/articles/dropdowns/.
the solution and article is good and points out the big problem is making this stuff work in CSS is IE. Other browsers such as Firefox have a .hover class that will work on any element. Alas , good old IE with its 90% share only does on links. The solution offered in is this article runs Javascript that adds an .over class to each element in our menu block. It then alters the CSS as follows:
li:hover ul{ display: block; } becomes:
li:hover ul, li.over ul{ display: block; }
Now the CSS menus work in IE if we only want a single level of subnavigation but I was not able to make them work with multiple levels of subnavigation . Then I found a great solution at http://www.xs4all.nl/~peterned/csshover.html. This solution has an impressive piece of Javascript that the author wisely attaches as a behavior in the iefixes.css file as follows:
body{ behavior: url(/CSS/csshover.htc);
I like this as only dumb old IE will recognize the behavior and it is the only browser that needs the script. Hopefully with IE7 much of this nonsense will disappear as IE will move in line with standards. He solves the multiple level problem by using CSS specificity and here I quote"Every CSS rule has a certain specificity, which defines whether or not it overrules others. The higher the specificity of a rule, the more important it becomes. This specificity is calculated simply by counting the occurrences of ids, (pseudo-)classes and attribute selectors, and node names". This concept is used to hide submenus that don't need to be visible just yet, and only show them when needed later on. Very nice !
However it seems that some folks in Redmond have been reading the same information as they have come out with CSS adapters that will do the same thing as I was trying to accomplish http://www.asp.net/CSSAdapters/Default.aspx. the track that I was on would have worked nicely but Microsoft is doing the same thing with these adapters although the implementation is a little more complex than mine and handling the support for the code. I always choose the solution that puts the least work on me as in the end support and change are too biggest problems. The menus for my website were implemented using these and I like the result. The only problem that I have is that it is not easy to add client-side events to the menu items. there are times when one might want to handle the mouse click in javascript instead of Posting back (or firing a Page method event).

In my role as a consultant I try and convince my client to buy the Telerik controls are they really are the best solution I could find but as a fallback these CSS Adapters are almost as good. Of course there are many other controls in the Telerik set that are extremely useful.

Javascript THIS keyword

Javascript is "kindof object orientated" and as a result this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of. When we define our function FOO() in a page, its owner is the page, or more specifically the window object (or global object) of JavaScript. An onclick property, though, is owned by the HTML element it belongs to. so if we want to change the class of an element with a mouseover event handler that looks like :

function function1(obj)
{
obj.className+=" over";
}

then over element's inline definition must look like :

<li onmouseover=function1(this)>

if it written as :

<li onmouseover=function1>

then obj will point to the window object

IE only markup

The following technique will allow the inclusion of IE only markup:

<!--[if IE>
<link href="IEFixes.css" type="text/css" rel="stylesheet">
<![endif]-->

Thus if this is Firefix the line is not included.

Element IDs in Controls and Masterpages

If one has a standalone page that contains code using element ID such as
var find = idText1.value;
then you might be surprised to have this code break when it is contained in a Control or a MasterPage as the ID is of the now of the form:
CTL1:idText1
ASP.NET is ensuring that the id is unique as there might be multiple occurances on the composite page. the solution is to define a server variable as follows:
var find = "<%= idText1.ClientID%>
now find will be resolved to whatever depth of controls the page is contained in .

Javascript

It is impossible to produce a "rich" client that minimizes Postbacks without extensive Javascript. I know that ATLAS can assist in the client side development with attribute based development but there is no subsitute for Javascript knowledge. Writing Javascript is dead easy especially if you are C# kind of person as they have the same roots in C. I also feel that it is important to write the Javascript in as "object way" as possible and there are several ways of doing this. I will explore a couple of alternatives later. One should be armed with a couple of development aids :

1. VS 2005 breakpoints can be inserted in script code by :

• placing 'debugger;" statements in the script code which will enable breakpoints (IE only)
• making sure that the IE Tools.Internet Options.Advanced "Disable Script Debugging (Internet Explorer) is off

2. Deploy toolset like Nikhil Kothari's Web Developer helper a BHO that one can download at http://www.nikhilk.net/Project.WebDevHelper.aspx

Provider Pattern (TableAdapter and NHibernate)

Now that I have you totally confused as to which option is the best I present the Provider Pattern that will allow you to defer your decision .
Details