Mvc Cascading DropDownList

Merhaba arkadaşlar bu yazımda Mvc Cascading DropDownList işleminden bahsedeceğim. Örneğin sayfamızda il ilçe seçimi yaptıracağız. Bunları da Dropdownlist ile seçtirmek istiyoruz. Kullanıcı bir il seçimi yapacak ve bu seçilen ile ait ilçeler listesi doldurulacak. Kullanıcı İstanbul ilini seçti ve biz de bu seçime göre alttaki listede İstanbul iline ait ilçelerin dropdownlist üzerinde gösterimini sağlayacağız. Bu işleme Cascading Dropdownlist deniyor. Dropdownlist de yapılan bir seçime göre diğer bir dropdownlist doldurma işlemi de diyebiliriz.

Bir önceki yazımda dropdownlist doldurma işleminden bahsetmiştim. İlk dropdownlistimizi aynı şekilde gösterme işlemi yapıyoruz. Aşağıda örnek kodumuzu paylaşıyorum.

View:

@model List<CascadingDropdownlistSample.Models.City>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>

<h3>İl Seçimi</h3>
<select id="city" name="city">
<option value="">İl Seçimi:</option>
@foreach (var city in Model)
{
<option value="@city.CityId">@city.CityName</option>
}
</select>

<br />
<h3>İlçe Seçimi</h3>
<select id="district" name="district"> </select>

<script type="text/javascript">
$("#city").change(function () {
$("#district").empty();

var city = $("#city").val();

$.ajax({
url: '@Url.Action("GetDistricts","Home")',
type: "POST",
dataType: "json",
data: { cityId: city },
success: function (data) {
$.each(data, function () {
$('#district').append('<option value=' + this.DistrictId + '>' + this.DistrictName + '</option>');
});
}
});
});
</script>

Controller:

public class HomeController : Controller
{
public ActionResult Index()
{
var model = DataManager.GetCities();

return View(model);
}

[HttpPost]
public ActionResult GetDistricts(int cityId)
{
var model = DataManager.GetDistrict(cityId);

return Json(model);
}
}

Contoller’da kullandığımız DataManager Classı sadece örnek olsun diye bu şekilde oluşturdum.

public class DataManager
{
public static List<City> GetCities()
{
List<City> cities = new List<City>() {
new City { CityId = 34, CityName="İstanbul" },
new City { CityId = 6, CityName="Ankara" },
new City { CityId = 35, CityName="İzmir" },

};

return cities;
}

public static List<District> GetDistrict(int cityId)
{
List<District> districts = new List<District>() {
new District { DistrictId=1 , CityId = 34, DistrictName="Fatih" },
new District { DistrictId=4 , CityId = 34, DistrictName="Avcılar" },
new District { DistrictId=2, CityId = 6, DistrictName="Etimesgut" },
new District { DistrictId=3 ,CityId = 35, DistrictName="Konak" },

};

return districts.Where(x=> x.CityId == cityId).ToList();
}
}

Model Classlarımız:

public class City
{
public int CityId { get; set; }
public string CityName { get; set; }
}

public class District
{
public int DistrictId { get; set; }
public int CityId { get; set; }
public string DistrictName { get; set; }
}

Burada örnek bir listeden kayıtlarımızı gösterme işlemi gerçekleştirdik. Siz ilgili yerden gelen bir liste ile ilgili kodlarınızı düzenleyerek bu kısımlara ekleme işlemi yapabilirsiniz.

Örnek projeyi de paylaşıyorum. İndirmek isterseniz eğer aşağıdaki linkten indirebilirsiniz.

CascadingDropdownlistSample