Merhaba arkadaşlar, yeni bir blog yazısıyla karşınızdayım. Umarım, Cascading Dropdown konusunu sizin için sade ve anlaşılır bir şekilde anlatabilirim.
Öncelikle, Cascading Dropdown nedir? Örneğin: İl ve ilçeleri seçerken kullanabileceğimiz bir yöntem olabilir. Bazı sitelerde, seçilen şehre göre ilçeler otomatik olarak belirir. İşte, bu özelliği kullanabilmek için Cascading Dropdown yöntemini öğrenmemiz gerekir.
Veya benim de aşağıda kurgulamış olduğum gibi firma ve şubeleri gibi durumlarda da kullanabilirsiniz. Bu yöntemi kendi kurgunuza göre değiştirebilir ve farklı alanlara entegre edebilirsiniz.
Bu yazıda, sıfırdan bir proje açmayacağım. Kendi projelerinizde bu özelliği kolaylıkla kullanabilirsiniz. Eğer projelerinize dahil edemezseniz, sıfırdan bir proje oluşturarak adım adım anlatacağım.
Şimdi, kodlarımızı yazmaya başlamadan önce kurguyu anlatmak istiyorum: Projemde firmalar ve bu firmaların şubeleri var. İlk dropdown menüsünden firma seçildiğinde, ilgili firma şubeleri ikinci dropdown’a listelenir.
Veritabanımız şu şekildedir:
NOT: Firma tablosunda ki FirmaID ile Sube tablosunda ki FirmaID birbiriyle ilişkilidir.
Kodlarımızı yazmaya başlayalım ilk olarak
[HttpGet]
public JsonResult GetSubeList(int FirmaID)
{
Context _context = new Context();
List<Sube> subeList = new List<Sube>();
subeList = _context.Subes.Where(x => x.FirmaID == FirmaID).ToList();
return Json(new SelectList(subeList, "SubeID", "SubeAdi"));
}Kodumuzu oluşturduğumuz controllera ekleyelim
Daha sonra view kısmına göndereceğimiz liste için ilgili IActionResult’a aşağıdaki kodları yazalım:
[HttpGet]
public IActionResult PersonelEkle()
{
Context c = new Context();
ViewBag.FirmaList = new SelectList(c.Firmas.ToList(), "FirmaID", "FirmaAdi");
return View();
}bu kodumuzda ben Personel eklerken hangi firmada çalışıyor ve o firmaya göre hangi şubede çalışıyor şeklinde kurguladığımdan personel eklerken firma ve şube seçimi yaptırıyorum o yüzden personel ekleme kısmında böyle bir kod yazdım personel eklemenin HTTPGET kısmında yazıyorum bu kodumu HTTPOST kısmında değil buna dikkat edelim
Daha sonra, PersonelEkle IActionResult’un view’ine gittim ve aşağıdaki kodu ekledim:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function () {
$("#FirmaID").change(function () {
$.ajax({
type: "GET",
url: "/Personel/GetSubeList",
data: { FirmaID: $("#FirmaID").val() },
success: function (data) {
$("#SubeID").empty();
$.each(data, function (index, value) {
$("#SubeID").append('<option value="' + value.value + '">' + value.text + '</option>');
});
}
});
});
});
</script>kodumuzu ekliyoruz bu kodumuz şu şekilde çalışıyor biz dropdowndan Firma seçtiğimizde o FirmaID ile eşleşen şubeleri anlık olarak diğer dropdownda gösteriyor.
Dropdown’u view kısmında şu şekilde tanımladım:
<select asp-for="FirmaID" class="form-control" asp-items="@ViewBag.FirmaList">
<option value="">--- Firma Seçiniz ---</option>
</select>
<label>Çalıştığı Şube :</label>
<select asp-for="SubeID" class="form-control">
<option value="">--- Şube Seçiniz ---</option>
</select>Bu kodu da anlatmam gerekiyorsa, şöyle açıklayabilirim: ViewBag.FirmaList, firmaların birinci dropdown listesinde listelenmesini sağlamak için kullanılır. Kullanıcılar, firmanın adını seçerler ve bu seçim üzerine yukarıda bahsettiğimiz AJAX işlemi çalışır. Bu işlem sayesinde, seçilen firmanın şubeleri ikinci dropdown listesinde anlık olarak gösterilir.
Bu uygulamayı, kendi geliştirdiğiniz projelere entegre etmeniz için anlattım. Sıfırdan proje açıp aşama aşama resimlerle göstermedim, bu şekilde anlatmamı isterseniz ayrı bir blog yazısı da yazabilirim. Eğer hata aldığınız yerler olursa, yorum yazarak, mail atarak veya sosyal medya hesaplarımdan iletişime geçerek bana ulaşabilirsiniz. Bir sonraki blog yazımda görüşmek üzere, sağlıklı günler dilerim
