Treeview as navigation in masterpage with Web.sitemap datasource, which remember collapse state.

I have been struggling with this for a few days. Here is the situation.

I want to use masterpagefor style and layout consistency across pages. I want to use Web.sitemap for navigation because it is .NET feature and handy. Then the client wants to use Treeview for navigation which is fine, because Web.sitemap bind with treeview with one line of code.

Here comes the big question, the client said, why is the treeview collapse all without remembering what they click? Then I try a look like promising solution here on the internet. You can download sample and it works. But that sample is not using Web.sitemap. When you use Web.sitemap as treeview datasource, it binds to treeview each time you are redirected by clicking a tree node. This mechanism makes that solution fail. and I come up with the simplest solution, which is reading the Web.sitemap myself since it is just a xml and adding nodes in my code behind. This gives me even more control over the nodes, I can redirect to a new browser window or do hover image and so on. And also I can use it as an ordinary datasource when I need it to be.

There is only one small problem left. Web.sitemap must have one root node and you don’t want it to be shown most of the time. With SiteMapDataSource you can set ShowStartingNode to false. Now I have to skip this node when I add nodes to my treeview. Here is my crappy code. Put it in the masterpage Page_Load().

XmlDocument l_xmlDoc = new XmlDocument();
XmlTextReader l_xmlRdr = new XmlTextReader("./web.sitemap");
l_xmlRdr.Read();
l_xmlDoc.Load(l_xmlRdr);
XmlNode l_rootNode = null;
foreach (XmlNode node in l_xmlDoc.ChildNodes)
{
    //find root node
    if (node.Name.Equals("siteMap"))
    {
        l_rootNode = node;
        l_rootNode = l_rootNode.ChildNodes[0];
    }
}
//add node to treeview
foreach (XmlNode node in l_rootNode.ChildNodes)
{
   TreeNode l_tn = null;
   if (node.Attributes["target"] != null)
   {
      l_tn = new TreeNode(node.Attributes["title"].Value, node.Attributes["url"].Value, "", node.Attributes["url"].Value, node.Attributes["target"].Value);
   }
   else
   {
       l_tn = new TreeNode(node.Attributes["title"].Value, node.Attributes["url"].Value);
   }
   TreeViewMain.Nodes.Add(l_tn);
   if (node.ChildNodes.Count > 0)
   {
      AddNodesToTreeView(node, l_tn);
   }
}

Then here is my crappy recurrsive method

private void AddNodesToTreeView(XmlNode node, TreeNode treeNode)
    {
        //add node to treeview
        foreach (XmlNode cnode in node.ChildNodes)
        {
            //has childnodes,recurrsivly add child, and itself tree 
            TreeNode l_tn = null;
            if (cnode.Attributes["target"] != null)
            {
                l_tn = new TreeNode(cnode.Attributes["title"].Value, cnode.Attributes["url"].Value, "", cnode.Attributes["url"].Value, cnode.Attributes["target"].Value);
                treeNode.ChildNodes.Add(l_tn);
            }
            else
            {
                l_tn = new TreeNode(cnode.Attributes["title"].Value, cnode.Attributes["url"].Value);
                treeNode.ChildNodes.Add(l_tn);
            }
            if (cnode.ChildNodes.Count > 0)
            {
                AddNodesToTreeView(cnode, l_tn);
            }
        }
    }

And then do everything else my reference link teach. I assume here every node in every level directs you to a page. You can use node without redirect by checking url attribute. and also you can turn off the hyperlink by setting treenode SelectionAction property to none.

I am finally done with Treeview navigation, thank god.

Advertisements

2 thoughts on “Treeview as navigation in masterpage with Web.sitemap datasource, which remember collapse state.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s