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
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GeCustomerOrders()
{
NorthwindEntities db = new NorthwindEntities();
List<CustomerModel> CO = new List<CustomerModel>();
string[] customesids = new string[] { "ALFKI", "ANATR", "FISSA", "PARIS" };
var cust = db.Customers.Where(x => customesids.Contains(x.CustomerID)).OrderBy(a => a.ContactName).ToList();
foreach (var i in cust)
{
List<OrderDetail> orders = db.Orders.Where(a => a.CustomerID.Equals(i.CustomerID)).Take(2)
.OrderBy(a => a.OrderDate)
.Select(x => new OrderDetail { OrderDate = x.OrderDate, ShipName = x.ShipName }).ToList();
CO.Add(new CustomerModel
{
Customers = new CustomerDetail { CustomerID = i.CustomerID, ContactName = i.ContactName, Address = i.Address },
Orders = orders
});
}
return new JsonResult { Data = CO, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
public class CustomerModel
{
public CustomerDetail Customers { get; set; }
public List<OrderDetail> Orders { get; set; }
}
public class CustomerDetail
{
public string CustomerID { get; set; }
public string ContactName { get; set; }
public string Address { get; set; }
}
public class OrderDetail
{
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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.filter("dateFilter", function () {
return function (item) {
if (item != null) {
return new Date(parseInt(item.substr(6)));
}
return "";
};
});
app.controller('MyController', function ($scope, $http, MyService) {
GetAllEmployees();
//To Get All Employee Records
function GetAllEmployees() {
var getData = MyService.getemployee();
getData.then(function (emp) {
$scope.Customers = emp.data;
}, function (emp) {
alert("Records gathering failed!");
});
}
$scope.Edit = function (CustomerID) {
for (var i = 0; i < $scope.Customers.length; i++) {
if ($scope.Customers[i].Customers.CustomerID == CustomerID) {
if ($scope.Customers[i].Orders.length > 0) {
alert("evrything is fine")
} else {
alert("valeus are not present in both grid views")
}
break;
}
}
}
});
app.service("MyService", function ($http) {
//get All Employees
this.getemployee = 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>Address</th>
<th>Action</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.Customers.CustomerID }}</td>
<td>{{customer.Customers.ContactName }}</td>
<td>{{customer.Customers.Address}}</td>
<td ng-click="Edit(customer.Customers.CustomerID)" class="btn btn-primary">Edit</td>
</tr>
<tr class="sub" ng-show="expanded">
<td>
</td>
<td colspan="5">
<table class="table table-responsive">
<tr class="info">
<th>OrderDate</th>
<th>Ship Name</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.OrderDate | dateFilter | date:"dd-MM-yyyy"}}
</td>
<td>{{order.ShipName}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Screenshot
