ASP.NET Tree_DB - Step by step configuration


This tutorial will explain how to add, edit, remove nodes from an ASP.NET TreeView control and also how to
update the level of the nodes (after a drag and drop) using obout's latest ASP.NET controls:
TreeView, AJAX Page and Tree_DB.

The AJAX Page web component is used for sending data to the server without reloading the page
and the Tree_DB web component is used to process the data server-side and update the database.

Obout TreeDB Control
Hello, I am Root node! (a0)
ASP TreeView (a1)
Fast (a2)
Easy (a3)
Links & Notes since 1998 (a4)
First child (a4_0)
Second child (a4_1)
Third child (a4_2) (a5)



Add, edit, remove selected nodes or drag and drop any nodes.
The changes will be stored into the database without reloading the page.

Download Download full example (in C#, VB.NET).

Installing components

First you need to install the ASP.NET TreeView, AJAX Page and ASP.NET Tree_DB controls.
Please take a look at the following pages for more information:
- ASP.NET TreeView
- AJAX Page

Files used

  • cs_Tree.aspx - this is the main file - here we create an ASP.NET TreeView control and also
     a couple of html controls(two buttons - for adding/removing nodes, and two textboxes)
  • cs_Tree.aspx.cs - the code behind file for cs_Tree.aspx - it is used to load the treeview
     from a database (an SQLEXPRESS database in our example - TreeNodes.mdf)
  • cs_TreeEvents.aspx - the data will be sent to this page for processing
  • cs_TreeEvents.aspx.cs - the code behind file for cs_TreeEvents.aspx - here we make all the
     server-side processing
  • cs_TestConnection.aspx - page for testing if the connection is set up correctly
  • cs_TestConnection.aspx.cs - the code behind file for cs_TestConnection.aspx
  • TreeNodes.mdf- the SQLEXPRESS database containing the information about the ASP.NET TreeView's nodes


Client Side           Server Side