Description:
In this example
we explain that how to implement cascading DropDownList in MVC using
AngularJS.or how to bind DropDownList using AngularJS in Asp.Net MVC.or how to
populate DropDownList in MVC using AngularJS.how to populate or bind DropDownList
using AngularJS in MVC.or how to bind Dependent DropDownList using AngularJS in
MVC.
Here we demonstrate
that how to bind Country, State, City dependent DropDownList using AngularJS in
Asp.Net MVC.
public class EmployeeController
: Controller
{
public ActionResult Index()
{
return
View();
}
[HttpPost]
public JsonResult AjaxMethod(string
type, int value)
{
List<SelectListItem> items = new List<SelectListItem>();
CascadingEntities
entities = new CascadingEntities();
switch
(type)
{
default:
foreach
(var country in
entities.Countries)
{
items.Add(new SelectListItem
{ Text = country.CountryName, Value = country.CountryId.ToString() });
}
break;
case
"CountryId":
var
states = (from state in
entities.States
where state.CountryId == value
select state).ToList();
foreach
(var state in
states)
{
items.Add(new SelectListItem
{ Text = state.StateName, Value = state.StateId.ToString() });
}
break;
case
"StateId":
var
cities = (from city in
entities.Cities
where city.StateId == value
select city).ToList();
foreach
(var city in
cities)
{
items.Add(new SelectListItem
{ Text = city.CityName, Value = city.CityId.ToString() });
}
break;
}
return
Json(items);
}
}
View:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Implement
Cascading (Dependent) DropDownList using AngularJS in ASP.Net MVC</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app
= angular.module('MyApp', [])
app.controller('MyController',
function ($scope, $http, $window) {
$scope.LoadDropDown = function (type, value) {
switch
(type) {
default:
$scope.SelectedCountryId = 0;
$scope.CountryDefaultLabel = "Loading.....";
$scope.Countries = null;
break;
case
"CountryId":
$scope.SelectedStateId
= 0;
$scope.StateDefaultLabel = "Loading.....";
$scope.CityDefaultLabel
= "";
$scope.States = null;
$scope.Cities = null;
break;
case
"StateId":
$scope.SelectedCityId =
0;
$scope.CityDefaultLabel
= "Loading.....";
$scope.Cities = null;
break;
}
$http({
method: "POST",
url: "/Employee/AjaxMethod",
dataType: 'json',
data: '{type: "' + type + '",
value: ' + value + '}',
headers: { "Content-Type":
"application/json" }
}).success(function (data, status) {
switch
(type) {
default:
$scope.CountryDefaultLabel = "Select
Country";
$scope.Countries =
data;
break;
case "CountryId":
$scope.StateDefaultLabel = "";
if (data.length > 0) {
$scope.StateDefaultLabel = "Select State";
$scope.States =
data;
}
break;
case "StateId":
$scope.CityDefaultLabel
= "";
if (data.length > 0) {
$scope.Cities =
data;
$scope.CityDefaultLabel = "Select
City";
}
break;
}
}).error(function (data, status) {
$window.alert(data.Message);
});
};
$scope.LoadDropDown('', 0);
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Country:</td>
<td>
<select name="Country" ng-model="SelectedCountryId" ng-change="LoadDropDown('CountryId',SelectedCountryId)">
<option value="0">{{CountryDefaultLabel}}</option>
<option ng-repeat="item in
Countries" value="{{item.Value}}">
{{item.Text}}
</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="State" ng-model="SelectedStateId" ng-change="LoadDropDown('StateId',SelectedStateId)">
<option value="0">{{StateDefaultLabel}}</option>
<option ng-repeat="item in
States" value="{{item.Value}}">
{{item.Text}}
</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>City:</td>
<td>
<select name="City">
<option value="0">{{CityDefaultLabel}}</option>
<option ng-repeat="item in
Cities" value="{{item.Value}}">
{{item.Text}}
</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
0 comments:
Post a Comment