This article really represents a bit of "deja vu all over again", since I originally published my first article on creating an Xml / Xsl menu control back in 2003, here.
It got a lot of comments, and I also produced a server control version. A common request was "how do I make it do dropdowns", so I've decided to pick up here and create one that offers same. If you have read any of my "stuff" then you probably know I am a big proponent of not reinventing the wheel. There's a lot of good source code out there, much of it in the public domain, and I am a firm believer that if you need something, the first step is to google for something "like it". At a minimum, it will give you some ideas, and in the best case scenario, you may be able to get to first base without a lot of batting practice. This control owes it's source to John Chapman, who created one for ASP TODAY (Wrox) in ASP.NET 1.1 back in 2003.
I souped it up, gave it better css styling with a nice gradient background, and brought the code forward into the ASP.NET 2.0 domain. In particular, the XslTransform is deprecated, now we use XslCompiledTransform. I also updated the code to recognize and accomodate Firefox, which really wasn't on the scene at that time.
The codebehind for the UserControl is not complex at all. Let's take a look at that first:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;
using System.Xml.Xsl;
using System.Xml.XPath;
using System.IO;
using System.Text;
namespace NewMenuWeb
{
public partial class XmlDropDownMenu : System.Web.UI.UserControl
{
protected Label MenuPlaceHolder;
private string xmlFile = "";
private string xslFile = "";
public string XmlFileName
{
get { return (xmlFile); }
set { xmlFile = value; }
}
public string XslFileName
{
get { return (xslFile); }
set { xslFile = value; }
}
private void Page_Load(object sender, System.EventArgs e)
{
string XmlFileName = Server.MapPath(xmlFile);
string XslFileName = Server.MapPath(xslFile);
XPathDocument XmlDoc = new XPathDocument(XmlFileName);
XPathDocument XslDoc = new XPathDocument(XslFileName);
System.Xml.Xsl.XslCompiledTransform XslProc = new XslCompiledTransform();
XsltArgumentList XsltArgs = new XsltArgumentList();
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
// Get Browser and version
HttpBrowserCapabilities bc = Request.Browser;
decimal nVersion = Convert.ToDecimal(bc.Version.Replace(".", ""));
string sBrowser = "";
switch (bc.Browser)
{
case "IE":
sBrowser = "IE";
break;
case "Netscape":
case "Firefox":
sBrowser = "gecko";
if (nVersion < 6)
sBrowser = "nn";
break;
default:
break;
}
XsltArgs.AddParam("BrowserType", "", sBrowser);
XslProc.Load(XslDoc);
XslProc.Transform(XmlDoc, XsltArgs, sw);
MenuPlaceHolder.Text = sb.ToString();
}
}
}
It's easy to see that what the control does is load your menu Xml and Xsl files, create some Xslt arguments that are used by the transform, some browser detection. It then performs the Xsl Transform and assigns the HTML result to the Text property of an internal Label that is used as a placeholder for the HTML, and you are done.
The menu.js Javascript file takes care of the showing / hiding and mouseover actions that are required, and the CSS stylesheet sets up my nice gradient background image and CSS styling and matching colors on the various elements. Finally, the xsl transform takes care of some xsl-if tests based on the browser type to get the correct rendering to make various browsers happy (or at least, vaguely so - I'm not sure if that is ever going to be an achievable goal).
The result should look like this liitle screen cap:
The sample code in the provided solution has menu items and links very similar to the menu that's currently in production on the ittyurl.net site, so your test menu will actually "go somewhere". There's also an extra section in the menu.xml file that's commented. It illustrates some additional features you may want to use. For those that are so inclined, it would be a snap to take the original code for my ASP.NET 1.1 Server Control version of the original (non-dropdown) control, plug in this code, and make a nice ASP.NET 2.0 ServerControl from it.
This kind of control is very easy to extend; if you have new "pages" or sections on your site, all you need to do is add new "MenuItem" elements to your Xml file. Another nice feature is that you can specify different Xml Files for different menus, or even the same menu based on detection of user Role, time of day, and so on. Enjoy.
Download the Visual Studio 2005 Solution accompanying this article. |