Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class CustomerModel
{
public string CustomerId { get; set; }
public string Name { get; set; }
public string Country { get; set; }
public List<Orders> Orders { get; set; }
}
public class Orders
{
public int OrderId { get; set; }
public decimal? Freight { get; set; }
public string ShipCountry { get; set; }
}
Controller
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<CustomerModel> model = new List<CustomerModel>();
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 => o.CustomerID == customer.CustomerID)
.Take(3)
.Select(x => new Orders
{
OrderId = x.OrderID,
Freight = x.Freight,
ShipCountry = x.ShipCountry
}).ToList()
});
}
return Json(model, JsonRequestBehavior.AllowGet);
}
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['angularUtils.directives.dirPagination']);
app.controller('MyController', function ($scope, $http, MyService) {
MyService.CustomerOrders().then(function (response) {
$scope.Customers = response.data;
});
});
app.service("MyService", function ($http) {
this.CustomerOrders = function () {
return $http.get("/Home/GeCustomerOrders");
};
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table class="table table-responsive">
<thead>
<tr class="success">
<th></th>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody dir-paginate="customer in Customers|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
<tr ng-class-even="'even'" ng-class-odd="'odd'">
<td>
<button type="button" ng-click="expanded = !expanded" class="btn btn-default">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td>{{customer.CustomerId}}</td>
<td>{{customer.Name}}</td>
<td>{{customer.Country}}</td>
</tr>
<tr class="sub" ng-show="expanded">
<td>
</td>
<td colspan="5">
<table class="table table-responsive">
<tr class="info">
<th>Freight</th>
<th>Ship Country</th>
</tr>
<tr dir-paginate="order in customer.Orders|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
ng-class-even="'even'" ng-class-odd="'odd'">
<td><input type="hidden" ng-model="order.OrderId" />
{{order.Freight}}
</td>
<td>{{order.ShipCountry}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Screenshot
