Hi mahesh213,
Check the below code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult GetCountry()
{
List<Country> countries = new List<Country>();
countries.Add(new Country { COI_Id = 1, COI_Name = "India" });
countries.Add(new Country { COI_Id = 2, COI_Name = "Australia" });
countries.Add(new Country { COI_Id = 3, COI_Name = "England" });
return Json(countries, JsonRequestBehavior.AllowGet);
}
public ActionResult GetState(int id)
{
List<State> states = new List<State>();
states.Add(new State { COI_Id = 1, STI_Id = 1, STI_Name = "Mh" });
states.Add(new State { COI_Id = 1, STI_Id = 2, STI_Name = "AP" });
states.Add(new State { COI_Id = 1, STI_Id = 3, STI_Name = "KA" });
states = states.Where(x => x.COI_Id == id).ToList();
return Json(states, JsonRequestBehavior.AllowGet);
}
public ActionResult GetParty()
{
List<Party> parties = new List<Party>();
parties.Add(new Party { PAI_Id = 1, COI_Id = 1, COI_Name = "India", STI_Id = 1, STI_Name = "Mh" });
parties.Add(new Party { PAI_Id = 2, COI_Id = 1, COI_Name = "India", STI_Id = 2, STI_Name = "AP" });
parties.Add(new Party { PAI_Id = 3, COI_Id = 1, COI_Name = "India", STI_Id = 3, STI_Name = "KA" });
return Json(parties, JsonRequestBehavior.AllowGet);
}
public ActionResult getPartyByNo(int id)
{
List<Party> parties = new List<Party>();
parties.Add(new Party { PAI_Id = 1, COI_Id = 1, COI_Name = "India", STI_Id = 1, STI_Name = "Mh" });
parties.Add(new Party { PAI_Id = 2, COI_Id = 1, COI_Name = "India", STI_Id = 2, STI_Name = "AP" });
parties.Add(new Party { PAI_Id = 3, COI_Id = 1, COI_Name = "India", STI_Id = 3, STI_Name = "KA" });
parties = parties.Where(x => x.PAI_Id == id).ToList();
return Json(parties, JsonRequestBehavior.AllowGet);
}
public class Country
{
public int COI_Id { get; set; }
public string COI_Name { get; set; }
}
public class State
{
public int STI_Id { get; set; }
public string STI_Name { get; set; }
public int COI_Id { get; set; }
}
public class Party
{
public int PAI_Id { get; set; }
public int COI_Id { get; set; }
public string COI_Name { get; set; }
public int STI_Id { get; set; }
public string STI_Name { get; set; }
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-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" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.directive("select2", function ($timeout, $parse) {
return {
restrict// Code goes here
: 'AC',
require: 'ngModel',
link: function (scope, element, attrs) {
console.log(attrs);
$timeout(function () {
element.select2();
element.select2Initialized = true;
});
var refreshSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.trigger('change');
});
};
var recreateSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.select2('destroy');
element.select2();
});
};
scope.$watch(attrs.ngModel, refreshSelect);
if (attrs.ngOptions) {
var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
// watch for option list change
scope.$watch(list, recreateSelect);
}
if (attrs.ngDisabled) {
scope.$watch(attrs.ngDisabled, refreshSelect);
}
}
};
});
app.controller("myCntrl", ['$scope', '$http', 'myService', '$timeout', function ($scope, $http, myService, $timeout) {
$scope.mahesh = false;
GetCountries();
GetParties();
function GetCountries() {
$scope.countries = [];
$http({
method: 'Get',
url: '/Home/GetCountry/'
}).success(function (data, status, headers, config) {
$scope.countries = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
function GetParties() {
$scope.countries = [];
$http({
method: 'Get',
url: '/Home/GetParty/'
}).success(function (data, status, headers, config) {
$scope.parties = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.GetStates = function () {
var country = $scope.COI_Name;
$http({
method: 'Get',
url: '/Home/GetState/',
params: { id: country }
}).success(function (data, status, headers, config) {
$scope.states = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.AddPartyDiv = function () {
$scope.mahesh = true;
GetCountries();
$scope.Action = "Add";
}
$scope.editparty = function (party) {
$scope.mahesh = true;
var getData = myService.getParty(party.PAI_Id);
getData.then(function (pa) {
$scope.COI_Name = pa.data[0].COI_Id;
$scope.GetStates();
$timeout(function () {
$scope.STI_Name = pa.data[0].STI_Id;
}, 100);
$scope.Action = "Edit";
}, function (msg) {
alert(msg.data);
$scope.msg = msg.data;
});
}
} ]);
app.service("myService", function ($http) {
// get Party By Id
this.getParty = function (Id) {
var response = $http({
method: "post",
url: "/Home/getPartyByNo",
params: {
id: JSON.stringify(Id)
}
});
return response;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
<div class="container">
<div><br />
<div id="wrapper" class="clearfix" ng-show="mahesh">
<div class="well">
<div class="row">
<div class="col-md-3">
<label for="COI_Name">
Country</label>
<select style="display: inline; width: 252px;" class="form-control input-sm" select2=""
name="COI_Name" id="COI_Name" ng-model="COI_Name" ng-change="GetStates()" containercssclass="all"
ng-options="c.COI_Id as c.COI_Name for c in countries" ng-disabled="disabled">
<option value="">Select Country</option>
</select>
</div>
<div class="col-md-3">
<label for="STI_Name">
State</label><br />
<select style="display: inline; width: 252px;" select2="" ng-model="STI_Name" ng-disabled="!states"
name="STI_Name" class="form-control input-sm" ng-options="s.STI_Id as s.STI_Name for s in states">
<option value="">-- Select State --</option>
</select>
</div>
</div>
</div>
</div>
<button class="btn btn-success btn-sm " ng-click="AddPartyDiv();">Add Party</button>
</div><br /><br />
<div id="dvContainer">
<div>
<div class="table-responsive ">
<table id="dvData" class="table table-bordered ">
<tr class="success">
<th>Country</th>
<th>State</th>
<th>Actions</th>
</tr>
<tr ng-repeat="party in parties">
<td>
<input type="hidden" ng-model="party.PAI_Id" />{{party.COI_Name}}
</td>
<td>{{party.STI_Name }}</td>
<td><a ng-click="editparty(party)" href="">Edit</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Screenshot
