Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Database
I have made use of tables Countries, State.
You can download the database table SQL by clicking the download link below.
Download SQL file
Controller
public class HomeController : Controller
{
private Cascading_ddlEntities1 db = new Cascading_ddlEntities1();
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult GetCountries()
{
var countries = db.Countries.Select(model => new { model.CountryId, model.CountryName }).ToList();
return Json(countries, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public ActionResult GetStates(int? CategoryID)
{
var states = db.States.Where(model => model.CountryId == CategoryID).Select(model => new { model.StateId, model.StateName }).ToList();
return Json(states, JsonRequestBehavior.AllowGet);
}
}
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.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://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$scope.Customers = [];
GetCountries();
function GetCountries() {
$scope.Countries = [];
$http({
method: 'Get',
url: '/Home/GetCountries/'
}).success(function (data, status, headers, config) {
$scope.Countries = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
})
}
$scope.GetStates = function () {
var countryId = $scope.Country.CountryId;
var data = { "CategoryID": countryId };
var config = {
params: data,
headers: { 'Accept': 'application/json' }
};
if (countryId) {
$http.get("/Home/GetStates", config)
.then(function (data, status, headers, config) {
$scope.States = data.data;
}, function (response) {
alert(response.responseText);
});
}
else {
$scope.products = null;
}
}
$scope.Add = function () {
var customer = {};
customer.Category = $scope.Country.CountryName;
customer.Product = $scope.State.StateName;
$scope.Customers.push(customer);
$scope.Category = "";
$scope.Product = "";
};
$scope.Remove = function (index) {
//Find the record using Index from Array.
var name = $scope.Customers[index].Category;
if ($window.confirm("Do you want to delete: " + name)) {
//Remove the item from Array using Index.
$scope.Customers.splice(index, 1);
}
}
$scope.EditCustomer = function (data) {
$scope.editing = true;
$scope.selected = angular.copy(data);
};
$scope.SaveCustomer = function (id) {
$scope.editing = false;
$scope.Value[id] = angular.copy($scope.selected);
};
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>
Country
</th>
<th>
State
</th>
<th>
Action
</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>
<span ng-show="edit != true">{{m.Category}}</span>
<input ng-show="edit" type="text" ng-model="m.Category" class="form-control" />
</td>
<td>
<span ng-show="edit != true">{{m.Product}}</span>
<input ng-show="edit" type="text" ng-model="m.Product" class="form-control" />
</td>
<td>
<button class="btn btn-primary" type="button" ng-show="edit != true && editing != true"
id="table-edit" ng-click="edit = true; EditCustomer(m)">
<i class="fa fa-fw fa-pencil"></i>
</button>
<button class="btn btn-primary" type="button" ng-show="edit" id="table-save" ng-click="edit = false; SaveCustomer($index)">
<i class="fa fa-save"></i>
</button>
</td>
<td>
<input type="button" class="btn btn-danger" ng-click="Remove($index)" value="Remove" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<select class="input-sm form-control" select2="" name="Country" ng-model="Country"
containercssclass="all" ng-change="GetStates()" ng-options="c as c.CountryName for c in Countries"
ng-disabled="disabled">
<option value="">Select Country</option>
</select>
</td>
<td>
<select select2="" ng-model="State" ng-disabled="!States" class="input-sm form-control"
ng-options="s as s.StateName for s in States">
<option value="">-- Select State --</option>
</select>
</td>
<td>
<input type="button" class="btn btn-primary" ng-click="Add()" value="Add" />
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Screenshot
