Binding Data With TreeView From Database In ASP.NET Using 3 Tire Architecture

Sthitaprajnya Debasis Nayak

ASP.NET3Tire ArchitectureBinding Data with TreeView From Database In Asp.Net

7 Comments

Join the conversation! Your thoughts help the community grow.

Vivek Kumar Vishwas8y ago
<asp:TreeView ID="TreeView1" runat="server" ImageSet="XPFileExplorer" NodeIndent="15"> <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" /> <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px" NodeSpacing="0px" VerticalPadding="2px"></NodeStyle> <ParentNodeStyle Font-Bold="False" /> <SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px" VerticalPadding="0px" /> </asp:TreeView> SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString.ToString()); protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { DataTable dt = this.GetData("SELECT cid,cname, pid , pname FROM TopParent where pid=10"); this.PopulateTreeView(dt, 0, null); BindRepeaterRight(); } } private void PopulateTreeView(DataTable dtParent, int parentId, TreeNode treeNode) { foreach (DataRow row in dtParent.Rows) { TreeNode child = new TreeNode { Text = row["cName"].ToString(), Value = row["cId"].ToString() }; if (parentId == 0) { TreeView1.Nodes.Add(child); DataTable dtChild = this.GetData("select distinct cId, pid, cname from TopParent WHERE pid = " + child.Value); PopulateTreeView(dtChild, int.Parse(child.Value), child); //........................ //string query = "select distinct cId, pid, cname from TopParent WHERE cid = " + child.Value; //SqlCommand cmd = new SqlCommand(query, con); //con.Open(); //SqlDataReader dr; //dr = cmd.ExecuteReader(); //if (dr.Read()) //{ // TreeNode nnode = new TreeNode // { // Text = row["cName"].ToString(), // Value = row["cId"].ToString() // }; // TreeView1.Nodes.Add(nnode); // DataTable dtnChild = this.GetData("select cid,cname from TopParent WHERE cid = " + nnode.Value); // PopulateTreeView(dtnChild, int.Parse(nnode.Value), nnode); //} //con.Close(); } else { treeNode.ChildNodes.Add(child); } } } private DataTable GetData(string query) { DataTable dt = new DataTable(); string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { using (SqlCommand cmd = new SqlCommand(query)) { using (SqlDataAdapter sda = new SqlDataAdapter()) { cmd.CommandType = CommandType.Text; cmd.Connection = con; sda.SelectCommand = cmd; sda.Fill(dt); } } return dt; } } please check the code and create 3 level nodes in asp.net c#
Sthitaprajnya Debasis Nayak10y ago
Thanks all...
Sibeesh Venu10y ago
Nice Share
Shubham Kumar10y ago
Nice
Sthitaprajnya Debasis Nayak10y ago
Thank u Jaipal
Santhakumar Munuswamy10y ago
Thanks for nice share
Jaipal Reddy10y ago
Welcome to CsharpCorner . .

Introduction

In most of the interviews while going in the machine test round companies are asking to do this task and many freshers are failing to complete this task. So, I thought to write this article to help them.

Let us create a treeview which will show all the projects and their modules. Now we will finish this task in step by step...

Step 1: Firstly, we will design our database,

Create a Database with name “ProjectTreeView”.
Within the database create two tables “Project” and “Module” like the following figure:

Table:Project
Make “ID” column as Primary key with auto generated value.

Now enter some sample data within table “Project” like the following:

Project

Table: Module

Make the “ID” column as Primary Key with auto generated value.
Make ProjID as Foreign Key.
>> Now Enter some data within it.

Your database structure should be like this.

Step 2: Let us prepare our solution,

Open Visual Studio, add a new project, web, then ASP.NET Empty Web Application.

o Give Name : ProjectTreView

Step 3:

Now right click on the Solution head, the click Add and then New Project
Now New project dialog box will appear.
From that dialog box, choose Visual C# from the left side, then click Class Library.
Name it as “TreeViewBAL” like below.
Press ok.

Step 4:

Now right click on the class Library “TreeViewBAL”, Add, then click New Folder.
Name it as “BE”.
Similarly add another folder with name “BL”.

Step 5:

Now add another project of type class file, name it “TreeviewDAL” similarly as we have done in Step4.

Now the 3 tire architecture design is ready, but we have to connect them first before we start coding...
Add the reference of Project “TreeViewDAL” to “TreeViewBAL” then “TreeViewBAL” to “ProjectTreeView”.
TreeViewDAL -- TreeViewBAL
TreeViewBAL -- ProjectTreeView

Step 6:

Go to Project “TreeviewDAL” and delete “class1” which is by default present.
Right click on the project head, click Add, then class
Name that class as “ConnectionFactory.cs”.
Write the following code inside it.

