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.Implement Nested HTML Table with Expand Collapse using AngularJS in ASP.Net MVC<p>Hi&nbsp;<a class="username" rel="mahesh213">mahesh213,</a></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;">Model</span></strong></p> <pre class="brush: csharp">public class CustomerModel { public string CustomerId { get; set; } public string Name { get; set; } public string Country { get; set; } public List&lt;Orders&gt; Orders { get; set; } } public class Orders { public int OrderId { get; set; } public decimal? Freight { get; set; } public string ShipCountry { get; set; } }</pre> <p><strong><span style="text-decoration: underline;">Controller</span></strong></p> <pre class="brush: csharp">public class HomeController : Controller { // GET: /Home/ public ActionResult Index() { NorthwindEntities entities = new NorthwindEntities(); return View(); } public JsonResult GeCustomerOrders() { using (NorthwindEntities entites = new NorthwindEntities()) { entites.ContextOptions.LazyLoadingEnabled = false; List&lt;CustomerModel&gt; model = new List&lt;CustomerModel&gt;(); foreach (Customer customer in entites.Customers.Take(5)) { model.Add(new CustomerModel { CustomerId = customer.CustomerID, Name = customer.ContactName, Country = customer.Country, Orders = entites.Orders .Where(o =&gt; o.CustomerID == customer.CustomerID) .Take(3) .Select(x =&gt; new Orders { OrderId = x.OrderID, Freight = x.Freight, ShipCountry = x.ShipCountry }).ToList() }); } return Json(model, JsonRequestBehavior.AllowGet); } } }</pre> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&gt; &lt;title&gt;Index&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; src=&#34;https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;angularUtils.directives.dirPagination&#39;]); app.controller(&#39;MyController&#39;, function ($scope, $http, MyService) { MyService.CustomerOrders().then(function (response) { $scope.Customers = response.data; }); }); app.service(&#34;MyService&#34;, function ($http) { this.CustomerOrders = function () { return $http.get(&#34;/Home/GeCustomerOrders&#34;); }; }); &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;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 dir-paginate=&#34;customer in Customers|orderBy:sortKey:reverse|filter:search|itemsPerPage:10&#34;&gt; &lt;tr ng-class-even=&#34;&#39;even&#39;&#34; ng-class-odd=&#34;&#39;odd&#39;&#34;&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;Freight&lt;/th&gt; &lt;th&gt;Ship Country&lt;/th&gt; &lt;/tr&gt; &lt;tr dir-paginate=&#34;order in customer.Orders|orderBy:sortKey:reverse|filter:search|itemsPerPage:10&#34; ng-class-even=&#34;&#39;even&#39;&#34; ng-class-odd=&#34;&#39;odd&#39;&#34;&gt; &lt;td&gt;&lt;input type=&#34;hidden&#34; ng-model=&#34;order.OrderId&#34; /&gt; {{order.Freight}} &lt;/td&gt; &lt;td&gt;{{order.ShipCountry}}&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;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/S5dmsrd.gif" alt="" width="344" height="365" /></span></strong></p>https://www.aspforums.net:443/Threads/133181/Implement-Nested-HTML-Table-with-Expand-Collapse-using-AngularJS-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/133181/Implement-Nested-HTML-Table-with-Expand-Collapse-using-AngularJS-in-ASPNet-MVC/Fri, 05 Jul 2019 06:47:37 GMT