Browse DevX
Sign up for e-mail newsletters from DevX


Salvage Your Client-Side JavaScript Menus in ASP.NET Using XML/XSLT

ASP.NET's server-based event-handling model has made working with many popular client-side JavaScript menu systems increasingly unpalatable in their current form. Fortunately, XML and XSLT provide a way out.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

or the past several years, creating client-side JavaScript based menus using the browser's DOM capabilities has been a popular way for developers to implement Web site navigation—so popular that there are now hundreds of Web sites offering free or commercial versions of such JavaScript menus. The complexity of such menus ranges from simple boxes that change style when users hover over menu items with the mouse to sophisticated dynamic versions that change content in response to other client-side events. Despite the range of visual styles and content, these JavaScript-based menus tend to work the same way. The site designer first organizes a menu hierarchy in terms of HTML tags such as <div>, <a>, etc. Each item or group of items contains CSS "class" attributes, which the JavaScript code uses to creates various styles and effects. Extending such menus requires editing the often-cryptic HTML or JavaScript code—or both. Site designers must learn to find their way around the code heuristically to add the new items unless they're willing to spend an excessive amount of time figuring out the entire code and layout scheme.

Microsoft took server programming in their ASP.NET product to a higher level than in its earlier ASP product, in that developers can now process browser events (the consequences of actions taken by the user running a browser on a client machine) on the server—even though those events are raised on the client. ASP.NET effectively reduces an array of DOM events to a handful of server events with the runat="server" attribute. Each of these "server controls" renders the JavaScript code within the page required to forward events back to the server. Developers can include their own JavaScript client-side event-handling script, but to do so they must use specific instructions in the server control's script so the script will run (see the MSDN topic "ASP.NET Server Control Event Model" for more information). In effect, the two ASP products provide opposite models. The older ASP model gives developers complete control at the price of having to write all the event code manually, while the ASP.NET model automates much of the event-handling code at the price of developers having to intervene to regain manual control. Still, one can justify the loss of client-side control introduced by the ASP.NET model by the additional functionality offered by the server controls. Reusing Existing Client-side JavaScript Menu Code
Given these opposite models, how can you reuse existing client-side JavaScript menu code in ASP.NET? Here are some ideas:

  • Include the HTML/JavaScript code in the server-side .aspx file. This effectively means bypassing the ASP.NET server event code and going back to the ASP model, because you cannot use the runat="server" attribute for the <form> tag—which is the backbone of a page in the ASP.NET model. You have to adopt the earlier model to prevent the new server-side controls from rendering additional content on the page. Unfortunately, it's difficult to implement the HTML/JavaScript code in this way because it requires careful analysis to identify what can and cannot be included within an object with a runat="server" attribute.
  • Use Response.Write to render the HTML/JavaScript code. You can employ this technique in the Page_Load event handler to render the entire HTML/JavaScript code verbatim on the browser. However, this method doesn't take advantage of ASP.NET's server processing methodology—and the resulting menu is just as hard to modify as the original code.
  • Write customized server controls that include the client side HTML/JavaScript code as part of their rendering utilities. This is, of course, plausible; however, it requires an in-depth knowledge of low-level server control programming. Furthermore, the menu form remains as complex as before—not to mention that you must recompile the code every time you modify the menu (see IE Web Controls for more information on writing Web server controls from scratch).
  • Use existing controls to simulate a custom menu. In their popular ASP.NET book, Alex Homer and Dave Sussman, et. al. present a case study that creates an XML-based menu using a DataList server control. Their menu works fine for menus one or two levels deep; however, nesting DataList controls to create menus of arbitrary depth is not trivial. For an arbitrary depth menu I've found it's better to use a TreeView control (from Microsoft's downloadable IE Web Controls, binding it to an XML file containing the hierarchal menu. The TreeNode element that makes up the individual items of this control can contain children of its own type, letting you nest elements to any arbitrary depth. Using a TreeView works fine for Windows Explorer-like GUIs, but severely limits the styles you can produce unless you are willing to re-write the code-behind that renders the control. Furthermore, all events raised by this control are processed on the server by default, which requires server trips for actions that you'd expect to happen on the client, such as selecting, expanding and collapsing nodes.
A New Approach
The upshot is that you need a new approach. The objective of this article is to create a general menu construction technique rather than a specific implementation that may or may not apply to a given HTML/JavaScript template. The desired features are:
  • To present the menu hierarchy in a simple form such as an XML schema—similar to that in the TreeView control, allowing arbitrary depth with minimal and straight-forward modification.
  • To create a menu construction technique applicable to any existing complex HTML/JavaScript code as is—thereby allowing reuse of the existing code.
This article presents such a general technique, along with an example that employs the technique to create client-side JavaScript menus in ASP.NET. You can download the sample code for this article to follow along.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date