Ajax Calling for more than 3 dropdowns (MVC )

Question

how to populate a 3rd dropdown list in MVC using AJAX call and on the basis of the selected value's of second drop down as well ? Example Country--State--City--Town--Village

Sachin Singh · Answer

select country select state select city select Town step 2. // all binding functions function BindCountry() { $.Post(/Home/GetAllCountriesfunction(data) { $.each(datafunction(xy){ $(#ddlCountry).append($( {value:x.Idtext:x.Name})); }); }); } function BindState(countryId) { $.Post(/Home/GetStateByCountry?countryId=+countryIdfunction(data) { $.each(datafunction(xy){ $(#ddlState).append($( {value:x.Idtext:x.Name})); }); }); } function BindCity(stateId) { $.Post(/Home/GetCityByState?stateId=+stateIdfunction(data) { $.each(datafunction(xy){ $(#ddlCity).append($( {value:x.Idtext:x.Name})); }); }); } function BindTown(cityId) { $.Post(/Home/GetTownByCity?cityId=+cityIdfunction(data) { $.each(datafunction(xy){ $(#ddlTown).append($( {value:x.Idtext:x.Name})); }); }); } //ready function and Change event functions of respective ddl $(function(){ BindCountry(); // populate country at page load }); $(#ddlCountry).change(function(){ var countryId= $(this).val(); $(#ddlState).empty(); $(#ddlCity).empty(); $(#ddlTown).empty(); BindState(countryId); //populate state when country changes and empty child ddls }); $(#ddlState).change(function(){ var stateId= $(this).val(); $(#ddlCity).empty(); $(#ddlTown).empty(); BindCity(stateId); //populate city when state changes and empty child ddl ; }); $(#ddlCity).change(function(){ var cityId= $(this).val(); $(#ddlTown).empty(); BindTown(cityId); //populate Town when city changes }); MVC methods public ActionResult GetAllCountries() { // return list of countries var list= _context.Countries.ToList(); return Json(listJsonRequestBehavior.AllowGet); } public ActionResult GetStateByCountry(int countryId) { // return list of countries var list= _context.States.Where(x=>x.CountryId==countryId).ToList(); return Json(listJsonRequestBehavior.AllowGet); } public ActionResult GetCityByState(int stateId) { // return list of countries var list= _context.Cities.Where(x=>x.StateId==stateId).ToList(); return Json(listJsonRequestBehavior.AllowGet); } public ActionResult GetTownByCity(int cityId) { // return list of countries var list= _context.Towns.where(x=>x.CityId==cityId).ToList(); return Json(listJsonRequestBehavior.AllowGet); }

Jignesh Kumar · Answer

Hi Please find below link which will help you https://www.c-sharpcorner.com/Forums/ajax-calling-for-more-than-3-dropdowns-mvc https://www.aspsnippets.com/Articles/AJAX-Cascading-DropDown-Example-in-ASPNet.aspx

Vishal Joshi · Answer

Hello R D The functionality you are looking for is known as cascading dropdown. You can check below article for the same: https://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/

Vishal Yelve · Answer

https://www.aspsnippets.com/Articles/Cascading-Dependent-DropDownList-in-ASPNet-MVC.aspx https://learn.microsoft.com/en-us/answers/questions/216632/cascading-dependent-dropdownlist-using-aspnet-mvc.html