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.Populate nested HTML Table from database using jQuery Ajax in ASP.Net<p>Hi&nbsp;SajidHussa,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">Database</span></strong></p> <p>For this example I have used of Northwind database that you can download using the link given below.</p> <p><a href="https://www.aspsnippets.com/Articles/Install-Microsoft-Northwind-and-Pubs-Sample-databases-in-SQL-Server-Management-Studio.aspx" target="_blank">Download Northwind Database</a></p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head id=&#34;Head1&#34; runat=&#34;server&#34;&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { $.ajax({ type: &#34;POST&#34;, url: &#34;Default.aspx/GetCustomerOrders&#34;, data: {}, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, success: function (response) { var customers = response.d; var table = &#39;&lt;tr&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Country&lt;/th&gt;&lt;/tr&gt;&#39;; $.each(customers, function (i, item) { table += &#39;&lt;tr&gt;&lt;td&gt;&lt;img alt=&#34;&#34; style=&#34;cursor: pointer&#34; src=&#34;images/plus.png&#34; /&gt;&lt;div id=&#34;dvOrders&#34; style=&#34;display: none&#34;&gt;&#39;; var html = &#39;&lt;table&gt;&lt;tr&gt;&lt;th&gt;Order Id&lt;/th&gt;&lt;th&gt;Freight&lt;/th&gt;&lt;th&gt;Ship City&lt;/th&gt;&lt;/tr&gt;&#39;; $.each(item.Orders, function (i1, item1) { html += &#39;&lt;tr&gt;&lt;td&gt;&#39; + item1.OrderId + &#39;&lt;/td&gt;&lt;td&gt;&#39; + item1.Freight + &#39;&lt;/td&gt;&lt;td&gt;&#39; + item1.ShipCity + &#39;&lt;/td&gt;&lt;/tr&gt;&#39;; }); table += html + &#39;&lt;/table&gt;&lt;/div&gt;&lt;/td&gt;&#39;; table += &#39;&lt;td&gt;&#39; + item.Name + &#39;&lt;/td&gt;&#39;; table += &#39;&lt;td&gt;&#39; + item.Country + &#39;&lt;/td&gt;&lt;/tr&gt;&#39;; }); $(&#39;#tblCustomers&#39;).append(table); }, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); $(&#34;body&#34;).on(&#34;click&#34;, &#34;[src*=plus]&#34;, function () { $(this).closest(&#34;tr&#34;).after(&#34;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td colspan = &#39;999&#39;&gt;&#34; + $(this).next().html() + &#34;&lt;/td&gt;&lt;/tr&gt;&#34;) $(this).attr(&#34;src&#34;, &#34;images/minus.png&#34;); }); $(&#34;body&#34;).on(&#34;click&#34;, &#34;[src*=minus]&#34;, function () { $(this).attr(&#34;src&#34;, &#34;images/plus.png&#34;); $(this).closest(&#34;tr&#34;).next().remove(); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;table id=&#34;tblCustomers&#34; width=&#34;100%&#34;&gt; &lt;/table&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Namespaces</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Collections.Generic; using System.Configuration; using System.Data.SqlClient; using System.Web.Services;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Collections.Generic Imports System.Configuration Imports System.Data.SqlClient 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 List&lt;Customer&gt; GetCustomerOrders() { List&lt;Customer&gt; customers = new List&lt;Customer&gt;(); using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString)) { using (SqlCommand cmd = new SqlCommand()) { cmd.Connection = con; con.Open(); cmd.CommandText = &#34;SELECT TOP 5 CustomerId,ContactName,Country FROM Customers ORDER BY ContactName ASC&#34;; SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { Customer customer = new Customer { CustomerId = rdr[&#34;CustomerId&#34;].ToString(), Name = rdr[&#34;ContactName&#34;].ToString(), Country = rdr[&#34;Country&#34;].ToString(), Orders = Orders(rdr[&#34;CustomerId&#34;].ToString()) }; customers.Add(customer); } con.Close(); } } return customers; } public static List&lt;Order&gt; Orders(string customerId) { List&lt;Order&gt; orders = new List&lt;Order&gt;(); using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString)) { using (SqlCommand cmd = new SqlCommand()) { cmd.Connection = con; con.Open(); cmd.CommandText = &#34;SELECT TOP 3 OrderId,Freight,ShipCity FROM Orders WHERE CustomerId = @CustomerId&#34;; cmd.Parameters.AddWithValue(&#34;@CustomerId&#34;, customerId); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { Order order = new Order { OrderId = rdr[&#34;OrderId&#34;].ToString(), Freight = rdr[&#34;Freight&#34;].ToString(), ShipCity = rdr[&#34;ShipCity&#34;].ToString(), }; orders.Add(order); } con.Close(); } } return orders; } public class Customer { public string CustomerId { get; set; } public string Name { get; set; } public string Country { get; set; } public List&lt;Order&gt; Orders { get; set; } } public class Order { public string OrderId { get; set; } public string Freight { get; set; } public string ShipCity { get; set; } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;WebMethod()&gt; Public Shared Function GetCustomerOrders() As List(Of Customer) Dim customers As List(Of Customer) = New List(Of Customer)() Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString) Using cmd As SqlCommand = New SqlCommand() cmd.Connection = con con.Open() cmd.CommandText = &#34;SELECT TOP 5 CustomerId,ContactName,Country FROM Customers ORDER BY ContactName ASC&#34; Dim rdr As SqlDataReader = cmd.ExecuteReader() While rdr.Read() Dim customer As Customer = New Customer With { .CustomerId = rdr(&#34;CustomerId&#34;).ToString(), .Name = rdr(&#34;ContactName&#34;).ToString(), .Country = rdr(&#34;Country&#34;).ToString(), .Orders = Orders(rdr(&#34;CustomerId&#34;).ToString()) } customers.Add(customer) End While con.Close() End Using End Using Return customers End Function Public Shared Function Orders(ByVal customerId As String) As List(Of Order) Dim ordersList As List(Of Order) = New List(Of Order)() Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString) Using cmd As SqlCommand = New SqlCommand() cmd.Connection = con con.Open() cmd.CommandText = &#34;SELECT TOP 3 OrderId,Freight,ShipCity FROM Orders WHERE CustomerId = @CustomerId&#34; cmd.Parameters.AddWithValue(&#34;@CustomerId&#34;, customerId) Dim rdr As SqlDataReader = cmd.ExecuteReader() While rdr.Read() Dim order As Order = New Order With { .OrderId = rdr(&#34;OrderId&#34;).ToString(), .Freight = rdr(&#34;Freight&#34;).ToString(), .ShipCity = rdr(&#34;ShipCity&#34;).ToString() } ordersList.Add(order) End While con.Close() End Using End Using Return ordersList End Function Public Class Customer Public Property CustomerId As String Public Property Name As String Public Property Country As String Public Property Orders As List(Of Order) End Class Public Class Order Public Property OrderId As String Public Property Freight As String Public Property ShipCity As String End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/hgowJNt.gif" alt="" width="334" height="338" /></span></strong></p>https://www.aspforums.net:443/Threads/448532/Populate-nested-HTML-Table-from-database-using-jQuery-Ajax-in-ASPNet/https://www.aspforums.net:443/Threads/448532/Populate-nested-HTML-Table-from-database-using-jQuery-Ajax-in-ASPNet/Fri, 12 Jul 2019 03:03:17 GMT