CasCading DropDown List

Question

using cascading dropdown list i stored Country,State,City ID's in database. now i want display text of stored ID's in asp.net MVC using Ajax

Jaimin Shethiya · Answer

Hello Soheb, when your page is load at that time you need to fetch this dropdown data. and then after you fetch the listing page data at that time automatically shows, that text as well. Thanks

Jignesh Kumar · Answer

Please refer to your previous question, I have an answer https://www.c-sharpcorner.com/Forums/cascading-dropdown-list35

Jayraj Chhaya · Answer

Hi, To achieve this functionality, you can use Ajax to fetch the text values based on the selected IDs dynamically. Here's a high-level overview of the steps involved: Create models for Country, State, and City with properties like ID and Name. Implement cascading dropdown lists in your View using jQuery and Ajax. Write controller actions to handle Ajax requests and return JSON data. Use jQuery to make Ajax calls to these controller actions and update dropdown lists dynamically. 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; } // Foreign key to Country } public class City { public int CityId { get; set; } public string CityName { get; set; } public int StateId { get; set; } // Foreign key to State } Controller code public class HomeController : Controller { private readonly YourDbContext _dbContext; // Replace YourDbContext with your actual DbContext public HomeController(YourDbContext dbContext) { _dbContext = dbContext; } [HttpGet] 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); } [HttpGet] 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); } } Ajax Code $(document).ready(function () { // Handle change event for Country dropdown $('#CountryId').change(function () { var countryId = $(this).val(); $.ajax({ url: '@Url.Action("GetStatesByCountry", "Home")', type: 'GET', dataType: 'json', data: { countryId: countryId }, success: function (states) { // Populate State dropdown with retrieved data var $stateDropdown = $('#StateId'); $stateDropdown.empty(); $.each(states, function (index, state) { $stateDropdown.append($(' ').val(state.StateId).text(state.StateName)); }); } }); }); // Handle change event for State dropdown $('#StateId').change(function () { var stateId = $(this).val(); $.ajax({ url: '@Url.Action("GetCitiesByState", "Home")', type: 'GET', dataType: 'json', data: { stateId: stateId }, success: function (cities) { // Populate City dropdown with retrieved data var $cityDropdown = $('#CityId'); $cityDropdown.empty(); $.each(cities, function (index, city) { $cityDropdown.append($(' ').val(city.CityId).text(city.CityName)); }); } }); }); }); @Html.DropDownListFor(model => model.CountryId, ViewBag.Countries as SelectList, "Select Country", new { id = "CountryId" }) @Html.DropDownListFor(model => model.StateId, Enumerable.Empty (), "Select State", new { id = "StateId" }) @Html.DropDownListFor(model => model.CityId, Enumerable.Empty (), "Select City", new { id = "CityId" }) Default Country when page load public ActionResult Index() { // Retrieve list of countries from database var countries = _dbContext.Countries.ToList(); ViewBag.Countries = new SelectList(countries, "CountryId", "CountryName"); return View(); }

CasCading DropDown List

Answers (3)