In this article we will cover how to Populate a DropDownList depend on another DropDownList based on selected value in ASP.Net Core. Live Example
Prerequisites:
Understanding of .Net Core and Jquery
Let's Start:
The first step Let's create a fresh Asp.Net Core project.
Model
Create Class named "City_Model.cs" and replace with below given code.
public class Country
{
public int Country_Id { get; set; }
public string Country_Title { get; set; }
}
public class State
{
public int State_Id { get; set; }
public string State_Title { get; set; }
public int Country_Id { get; set; }
}
public class City
{
public int City_Id { get; set; }
public string City_Title { get; set; }
public int State_Id { get; set; }
public int Country_Id { get; set; }
public List<SelectListItem> List_Countries = new List<SelectListItem>();
}
CityController.cs
Create Controller named "CityController.cs" and replace it with below mentioned code.
using HpBlogs.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Linq;
namespace HpBlogs.Controllers
{
public class CityController : Controller
{
public IActionResult Index()
{
City model = new City();
//GET COUNTRY LIST FROM JSON OR DB AS PER YOUR REQUIREMENT
List<SelectListItem> selectListContries = new List<SelectListItem>()
{
new SelectListItem(){ Text="India",Value="1"},
new SelectListItem(){ Text="USA",Value="2"}
};
model.List_Countries = selectListContries;
return View(model);
}
public JsonResult GetStateList(int CountryID)
{
//GET STATE LIST FROM JSON OR DB AS PER YOUR REQUIREMENT
IEnumerable<State> states = new List<State>()
{
new State(){ State_Id=1,State_Title="Andhra Pradesh",Country_Id=1 },
new State(){ State_Id=2,State_Title="Himachal Pradesh",Country_Id=1 },
new State(){ State_Id=3,State_Title="Uttar Pradesh",Country_Id=1 },
new State(){ State_Id=4,State_Title="Alabama",Country_Id=2 },
new State(){ State_Id=5,State_Title="New York",Country_Id=2 }
};
List<SelectListItem> statelist = new List<SelectListItem>();
states.Where(w => w.Country_Id.Equals(CountryID)).ToList().ForEach(f =>
{
statelist.Add(new SelectListItem()
{
Text = f.State_Title,
Value = f.State_Id.ToString()
});
});
return Json(statelist);
}
public JsonResult GetCityList(int StateID)
{
//GET CITY LIST FROM JSON OR DB AS PER YOUR REQUIREMENT
IEnumerable<City> cities = new List<City>()
{
new City(){ City_Id=1,City_Title="Visakhapatnam",State_Id=1 },
new City(){ City_Id=2,City_Title="Chittoor",State_Id=1 },
new City(){ City_Id=3,City_Title="Shimla",State_Id=2 },
new City(){ City_Id=4,City_Title="Dharamsala",State_Id=2 },
new City(){ City_Id=5,City_Title="Lucknow",State_Id=3 },
new City(){ City_Id=6,City_Title="Kanpur",State_Id=3 },
new City(){ City_Id=7,City_Title="Addison",State_Id=4 },
new City(){ City_Id=8,City_Title="Allgood",State_Id=4 },
new City(){ City_Id=7,City_Title="Auburn",State_Id=5 }
};
List<SelectListItem> citylist = new List<SelectListItem>();
cities.Where(w => w.State_Id.Equals(StateID)).ToList().ForEach(f =>
{
citylist.Add(new SelectListItem()
{
Text = f.City_Title,
Value = f.City_Id.ToString()
});
});
return Json(citylist);
}
}
}
View
Create a Folder with Index.cshtml named "City" inside View and replace it with below mentioned code.
@model HpBlogs.Models.City
<div class="col-lg-12">
<div class="col-lg-4">
<div class="input-box">
<label class="label-text">Country</label>
<div class="form-group">
<select id="txtCountryID" asp-for="Country_Id" asp-items="Model.List_Countries" class="form-control countryDropdown">
<option value="">Select Country</option>
</select>
<span asp-validation-for="Country_Id" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="input-box">
<label class="label-text">State</label>
<div class="form-group">
<select id="txtStateID" asp-for="State_Id" class="form-control stateDropdown">
<option value="">Select State</option>
</select>
<span asp-validation-for="State_Id" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="input-box">
<label class="label-text">City</label>
<div class="form-group">
<select id="txtCityID" asp-for="City_Id" class="form-control cityDropdown">
<option value="">Select City</option>
</select>
<span asp-validation-for="City_Id" class="text-danger"></span>
</div>
</div>
</div>
</div>
<script>
//Bind State dropdownlist
$(".countryDropdown").change(function () {
var countryId = $(this).val();
$.getJSON("/city/GetStateList", { CountryId: countryId }, function (data) {
var item = "";
$(".stateDropdown").find('option').not(':first').remove();
$(".cityDropdown").find('option').not(':first').remove();
item += '<option value="">Select State</option>'
$.each(data, function (i, city) {
item += '<option value="' + city.value + '">' + city.text + '</option>'
});
$(".stateDropdown").html(item);
});
});
//Bind City dropdownlist
$(".stateDropdown").change(function () {
var stateId = $(this).val();
$.getJSON("/city/GetCityList", { StateId: stateId }, function (data) {
var item = "";
$(".cityDropdown").find('option').not(':first').remove();
item += '<option value="">Select City</option>'
$.each(data, function (i, city) {
item += '<option value="' + city.value + '">' + city.text + '</option>'
});
$(".cityDropdown").html(item);
});
});
</script>
Run the project. Output page would look like: Live Example
Post Comments(0)