Browse DevX
Sign up for e-mail newsletters from DevX


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

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

ASP.NET Implementation
The best way to implement the menu transformation in ASP.NET is to take advantage of customized server controls. These are similar to the server-side #include directives except that they can have their own interfaces. You embed them in the page using the @ Register directive. This example uses a control called left (defined in left.ascx in the downloadable code), which appears on the left border of all pages in the site and contains the menu implementation. Here's the code for the left.ascx file:

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="jsMenu.left" TargetSchema= "http://schemas.microsoft.com/intellisense/ie5" %> <asp:Literal id="menu" Text="Text" runat="server"/>

The literal server control with the id="menu" attribute is a placeholder and will be bound to the rendered HTML/JavaScript menu (the output of the XSLT transformation). Here's the partial code-behind for this control showing how binding occurs in the Page_Load event handler:

using System.Xml.Xsl; using System.IO; using System.Xml.XPath; public class left : System.Web.UI.UserControl { protected System.Web.UI.WebControls.Literal menu; private void Page_Load(object sender, System.EventArgs e) { // Put user code to initialize the page here string currPath = Request.PhysicalPath; string xmlPath = currPath.Substring(0, currPath.LastIndexOf("\\")) + "\\menu1.xml"; string xslPath = currPath.Substring(0, currPath.LastIndexOf("\\")) + "\\menu1.xsl"; XslTransform trans = new XslTransform(); StringWriter sW = new StringWriter(); XPathDocument mydata = new XPathDocument (xmlPath); trans.Load(xslPath); trans.Transform(mydata, null, sW, null); menu.Text = sW.ToString(); }

Notice that you have to reference the Xsl, IO, and XPath namespaces to access the required objects. The sample menu resides in the file menu1.xml and the XSL transformation shown earlier in the file menu1.xsl. You could (and should) add validation code to validate the XML and XSL schemas and catch exceptions. The remaining code uses an XslTransform to transform the XML file into the HTML/JavaScript form, and the last line binds the result to the literal server control with the id="menu" attribute. It's important to understand that you can modify the menu without modifying this code, as long as you don't change the name of the literal control or move the XML or XSLT files.

Performance is always an important issue in Web applications. While performance may not be critical in an intranet application running on fast Ethernet, for large-scale Internet applications you wouldn't want the server to execute the transformation every time a user requests a page. Creating the HTML/JavaScript form of the menu requires two I/O operations and an XSLT transformation, which may be intensive for complex menus. Fortunately, ASP.NET provides the page directive @ OutputCache, which lets you cache the control output after the first request, and use the cached copy for subsequent requests. To implement caching, add this directive to the left.ascx file shown earlier:

<%@ OutputCache Duration="10" VaryByParam="none">

So, you've seen a general XML and XSLT technique that you can use to simplify the process of creating and maintaining menus, yet still salvage your existing HTML/JavaScript client-side menus in ASP.NET. The technique involves organizing menus into a simple XML tree where menu items can nest children of their own type in any arbitrary depth. Then, you create an XSLT file to transform the XML file into your preferred flavor of HTML/JavaScript. Finally, you eliminate the overhead of recreating the menu for each request by caching the XSLT output. By using this technique JavaScript menu vendors and users can migrate their existing ASP code to ASP.NET with minimal effort.

Moheb Missaghi has published extensively on computational fluid dynamics (CFD) development and application and on client/server issues. His interests span from writing software for Web database applications to various computational/numerical projects and many points in between. He holds a B.S. from the School of Engineering in University of Tehran, Iran (Fanni) and an M Sc. and Ph.D. from the University of Leeds in the U.K., all in mechanical engineering.
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