Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult GetCategories()
{
List<Category> categories = new List<Category>();
categories.Add(new Category { CategoryID = 1, CategortName = "Category 1" });
categories.Add(new Category { CategoryID = 2, CategortName = "Category 2" });
categories.Add(new Category { CategoryID = 3, CategortName = "Category 3" });
return Json(categories, JsonRequestBehavior.AllowGet);
}
public ActionResult GetProducts(int? CategoryID)
{
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" });
products = products.Where(x => x.CategoryID == CategoryID).ToList();
return Json(products, JsonRequestBehavior.AllowGet);
}
public class Category
{
public int CategoryID { get; set; }
public string CategortName { get; set; }
}
public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public int CategoryID { 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://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$scope.Details = [{ CName: "Item1" }, { CName: "Item2"}];
GetCategory();
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';
});
}
$scope.GetProducts = function (detail, index) {
if (detail.Category != null) {
var catId = detail.Category.CategoryID;
$http({
method: 'Get',
url: '/Home/GetProducts/',
params: { CategoryID: catId }
}).success(function (data, status, headers, config) {
if (data.length > 0) {
$scope.Details[index].products = data;
} else {
$scope.Details[index].products = '';
}
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
} else {
$scope.Details[index].products = '';
}
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<table id="tblOrders" class="table table-responsive">
<tr>
<th>Cname</th>
<th>Category</th>
<th>Product</th>
</tr>
<tbody ng-repeat="detail in Details">
<tr>
<td>{{detail.CName}}</td>
<td>
<select class="input-sm form-control" select2="" name="CategortName" ng-model="detail.Category"
containercssclass="all" ng-change="GetProducts(detail,$index)" ng-options="c as c.CategortName for c in categories"
ng-disabled="disabled">
<option value="">Select Category</option>
</select>
</td>
<td>
<select select2="" ng-model="Product" ng-disabled="!detail.products" class="input-sm form-control"
ng-options="s as s.ProductName for s in detail.products">
<option value="">-- Select Product --</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Screenshot
