Create TreeView in ASP.Net With SQL Database Tables

A TreeView control is a useful control in ASP.NET.

Introduction

Create TreeView in ASP.NET C# with SQL Database.

Step 1: Database

First create a table in the database as in the following.

Table 1: State

create table IN_State
(
   S_Id int identity(1,1) primary key,
   S_Name varchar(30)
)

Table 2: City

create table IN_City
(
   C_Id int identity(1,1) primary key,
   C_Name varchar(30),
   S_Id int foreign key references IN_State(S_Id)
)

Step 2: Visual Studio

1. Go to the project the Solution Explorer.
2. Add a new item as in the following:

   
   Figure 1: Add new Item
   

3. Add a Web Form.
   
   
   Figure 2: Add Web From

Step 3: From UI Side

Now add a TreeView control on the .aspx page as in the following UI code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Master.master" AutoEventWireup="true" CodeFile="TreeView.aspx.cs" Inherits="UI_TreeView" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:TreeView runat="server" ID="tview">
    </asp:TreeView>

</asp:Content>

Step 4: From UI Code Side

Now right-click on the page design and go to View Code and click it.


Figure 3: Viewcode

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;


public partial class UI_TreeView : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            string connection = ConfigurationManager.ConnectionStrings["connstring"].ConnectionString;
            using (SqlConnection Conn = new SqlConnection(connection))
            {
                string State = "Select * from IN_State";
                string City = "Select * from IN_City";

                string Treeview = State + ";" + City;

                DataSet ds = new DataSet();
                SqlDataAdapter da = new SqlDataAdapter(Treeview, Conn);
                da.Fill(ds);
                ds.Tables[0].TableName = "IN_State";
                ds.Tables[1].TableName = "IN_City";

                DataRelation dr = new DataRelation("StateCity", ds.Tables["IN_State"].Columns["S_Id"], ds.Tables["IN_City"].Columns["S_Id"]);
                ds.Relations.Add(dr);

                foreach (DataRow drState in ds.Tables["IN_State"].Rows)
                {
                    TreeNode NDState = new TreeNode();
                    NDState.Text = drState["S_Name"].ToString();
                    NDState.Value = drState["S_Id"].ToString();
                    tview.Nodes.Add(NDState);

                    foreach (DataRow drCity in drState.GetChildRows("StateCity"))
                    {
                        TreeNode NDCity = new TreeNode();
                        NDCity.Text = drCity["C_Name"].ToString();
                        NDCity.Value = drCity["C_Id"].ToString();
                        NDState.ChildNodes.Add(NDCity);
                    }
                }
            }
        }
    }
}

Note: Please maintain a database connection string in your project.

Now the TreeView control code is complete. Run the design page and display the created TreeView as in the following.


Figure 4: Treeview

I hope you have understood how to create a TreeView with a SQL table.