Introduction :
Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items.
In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change of state dropdown. We will fetch only those records from database which match the criteria rather than filtering in controller. I already create example here.
Step 1 : First Create database query to select country , state and city like below
ALTER PROCEDURE [dbo].[getCountry]
AS
BEGIN
select * from tbCountry
END
ALTER PROCEDURE [dbo].[getState]
@CountryId int
AS
BEGIN
select * from tbState where CountryId=@CountryId
END
ALTER PROCEDURE [dbo].[getCity]
@StateId int
AS
BEGIN
select * from tbCity where StateId=@StateId
END
Step 2 : Create Module.js file and codelike below
var myapp;
(function () {
myapp = angular.module(‘MyApps‘, []);
})();
Step 3 : Create Service.js File and add code like below
myapp.service(‘myService‘, function ($http) {
this.getCountryData = function () {
debugger;
return $http.get(‘/Registration/GetCountry‘);
}
// get states
this.getStateData = function (CountryId) {
debugger;
var Resp = $http({
method: “post“,
url: “/Registration/GetState“,
params: {
CountryId: CountryId
},
dataType: “json”
});
return Resp;
}
// get city
this.getCityData = function (StateId) {
debugger;
var Resp = $http({
method: “post”,
url: “/Registration/GetCity“,
params: {
id: StateId
},
dataType: “json”
});
return Resp;
}
Step 4 : Create Controller.js file and code below.
myapp.controller(‘RegistrationController‘, function ($scope, myService) {
GetCountry();
//To Get All Records
function GetCountry() {
var getData = myService.getCountryData();
getData.then(function (emp) {
$scope.Countries = emp.data;
}, function () {
alert(‘Error while getting records‘);
});
}
// get state
$scope.GetStates = function () {
$scope.State = “”;
var CountryId = $scope.Country;
var getData = myService.getStateData(CountryId);
getData.then(function (emp) {
$scope.States = emp.data;
}, function () {
alert(‘Error while getting records‘);
});
}
// get city
$scope.GetCity=function() {
var StateId = $scope.State;
debugger;
var getData = myService.getCityData(StateId);
debugger;
getData.then(function (emp) {
$scope.Cities = emp.data;
}, function () {
alert(‘Error while getting records‘);
});
}
});
Step 5 : Now Create controller with RegistrationController and add code to controller action method
public class RegistrationController : Controller
{
//
// GET: /Registration/
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[“constr“].ConnectionString);
public ActionResult Register()
{
return View();
}
public JsonResult GetCountry()
{
List<SelectListItem> lst = new List<SelectListItem>();
con.Open();
SqlCommand cmd = new SqlCommand(“getCountry“, con);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
lst.Add(new SelectListItem { Text = @dr[“CountryName“].ToString(), Value = @dr[“CountryId“].ToString() });
}
return Json(lst, JsonRequestBehavior.AllowGet);
}
public JsonResult GetState(string CountryId)
{
List<SelectListItem> lst = new List<SelectListItem>();
con.Open();
SqlCommand cmd = new SqlCommand(“getState“, con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue(“@CountryId”, SqlDbType.Int);
cmd.Parameters[“@CountryId”].Value = Convert.ToInt16(CountryId);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
lst.Add(new SelectListItem { Text = @dr[“StateName“].ToString(), Value = @dr[“StateId”].ToString() });
}
return Json(lst, JsonRequestBehavior.AllowGet);
}
public JsonResult GetCity(string id)
{
List<SelectListItem> lst = new List<SelectListItem>();
con.Open();
SqlCommand cmd = new SqlCommand(“getCity“, con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue(“@StateId”, SqlDbType.Int);
cmd.Parameters[“@StateId”].Value = Convert.ToInt16(id);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
lst.Add(new SelectListItem { Text = @dr[“CityName“].ToString(), Value = @dr[“CityId“].ToString() });
}
return Json(lst, JsonRequestBehavior.AllowGet);
}
}
Step 6 : Now create View register,cshtml
<script src=”~/Angularjs/Module.js“></script>
<script src=”~/Angularjs/Service.js“></script>
<script src=”~/Angularjs/Controller.js“></script>
<div >
<div ng-app=”MyApps” ng-controller=”RegistrationController“>
<table>
<tr>
<td ><b>Country</b></td>
<td><select name=”Country” ng-model=”Country” ng-change=”GetStates()“>
<option value=””>– Select Country–</option>
<option ng-repeat=”item in Countries” value=”{{item.Value}}”>
{{item.Text}}
</option>
</select>
</td>
</tr>
<tr>
<td ><b>State</b><State/td>
<td>
<select ng-model=”State” ng-change=”GetCity()”>
<option value=””>– Select State –</option>
<option ng-repeat=”item in States” value=”{{item.Value}}”>
{{item.Text}}
</option>
</select>
</td>
</tr><tr>
<td ><b>City</b></td>
<td>
<select name=”City” ng-model=”City” >
<option value=””>– Select City –</option>
<option ng-repeat=”item in Cities” value=”{{item.Value}}”>
{{item.Text}}
</option>
</select>
</td>
</tr></table>
</div></div>
Now run your web application and see output like below pictorial
SEE MORE
- Auto Refresh Partial View in ASP.NET MVC
- What is ASP.NET Core
- Difference between TempData keep() And Peek() in Asp.Net MVC
- Difference between viewbag,viewdata and tempdata in asp.net mvc
- ASP.NET MVC With AngularJS
- Retrieving Data Using Form Collection and Inserting Into ASP.Net MVC
- MVC CRUD Operations Using Entity Framework
- Search Functionality in ASP.NET MVC
- How to create a User Registration page using asp.net mvc
- Store Multiple Checkbox state from cookie using Jquery
- Cascading Dropdownlist using Ajax in Asp.Net Mvc with city state country
- Insert, Update, Delete In GridView Using ASP.Net C#
- Binding Dropdownlist With Database In Asp.Net MVC
- Search and Filter data in Gridview using Asp.net MVC
- Select Insert, Update And Delete With ASP.NET MVC
- Display Data in GridView Using Asp.net MVC
- Validation in ASP.NET MVC Razor view
- CRUD Operation Using 3-Tier Architecture In ASP.NET
- How to get Connection String from Web.Config in Asp.Net C#
- Login page using 3-Tier Architecture in ASP.Net
- Asp.Net Image Upload in 3-Tier Architecture and store in sql database