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();
}
[HttpGet]
public JsonResult GetCategory()
{
List<Category> categories = new List<Category>();
categories.Add(new Category { CategoryId = 1, CategoryName = "Seafood" });
categories.Add(new Category { CategoryId = 2, CategoryName = "Dairy Products" });
return Json(categories, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult GetProduct(int category)
{
List<Product> products = new List<Product>();
products.Add(new Product { ProductId = 1, ProductName = "Mishi Kobe Niku", CategoryId = 2 });
products.Add(new Product { ProductId = 2, ProductName = "Ikura", CategoryId = 1 });
return Json(products.Where(x => x.CategoryId == category).Select(x => new { ProductName = x.ProductName }).FirstOrDefault());
}
public class Category
{
public int CategoryId { get; set; }
public string CategoryName { get; set; }
}
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public int CategoryId { get; set; }
}
}
View
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {
GetCategory();
$scope.IsDisabled = true;
$scope.GetProducts = function () {
if ($scope.CategoryName != null) {
$http({
method: 'POST',
url: 'Home/GetProduct',
params: { category: JSON.stringify($scope.CategoryName) }
}).success(function (data, status, headers, config) {
$scope.ProductName = data.ProductName;
$scope.IsDisabled = $scope.CategoryName == null ? true : false;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.ProductName = "";
$scope.IsDisabled = $scope.CategoryName == null ? true : false;
}
}
function GetCategory() {
$scope.categories = [];
$http({
method: 'Get',
url: 'Home/GetCategory'
}).success(function (data, status, headers, config) {
$scope.categories = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
} ]);
</script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
<div class="form-horizontal">
<div class="form-row">
<div class="col-md-4">
<label for="CategoryName">
Item</label>
<select class="form-control" id="CategoryName" ng-change="GetProducts()" ng-model="CategoryName"
containercssclass="all" ng-options="c.CategoryId as c.CategoryName for c in categories"
ng-disabled="disabled">
<option value="">Select Item</option>
</select>
</div>
<div class="col-md-4">
<label for="ProductName">Product Valie</label>
<input type="text" ng-model="ProductName" ng-disabled="IsDisabled" class="form-control" />
</div>
</div>
<div>
</div>
</div>
</body>
</html>
Screenshot