ConnectionFactory.cs
1. using System;
2. using System.Collections.Generic;
3. using System.Data;
4. using System.Data.SqlClient;
5. using System.Linq;
6. using System.Text;
7. using System.Configuration;
9. namespace TreeViewDAL
10. {
11. public class ConnectionFactory
12. {
13. public static string connStr = "sqlcn";
14. static SqlConnection conn;
15. static SqlCommand cmd;
16. static DataTable dt = new DataTable();
18. public static DataTable ExecuteCommand(string Text, CommandType CmdType)
19. {
20. try
21. {
22. conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);
23. SqlDataReader dr;
25. //Opening Connection
26. if (conn.State != ConnectionState.Open)
27. conn.Open();
29. cmd = new SqlCommand(Text, conn);
30. cmd.CommandType = CmdType; //Assign the SqlString Type to Command Object
32. dr = cmd.ExecuteReader();
33. DataTable dt = new DataTable();
34. //Loading all data in a datatable from datareader
35. dt.Load(dr);
36. //Closing the connection
37. conn.Close();
38. return dt;
39. } catch
40. {
41. throw;
42. }
44. }
45. }
46. }

Step 7:

Similarly like step6, Go to Project “TreeviewBAL” and delete “class1” which is by default present.
Right click on the BL Folder  Add  class
Name the class as “TreeViewBL.cs”.

Write the above code inside it.

TreeViewBL.cs
1. using System;
2. using System.Collections.Generic;
3. using System.Data;
4. using System.Linq;
5. using System.Text;
7. using TreeViewBAL.BE;
8. using TreeViewBAL.BL;
10. namespace TreeViewBAL.BL
11. {
12. public class TreeViewBL
13. {
14. public static DataTable GetData(String Query)
15. {
16. try
17. {
18. DataTable dt = new DataTable();
19. dt = TreeViewDAL.ConnectionFactory.ExecuteCommand(Query, CommandType.Text); //calling the connectionfactory methode from DAL
20. return dt;
21. } catch (Exception ex)
22. {
23. throw ex;
24. }
25. }
26. }
27. }

Step 8:

Go to the Project “ProjectTreeView”.
Right click on the project “ProjectTreeView”, click Add, then Webform
Name the webform as “TreeView.aspx”.

Write the following code inside it.

ProjectTreeView.aspx:
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeView.aspx.cs" Inherits="ProjectTreeView.TreeView" %>
3. <!DOCTYPE html>
5. <html xmlns="http://www.w3.org/1999/xhtml">
7. <head runat="server">
8. <title>Binding Data With TreeView</title>
9. <script src="jquery-2.1.4.js"></script>
10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
12. <%--Jquery Code For Check/UnCheck the Checkboxes of Treeview--%>
14. <script type="text/javascript">
15. $(function()
16. {
17. $("[id*=treeview1] input[type=checkbox]").bind("click", function()
18. {
19. var table = $(this).closest("table");
20. if (table.next().length > 0 && table.next()[0].tagName == "DIV")
21. {
22. var childDiv = table.next();
23. var isChecked = $(this).is(":checked");
24. $("input[type=checkbox]", childDiv).each(function()
25. {
26. if (isChecked)
27. {
28. $(this).attr("checked", "checked");
29. } else
30. {
31. $(this).removeAttr("checked");
32. }
33. });
34. } else
35. {
36. var parentDIV = $(this).closest("DIV");
37. if ($("input[type=checkbox]", parentDIV).length == $("input[type=checkbox]:checked", parentDIV).length) {
38. $("input[type=checkbox]", parentDIV.prev()).attr("checked", "checked");
39. } else
40. {
41. $("input[type=checkbox]", parentDIV.prev()).removeAttr("checked");
42. }
43. }
44. });
45. })
46. </script>
47. </head>
49. <body>
50. <form id="form1" runat="server">
51. <div align="center">
52. <h3>Project Details</h3>
53. <hr />
54. <asp:TreeView ID="treeview1" runat="server" ShowCheckBoxes="All">
55. </asp:TreeView>
56. </div>
57. </form>
58. </body>
60. </html>
ProjectTreeView.aspx.cs:
1. using System;
2. using System.Collections.Generic;
3. using System.Data;
4. using System.Linq;
5. using System.Web;
6. using System.Web.UI;
7. using System.Web.UI.WebControls;
8. using TreeViewBAL.BL;
10. namespace ProjectTreeView
11. {
12. public partial class TreeView: System.Web.UI.Page
13. {
14. protected void Page_Load(object sender, EventArgs e)
15. {
16. if (!this.IsPostBack)
17. {
18. DataTable dt = TreeViewBAL.BL.TreeViewBL.GetData("select ID,Name from Project");
19. this.PopulateTreeView(dt, 0, null);
20. }
21. }
23. public void PopulateTreeView(DataTable dtParent, int ParentId, TreeNode treeNode)
24. {
25. foreach(DataRow row in dtParent.Rows)
26. {
27. TreeNode child = new TreeNode
28. {
29. Text = row["Name"].ToString(),
30. Value = row["ID"].ToString()
31. };
33. if (ParentId == 0)
34. {
35. treeview1.Nodes.Add(child);
36. DataTable dtChild = TreeViewBAL.BL.TreeViewBL.GetData("Select ID,Name from Module where ProjID=" + child.Value);
37. PopulateTreeView(dtChild, int.Parse(child.Value), child);
38. } else
39. {
40. treeNode.ChildNodes.Add(child);
41. }
42. }
43. }
44. }
45. }
Your Solution Explorer should be like this.

Output

Thanks for reading.