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) Nested HTML Table from Database with Expand Collapse using AngularJS in ASP.Net<p>Hi&nbsp;rani,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><span style="text-decoration: underline;"><strong>Database</strong></span></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&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, []); app.controller(&#39;MyController&#39;, function ($scope, $http) { $http.post(&#34;WebService.asmx/GetCustomerOrders&#34;, { &#39;Content-Type&#39;: &#39;application/json&#39; }) .then(function (response) { $scope.Customers = response.data.d; }, function error(response) { }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;table class=&#34;table table-responsive&#34;&gt; &lt;thead&gt; &lt;tr class=&#34;success&#34;&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;Customer Id&lt;/th&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Country&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody ng-repeat=&#34;customer in Customers&#34;&gt; &lt;tr&gt; &lt;td&gt; &lt;button type=&#34;button&#34; ng-click=&#34;expanded = !expanded&#34; class=&#34;btn btn-default&#34;&gt; &lt;span ng-bind=&#34;expanded ? &#39;-&#39; : &#39;+&#39;&#34;&gt;&lt;/span&gt; &lt;/button&gt; &lt;/td&gt; &lt;td&gt;{{customer.CustomerId}}&lt;/td&gt; &lt;td&gt;{{customer.Name}}&lt;/td&gt; &lt;td&gt;{{customer.Country}}&lt;/td&gt; &lt;/tr&gt; &lt;tr class=&#34;sub&#34; ng-show=&#34;expanded&#34;&gt; &lt;td&gt;&lt;/td&gt; &lt;td colspan=&#34;5&#34;&gt; &lt;table class=&#34;table table-responsive&#34;&gt; &lt;tr class=&#34;info&#34;&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; &lt;tr ng-repeat=&#34;order in customer.Orders&#34;&gt; &lt;td&gt;{{order.OrderId}}&lt;/td&gt; &lt;td&gt;{{order.Freight}}&lt;/td&gt; &lt;td&gt;{{order.ShipCity}}&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Webservice</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System; using System.Collections.Generic; using System.Configuration; using System.Data.SqlClient; using System.Web.Services; [WebService(Namespace = &#34;http://tempuri.org/&#34;)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { [WebMethod] public 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 List&lt;Order&gt; Orders(string customerId) { List&lt;Order&gt; orderList = 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 = Convert.ToInt32(rdr[&#34;OrderId&#34;]), Freight = Convert.ToDecimal(rdr[&#34;Freight&#34;]), ShipCity = Convert.ToString(rdr[&#34;ShipCity&#34;]), }; orderList.Add(order); } con.Close(); } } return orderList; } 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 int OrderId { get; set; } public decimal Freight { get; set; } public string ShipCity { get; set; } } } </pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Web Imports System.Collections.Generic Imports System.Configuration Imports System.Data.SqlClient Imports System.Web.Services &#39; To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. &lt;System.Web.Script.Services.ScriptService()&gt; _ &lt;WebService(Namespace:=&#34;http://tempuri.org/&#34;)&gt; _ &lt;WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)&gt; _ &lt;Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()&gt; _ Public Class WebService Inherits System.Web.Services.WebService &lt;WebMethod()&gt; Public 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 Function Orders(ByVal customerId As String) As List(Of Order) Dim orderList 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 = Convert.ToInt32(rdr(&#34;OrderId&#34;)), .Freight = Convert.ToDecimal(rdr(&#34;Freight&#34;)), .ShipCity = Convert.ToString(rdr(&#34;ShipCity&#34;)) } orderList.Add(order) End While con.Close() End Using End Using Return orderList 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 Integer Public Property Freight As Decimal Public Property ShipCity As String End Class 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/eGRjMsg.gif" alt="" width="298" height="401" /></span></strong></p>https://www.aspforums.net:443/Threads/319515/Bind-Populate-Nested-HTML-Table-from-Database-with-Expand-Collapse-using-AngularJS-in-ASPNet/https://www.aspforums.net:443/Threads/319515/Bind-Populate-Nested-HTML-Table-from-Database-with-Expand-Collapse-using-AngularJS-in-ASPNet/Tue, 16 Jul 2019 01:59:00 GMT