ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Bind (Populate) Bootstrap TreeView from database using jQuery Ajax in ASP.Net<p>Hi <a class="username" rel="rani"> rani</a>,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; &nbsp;&nbsp;&nbsp; $(function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type: &#34;POST&#34;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: &#34;Default.aspx/GetTreeData&#34;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data: {}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; contentType: &#34;application/json; charset=utf-8&#34;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dataType: &#34;json&#34;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; success: function (response) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var nodes = JSON.parse(response.d).nodes; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&#39;#dvTree&#39;).treeview({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data: JSON.stringify(nodes) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; failure: function (response) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(response.responseText); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; error: function (response) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(response.responseText); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; }); &lt;/script&gt; &lt;div id=&#34;dvTree&#34;&gt;&lt;/div&gt;</pre> <p><strong><span style="text-decoration: underline;">Namespaces</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Data; using System.Web.Script.Serialization; using System.Web.Services;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Data Imports System.Web.Script.Serialization Imports System.Web.Services</pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">[WebMethod] public static string GetTreeData() { &nbsp;&nbsp;&nbsp; DataTable dt = new DataTable(); &nbsp;&nbsp;&nbsp; dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id"), new DataColumn("Text"), new DataColumn("ParentId") }); &nbsp;&nbsp;&nbsp; dt.Rows.Add(1, "IT", 0); &nbsp;&nbsp;&nbsp; dt.Rows.Add(2, "HR", 0); &nbsp;&nbsp;&nbsp; dt.Rows.Add(3, "Marketing", 0); &nbsp;&nbsp;&nbsp; dt.Rows.Add(4, "David", 1); &nbsp;&nbsp;&nbsp; dt.Rows.Add(5, "Jhon", 1); &nbsp;&nbsp;&nbsp; dt.Rows.Add(6, "Kevin", 2); &nbsp;&nbsp;&nbsp; dt.Rows.Add(7, "Marry", 2); &nbsp;&nbsp;&nbsp; dt.Rows.Add(8, "Robert", 3); &nbsp;&nbsp;&nbsp; dt.Rows.Add(9, "Andrea", 6); &nbsp;&nbsp;&nbsp; dt.Rows.Add(10, "Adam", 8); &nbsp;&nbsp;&nbsp; dt.Rows.Add(11, "Dharmendra", 4); &nbsp;&nbsp;&nbsp; dt.Rows.Add(12, "Ajeet", 5); &nbsp;&nbsp;&nbsp; Node nodes = new Node { text = "Department" }; &nbsp;&nbsp;&nbsp; DataView view = new DataView(dt); &nbsp;&nbsp;&nbsp; view.RowFilter = "ParentId=0"; &nbsp;&nbsp;&nbsp; foreach (DataRowView kvp in view) &nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string parentId = kvp["Id"].ToString(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Node node = new Node { text = kvp["text"].ToString() }; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; nodes.nodes.Add(node); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AddChildItems(dt, node, parentId); &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; return (new JavaScriptSerializer()).Serialize(nodes).Replace(",\"nodes\":[]", ""); } private static void AddChildItems(DataTable dt, Node parentNode, string ParentId) { &nbsp;&nbsp;&nbsp; DataView viewItem = new DataView(dt); &nbsp;&nbsp;&nbsp; viewItem.RowFilter = "ParentId=" + ParentId; &nbsp;&nbsp;&nbsp; foreach (DataRowView childView in viewItem) &nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Node node = new Node { text = childView["text"].ToString() }; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; parentNode.nodes.Add(node); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string pId = childView["Id"].ToString(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AddChildItems(dt, node, pId); &nbsp;&nbsp;&nbsp; } } public class Node { &nbsp;&nbsp;&nbsp; public Node() &nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; nodes = new List&lt;Node&gt;(); &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; public string id { get; set; } &nbsp;&nbsp;&nbsp; public string text { get; set; } &nbsp;&nbsp;&nbsp; public string icon { get; set; } &nbsp;&nbsp;&nbsp; public List&lt;Node&gt; nodes { get; set; } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;WebMethod()&gt; Public Shared Function GetTreeData() As String &nbsp;&nbsp;&nbsp; Dim dt As DataTable = New DataTable() &nbsp;&nbsp;&nbsp; dt.Columns.AddRange(New DataColumn() {New DataColumn("Id"), New DataColumn("Text"), New DataColumn("ParentId")}) &nbsp;&nbsp;&nbsp; dt.Rows.Add(1, "IT", 0) &nbsp;&nbsp;&nbsp; dt.Rows.Add(2, "HR", 0) &nbsp;&nbsp;&nbsp; dt.Rows.Add(3, "Marketing", 0) &nbsp;&nbsp;&nbsp; dt.Rows.Add(4, "David", 1) &nbsp;&nbsp;&nbsp; dt.Rows.Add(5, "Jhon", 1) &nbsp;&nbsp;&nbsp; dt.Rows.Add(6, "Kevin", 2) &nbsp;&nbsp;&nbsp; dt.Rows.Add(7, "Marry", 2) &nbsp;&nbsp;&nbsp; dt.Rows.Add(8, "Robert", 3) &nbsp;&nbsp;&nbsp; dt.Rows.Add(9, "Andrea", 6) &nbsp;&nbsp;&nbsp; dt.Rows.Add(10, "Adam", 8) &nbsp;&nbsp;&nbsp; dt.Rows.Add(11, "Dharmendra", 4) &nbsp;&nbsp;&nbsp; dt.Rows.Add(12, "Ajeet", 5) &nbsp;&nbsp;&nbsp; Dim nodes As Node = New Node With {.text = "Department"} &nbsp;&nbsp;&nbsp; Dim view As DataView = New DataView(dt) &nbsp;&nbsp;&nbsp; view.RowFilter = "ParentId=0" &nbsp;&nbsp;&nbsp; For Each kvp As DataRowView In view &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dim parentId As String = kvp("Id").ToString() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dim node As Node = New Node With {.text = kvp("text").ToString()} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; nodes.nodes.Add(node) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AddChildItems(dt, node, parentId) &nbsp;&nbsp;&nbsp; Next &nbsp;&nbsp;&nbsp; Return (New JavaScriptSerializer()).Serialize(nodes).Replace(",""nodes"":[]", "") End Function Private Shared Sub AddChildItems(ByVal dt As DataTable, ByVal parentNode As Node, ByVal ParentId As String) &nbsp;&nbsp;&nbsp; Dim viewItem As DataView = New DataView(dt) &nbsp;&nbsp;&nbsp; viewItem.RowFilter = "ParentId=" &amp; ParentId &nbsp;&nbsp;&nbsp; For Each childView As DataRowView In viewItem &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dim node As Node = New Node With {.text = childView("text").ToString()} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; parentNode.nodes.Add(node) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dim pId As String = childView("Id").ToString() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AddChildItems(dt, node, pId) &nbsp;&nbsp;&nbsp; Next End Sub Public Class Node &nbsp;&nbsp;&nbsp; Public Sub New() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; nodes = New List(Of Node)() &nbsp;&nbsp;&nbsp; End Sub &nbsp;&nbsp;&nbsp; Public Property id As String &nbsp;&nbsp;&nbsp; Public Property text As String &nbsp;&nbsp;&nbsp; Public Property icon As String &nbsp;&nbsp;&nbsp; Public Property nodes As List(Of Node) End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/VXz9kH4.jpg" alt="" width="282" height="399" /></p> <p>For more function on Bootstrap TreeView refer below link.</p> <p><a href="https://github.com/jonmiles/bootstrap-treeview">https://github.com/jonmiles/bootstrap-treeview</a></p>https://www.aspforums.net:443/Threads/510570/Bind-Populate-Bootstrap-TreeView-from-database-using-jQuery-Ajax-in-ASPNet/https://www.aspforums.net:443/Threads/510570/Bind-Populate-Bootstrap-TreeView-from-database-using-jQuery-Ajax-in-ASPNet/Tue, 27 Aug 2019 07:03:51 GMT