Using the TreeView Control with ASP.NET 4.0 and C#

This tutorial will demonstrate how to use the treeview control to create hierarchical links for a web site using ASP.NET 4.0 and C#.

Configuring the TreeView
To demonstrate using the tree view, we will need to create a simple web page. At this point, I have created a new ASP.NET Empty Web Site. To begin:

1. Right click the project in your solution explorer.
2. Select add new item...
3. Select a web form.
4. Name it 'Default.aspx'.
5. Click add.

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

Now that we have our page setup, we need to add a tree view to it. But first, what exactly is a tree view anwyays? A tree view is a simple view that contains a series of nodes or links that can be nested into one another. The reason it is called a tree view is because nested nodes branch off into multiple different nodes. This allows the tree view to contain tons of different links while still being highly organized. To add the tree view:

1. Open Default.aspx to design mode.
2. Expand the navigation tab of your toolbox.
3. Drag and drop a treeview onto the web form.

Configuring Nodes
Now that we have a tree view, we can start adding in some nodes. To do this, add in the following code to the tree view <Nodes> tag:

<asp:TreeNode Value="Home" NavigateUrl="~/Default.aspx" Text="Home">     <asp:TreeNode Value="Page1" NavigateUrl="~/Page1.aspx" Text="Page1" />     <asp:TreeNode Value="Page2" NavigateUrl="~/Page2.aspx" Text="Page2" />     <asp:TreeNode Value="Page3" NavigateUrl="~/Page3.aspx" Text="Page3" /> </asp:TreeNode> <asp:TreeNode Value="Page4" NavigateUrl="~/Page4.aspx" Text="Page4" /> <asp:TreeNode Value="Page5" NavigateUrl="~/Page5.aspx" Text="Page5" />

This will add in three different links at the top level, home, page4, and page5. Furthermore, this will branch the home link off into 3 more links in the bottom level, page1, page2, and page3. The resulting tree view should look like this:


I just signed up at Server Intellect and couldn't be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.

Testing
To test this out you need to load up the web site and ensure that all of the links are functional. Furthermore, you can test expanding and contracting the home node that contains child nodes. This functionality of the tree view is what allows it to keep large amounts of links organized.