Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult getAll()
{
List<Employee> employeeList = GetAll();
var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);
return JsonResult;
}
public ActionResult GetCategories()
{
List<Category> categories = Categories();
return Json(categories, JsonRequestBehavior.AllowGet);
}
public ActionResult GetProducts(int? CategoryID)
{
List<Product> products = Products();
products = products.Where(x => x.CategoryID == CategoryID).ToList();
return Json(products, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult getTimesheetByNo(int id)
{
List<Employee> reportList = null;
if (id > 0)
{
reportList = GetAll().Where(x => x.Id == id).ToList();
}
else
{
reportList = GetAll();
}
List<Employee> employeesList = new List<Employee>();
foreach (Employee employee in reportList)
{
employee.Categories = Categories();
employee.Products = Products().Where(x => x.CategoryID == employee.CategoryID).ToList();
employeesList.Add(employee);
}
EmplpoyeeDetail details = new EmplpoyeeDetail();
details.Employees = employeesList;
var JsonResult = Json(details, JsonRequestBehavior.AllowGet);
return JsonResult;
}
private static List<Employee> GetAll()
{
List<Employee> employeeList = new List<Employee>();
employeeList.Add(new Employee { Id = 1, Name = "mahesh", CategoryID = 1, ProductID = 1 });
employeeList.Add(new Employee { Id = 1, Name = "mahesh 1", CategoryID = 1, ProductID = 1 });
employeeList.Add(new Employee { Id = 2, Name = "rahul", CategoryID = 2, ProductID = 1 });
return employeeList;
}
private static List<Category> Categories()
{
List<Category> categories = new List<Category>();
categories.Add(new Category { CategoryID = 1, CategortName = "Category 1", IsEmployee = true });
categories.Add(new Category { CategoryID = 2, CategortName = "Category 2", IsEmployee = false });
categories.Add(new Category { CategoryID = 3, CategortName = "Category 3", IsEmployee = true });
return categories;
}
private static List<Product> Products()
{
List<Product> products = new List<Product>();
products.Add(new Product { ProductID = 1, CategoryID = 1, ProductName = "Product 1" });
products.Add(new Product { ProductID = 2, CategoryID = 1, ProductName = "Product 2" });
products.Add(new Product { ProductID = 3, CategoryID = 3, ProductName = "Product 3" });
return products;
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public int CategoryID { get; set; }
public int ProductID { get; set; }
public List<Category> Categories { get; set; }
public List<Product> Products { get; set; }
}
public class Category
{
public int CategoryID { get; set; }
public string CategortName { get; set; }
public bool IsEmployee { get; set; }
}
public class Product
{
public int ProductID { get; set; }
public int CategoryID { get; set; }
public string ProductName { get; set; }
}
public class EmplpoyeeDetail
{
public List<Employee> Employees { 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/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.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, $window) {
$scope.Details = [{ CName: "Item1" }, { CName: "Item2"}];
GetCategory();
GetEmployees();
function GetCategory() {
$scope.categories = [];
$http({
method: 'Get',
url: '/Home/GetCategories/'
}).success(function (data, status, headers, config) {
$scope.categories = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
function GetEmployees() {
$scope.employees = [];
$http({
method: 'Get',
url: '/Home/getAll'
}).then(function (response) {
$scope.employees = response.data;
}), function (error) {
$scope.message = 'Unexpected Error';
};
}
$scope.GetProducts = function (index, detail) {
if (detail.Category != null) {
$http({
method: 'Get',
url: '/Home/GetProducts/',
params: { CategoryID: detail.Category }
}).success(function (data, status, headers, config) {
if (data.length > 0) {
for (var i = 0; i < $scope.Details.length; i++) {
if ($scope.Details[i].Category == data[0].CategoryID) {
$scope.Details[i].products = data;
}
}
} else {
for (var i = 0; i < $scope.Details.length; i++) {
if ($scope.Details[i].CName == detail.CName
&& $scope.Details[i].Poduct == detail.Poduct) {
$scope.Details[i].products = null;
break;
}
}
}
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
} else {
$scope.Details[index].products = '';
}
}
$scope.edit = function (employee) {
$.post("/Home/getTimesheetByNo/", { id: employee.Id }, function (r) {
$scope.Details = [];
for (var i = 0; i < r.Employees.length; i++) {
var time = {};
time.CName = r.Employees[i].Name;
time.Category = r.Employees[i].CategoryID;
time.Categores = r.Employees[i].Categories;
time.Product = r.Employees[i].ProductID;
time.products = r.Employees[i].Products.length > 0 ? r.Employees[i].Products : null;
$scope.Details.push(time);
}
$scope.$apply();
});
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<table id="tblOrders" class="table table-responsive">
<tr>
<th>Name</th>
<th>Category</th>
<th>Product</th>
</tr>
<tbody dir-paginate="detail in Details|orderBy:sortKey:reverse|filter:search|itemsPerPage:1">
<tr>
<td>{{detail.CName}}</td>
<td>
<select class="input-sm form-control" name="CategortName" ng-model="detail.Category"
ng-change="GetProducts($index,detail)" ng-options="c.CategoryID as c.CategortName for c in categories">
<option value="">Select Category</option>
</select>
</td>
<td>
<select class="input-sm form-control" ng-model="detail.Product" ng-disabled="!detail.products"
ng-options="s.ProductID as s.ProductName for s in detail.products">
<option value="">-- Select Product --</option>
</select>
</td>
</tr>
</tbody>
</table>
<dir-pagination-controls direction-links="true" boundary-links="true">
</dir-pagination-controls>
<hr />
<div id="dvContainer">
<div>
<div class="table-responsive ">
<table id="dvData" class="table table-bordered ">
<tr class="success">
<th>OrderName</th>
<th>CId</th>
<th>Actions</th>
</tr>
<tr ng-repeat="employee in employees">
<td><input type="hidden" ng-model="employee.Id " />{{employee.CategoryID}}</td>
<td>{{employee.ProductID}}</td>
<td><a ng-click="edit(employee)" href="">Edit</a></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Screenshot
