Birbirine Bağlı Dropdown Kullanımı MVC

Örnek uygulamada ile göre ilçe seçtirilerek kullanıcının ikametgarhId bilgisine ilçeıd yazdırılması gösterilmiştir. Birbirine bağlı dropdown kullanımına örnektir.


View

İlçe dropdown'unda " @Id = "ikametgahId"" kısmına dikkat edilmelidir. Buraya verceğimiz id'yi sayfanın altında javascritte kullanacağız.
Şehir drop'unda ise controller tarafında tanımladığımız ViewBag.SehirList'i çağırıyoruz.

  <div class="form-group col-md-6">
                    <div class="editor-label">
                        <br />
                        @Html.Label("Şehir")<br />
                    </div>
                    <div>
                   
                        @Html.DropDownList("Sehir", (IEnumerable<SelectListItem>)ViewBag.SehirList, "-- Şehir Seçiniz  --", new { style = "width:250px" })
                    </div>
                    <div class="editor-label">
                        <br />
                        @Html.Label("İlçe")<br />
                    </div>
                    <div>

                        @Html.DropDownListFor(x => x.ikametgahId, new SelectList(string.Empty, "Value", "Text"), "-- İlçe Seçiniz --",
               new { style = "width:250px", @Id = "ikametgahId" })
                    </div>
                </div>

View'de kullanılacak olan script

<script type="text/javascript">
    $(document).ready(function () {
        //Şehir seçilince
        $("#Sehir").change(function () {
            $("#ikametgahId").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("Ilce")', // İlçe metoduna git
                dataType: 'json',
                data: { id: $("#Sehir").val() },
                // Sehir id'ye göre veri getir.

                success: function (states) {
                    $.each(states, function (i, state) {
                        $("#ikametgahId").append('<option value="' + state.Value + '">' +
                             state.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert('Veri bulunamadı.' + ex);
                }
            });
            return false;
        })
    });
</script>

Controller

Controllerde dikkat edilmesi gereken noktalar,

1-Dış dropdown olan il için tanımlı actionda doldurma verisinin ayarlanması (ViewBag.SehirList).
2-İç dropdown olan ilçe için ilçe ve ilçegetir metotlarının tanımlanması.
.

        public JsonResult Ilce(string id)
        {
            List<SelectListItem> ilceler = new List<SelectListItem>();
            var ilceList = this.IlceGetir(Convert.ToInt32(id));
            var ilceData = ilceList.Select(m => new SelectListItem()
            {
                Text = m.IlceName,
                Value = m.Id.ToString(),
            });
            return Json(ilceData, JsonRequestBehavior.AllowGet);
        }

        public IList<Ilce> IlceGetir(int id)
        {
            return db.Ilces.Where(m => m.SehirId == id).ToList();
        }


        public ActionResult ProfilDuzenle(int id)
        {


            ViewBag.SehirList = new SelectList(db.Sehirs.Select(l => new
            {
                l.Id,
                l.SehirName

            }), "Id", "SehirName");

            Uye u = db.Uyes.Where(x => x.UyeID == id).SingleOrDefault();
            return View(u);
        }