CasCading DropDown List

Question

i am new here can someone help me. i have create a small registration form using asp.net MVC and i want to add a cascading dropdownlist for store address of student(Country,state,City).i need to store all values in SQL Database. anyone here please solve my problem.....Thanks in advance

Jaimin Shethiya · Answer

Hello Soheb, In your previous question, we had already given the solution. please refer below link of your question and also you have select the answer as well of your question. https://www.c-sharpcorner.com/forums/cascading-dropdown-list33 Thanks

Jignesh Kumar · Answer

Hello Soheb, Model Creation for Country, State and City as below 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; } } public class City { public int CityId { get; set; } public string CityName { get; set; } public int StateId { get; set; } } MVC: Presentation layer @Html.DropDownListFor(model => model.CountryId, Model.CountryList, "Select Country", new { id = "countryDropdown" }) @Html.DropDownListFor(model => model.StateId, Enumerable.Empty (), "Select State", new { id = "stateDropdown" }) @Html.DropDownListFor(model => model.CityId, Enumerable.Empty (), "Select City", new { id = "cityDropdown" }) Jquery implementaion : $(document).ready(function () { $('#countryDropdown').change(function () { var countryId = $(this).val(); $.ajax({ url: '@Url.Action("GetStatesByCountry", "YourController")', type: 'GET', data: { countryId: countryId }, success: function (data) { $('#stateDropdown').empty(); $.each(data, function (index, item) { $('#stateDropdown').append($(' ', { value: item.StateId, text: item.StateName })); }); $('#cityDropdown').empty(); }, error: function (xhr, status, error) { console.log('Error:', error); } }); }); $('#stateDropdown').change(function () { var stateId = $(this).val(); $.ajax({ url: '@Url.Action("GetCitiesByState", "YourController")', type: 'GET', data: { stateId: stateId }, success: function (data) { $('#cityDropdown').empty(); $.each(data, function (index, item) { $('#cityDropdown').append($(' ', { value: item.CityId, text: item.CityName })); }); }, error: function (xhr, status, error) { console.log('Error:', error); } }); }); }); Access Data from Database using EF, public JsonResult GetStatesByCountry(int countryId) { var states = dbContext.States.Where(s => s.CountryId == countryId) .Select(s => new { s.StateId, s.StateName }) .ToList(); return Json(states, JsonRequestBehavior.AllowGet); } public JsonResult GetCitiesByState(int stateId) { var cities = dbContext.Cities.Where(c => c.StateId == stateId) .Select(c => new { c.CityId, c.CityName }) .ToList(); return Json(cities, JsonRequestBehavior.AllowGet); } You may refer above article for more reference as Jaimin and Naimish shared links

Naimish Makwana · Answer

Please refere below article. https://www.c-sharpcorner.com/UploadFile/sourabh_mishra1/cascading-dropdownlist-in-Asp-Net-mvc/ https://www.c-sharpcorner.com/article/cascading-dropdown-list-of-country-state-and-city-using-mvc-web-api-and-jquery/ Thanks

CasCading DropDown List

Answers (3)