Add CSS class on parent node if child node is selected

Question

Hello.

I have a recusive-method that creates a unordered list from a XML document. To check which node I am positioned on I use the querystring to match the URL in the XML document.

I need to add the class 'current' on the parent node if I am positioned on its child node.

Like this:

    MenuItem 1
    MenuItem 2 [class current]
         MenuItem 3 [class current] (selected node)
    MenuItem 4

My XML document is like this:

<MenuItem Name="MenuItem 1" Url="MenuItem1.aspx"/>
<MenuItem Name="MenuItem 2" Url="MenuItem2.aspx">
    <MenuItem Name="MenuItem 3" Url="MenuItem3.aspx" />
</MenuItem>
<MenuItem Name="MenuItem4" Url="MenuItem4.asp" />

And my current code looks like this:

foreach (XmlNode item in menuitems)
{
    if (HttpContext.Current.Request.Url.AbsolutePath.ToLower() == item.Attributes["Url"].Value.ToLower())
    {
        writer.AddAttribute(HtmlTextWriterAttribute.Class, "current");
    }
    writer.RenderBeginTag(HtmlTextWriterTag.Li);
    // And so on...
}

So I need some kind of function to find this node and place a class on that node aswell.

If you need more code, information or anything else - please say so! :-)

Thank you!

Answer 1

This isn't an especially elegant solution, but if I understand the problem correctly, you could create a method to check if a child node is selected:

private static bool IsChildSelected(XmlNode item)
{
    foreach(XmlNode child in item.ChildNodes)
    {
        if(HttpContext.Current.Request.Url.AbsolutePath.ToLower() == child.Attributes["Url"].Value.ToLower())
        {
            return true;
        }
    }
    return false;
}

and check it as you iterate through the nodes:

foreach(XmlNode item in menuitems)
{
    if(HttpContext.Current.Request.Url.AbsolutePath.ToLower() == item.Attributes["Url"].Value.ToLower()
        || IsChildSelected(item))
    {
        writer.AddAttribute(HtmlTextWriterAttribute.Class, "current");
    }
    writer.RenderBeginTag(HtmlTextWriterTag.Li);
}

Answer 2

I tried to create a small Unit test to demonstrate my idea. basically you get the currently selected node and then you traverse recursively up its parents.

private bool IsParentOf(XmlNode parentNode, XmlNode node)
    {
        if (node.ParentNode == null) return false;
        return node.ParentNode == parentNode || IsParentOf(parentNode, node.ParentNode);
    }
    [TestMethod]
    public void TestMethod1()
    {
        string xml =
                @"
            <MenuItem Name=""MenuItem 1"" Url=""MenuItem1.aspx""/>
            <MenuItem Name=""MenuItem 2"" Url=""MenuItem2.aspx"">
                <MenuItem Name=""MenuItem 3"" Url=""MenuItem3.aspx"" />
            </MenuItem>
            <MenuItem Name=""MenuItem4"" Url=""MenuItem4.asp"" />";
        string url = "MenuItem3.aspx";

        XmlDocument doc = new XmlDocument();
        doc.LoadXml("<MenuItems>" + xml + "</MenuItems>");
        var xPathFormat = "//MenuItem[@Url='{0}']";
        var currentNode = doc.SelectSingleNode(string.Format(xPathFormat, url));

        var menuItem1 = doc.SelectSingleNode(string.Format(xPathFormat, "MenuItem1.aspx"));
        Assert.IsFalse(IsParentOf(menuItem1, currentNode));

        var menuItem2 = doc.SelectSingleNode(string.Format(xPathFormat, "MenuItem2.aspx"));
        Assert.IsTrue(IsParentOf(menuItem2, currentNode));

    }

Answer 3

Thanks for the answers. But I solved my own problem. You guys get upvotes for your effort.

Here was my solution:

System.Collections.Hashtable ht = new System.Collections.Hashtable();
ht.Add("Url", HttpContext.Current.Request.Url.AbsolutePath.ToLower());

XmlNode currentpage = Core.FindChildNode(item, "MenuItem", ht);

if (HttpContext.Current.Request.RawUrl.ToLower() == item.Attributes["Url"].Value.ToLower() || currentpage != null)
{
     writer.AddAttribute(HtmlTextWriterAttribute.Class, "current");
}

This is my FindChildNode method

public static XmlNode FindChildNode(XmlNode parent, string name, System.Collections.Hashtable keyvaluecollection)
 {
  if (parent.NodeType != XmlNodeType.Element) return null;
  XmlElement el = (XmlElement)parent;

  XmlNodeList nodes = el.GetElementsByTagName(name);
  foreach (XmlNode node in nodes)
  {
   if (node.NodeType == XmlNodeType.Element)
   {
    bool found = false;
    foreach (string key in keyvaluecollection.Keys)
    {
     if (node.Attributes[key] != null && node.Attributes[key].Value == (string)keyvaluecollection[key])
     {
      found = true;
     }
     else
     {
      found = false;
      break;
     }
    }
    if (found) return node;
   }
  }
  return null;
 }

Seems to work like a charm! :-)