January 16, 2019 11:50 by
Peter
In this post, I will make a Cascading Dropdown in AngularJS. Add 2 Class 1 for Countries and other for state. Write the following code:
public class Country
{
public int CountryId { get; set; }
public string CountryName { get; set; }
}
public class State
{
public int StateId { get; set; }
public string StateName { get; set; }
public int CountryId { get; set; }
}
Create a ActionResult Name it as Index [Add a View].
Add the script
<script src="~/Scripts/angular.min.js"></script>
Create a js Name it in my case its CascadingDropdown.
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $http) {
getcountries();
function getcountries() {
$http({
method: 'Get',
url: '/Home/Countries'
}).success(function (data, status, header, config) {
$scope.countries = data;
}).error(function (data, status, header, config) {
$scope.message = "Error";
});
}
$scope.GetStates = function ()
{
var countryIdselected = $scope.countrymodel;
if (countryIdselected) {
$http({
method: 'Post',
url: '/Home/States',
data: JSON.stringify({ countryId: countryIdselected })
}).success(function (data, status, header, config) {
$scope.states = data;
}).error(function (data, status, header, config) {
$scope.message = "Error";
})
}
else {
$scope.states = null;
}
}
});
//Calls for Country DropDown
public ActionResult Countries()
{
List<Country> cobj = new List<Country>();
cobj.Add(new Country { CountryId = 1, CountryName = "India" });
cobj.Add(new Country { CountryId = 2, CountryName = "Srilanka" });
cobj.Add(new Country { CountryId = 3, CountryName = "USA" });
return Json(cobj, JsonRequestBehavior.AllowGet);
}
//Calls for State DropDown with CountryID as Parameter
public ActionResult States(int countryId)
{
List<State> sobj = new List<State>();
sobj.Add(new State { StateId = 1, StateName = "Karnataka", CountryId = 1 });
sobj.Add(new State { StateId = 2, StateName = "Kerala", CountryId = 1 });
sobj.Add(new State { StateId = 3, StateName = "TamilNadu", CountryId = 1 });
sobj.Add(new State { StateId = 1, StateName = "Newyork", CountryId = 3 });
sobj.Add(new State { StateId = 1, StateName = "Colombo", CountryId = 2 });
//Filter based on CountryID
var result = sobj.Where(x => x.CountryId == countryId).Select(x => new { x.StateId, x.StateName });
return Json(result);
}
//IndexView
// Add the script file <script src="~/Scripts/CascadingDropdown.js"></script>
<div ng-app="myApp">
<form name="mainForm" ng-controller="myController">
<select ng-model="countrymodel" ng-options=" c.CountryId as c.CountryName for c in countries" ng-change="GetStates()">
<option value="">-- Select Country --</option>
</select>
<select ng-model="statemodel" ng-options="s.StateId as s.StateName for s in states ">
<option value="">-- Select State --</option>
</select>
</form>
</div>
I hope it works for you!
HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.