Bu makalemizde tüm programlama dillerinde en sık olarak kullanılan iç içe(cascading) dropdownlist’leri oluşturmayı göreceğiz.

İçerik göster

MVC ile İç İçe(Cascading) Dropdownlist’ler oluşturma

Bu makalemizde örneğimizin daha uzun olmaması adına bir veritabanı yerine sanal olarak oluşturduğumuz List elemanlarından faydalanarak ülke ve şehirleri listeleyeceğiz öncelikle sayfa ilk yüklendiğinde Ülkeler yüklenecek ardından Ülkeler dropdownlist’inden bir seçim yapıldığında change olayı devreye girecek ve şehirler listelenecektir. şimdi örnek kodlarımıza bakalım gerekli yerlerde yorum satırı ile açıklamalar yapılacaktır.

Ulke.cs

public class Ulke
{
    public int Id { get; set; }
    public string Ad { get; set; }
    public virtual ICollection<Sehir> Sehir { get; set; }
}

public class Ulke

{

public int Id { get; set; }

public string Ad { get; set; }

public virtual ICollection<Sehir> Sehir { get; set; }

}

Sehir.cs

public class Sehir
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int UlkeId { get; set; }
    public Ulke Ulke { get; set; }
}

public class Sehir

{

public int Id { get; set; }

public string Name { get; set; }

public int UlkeId { get; set; }

public Ulke Ulke { get; set; }

}

KonumViewModel.cs

public class KonumViewModel
{
    public int Id { get; set; }
    [Display(Name = "Ülkeler")]
    public int UlkdeId { get; set; }
    [Display(Name = "Şehirler")]
    public int SehirId { get; set; }
}

public class KonumViewModel

{

public int Id { get; set; }

[Display(Name = "Ülkeler")]

public int UlkdeId { get; set; }

[Display(Name = "Şehirler")]

public int SehirId { get; set; }

}

KonumController.cs

public class KonumController : Controller
{
    public ActionResult Index()
    {
        var ulkeler = new List<Ulke>
        {
            new Ulke
            {
                Ad = "Türkiye",
                Id = 1
            },
            new Ulke
            {
                Ad = "Azerbeycan",
                Id = 2
            }
        };
        ViewBag.Ulkeler = ulkeler;
        return View();
    }

    public JsonResult Sehirler(int ulkeId)
    {
        var sehirler = new List<Sehir>();
        if (ulkeId == 1)
        {
            sehirler.AddRange(new Collection<Sehir>
            {
                new Sehir {Id = 1, Name = "İstanbul"},
                new Sehir {Id = 2, Name = "Kocaeli"}
            });
        }
        else if (ulkeId == 2)
        {
            sehirler.AddRange(new Collection<Sehir>
            {
                new Sehir {Id = 1, Name = "Şeki"},
                new Sehir {Id = 2, Name = "Bakü"}
            });
        }
        return Json(sehirler);
    }
}

public class KonumController : Controller

{

public ActionResult Index()

{

var ulkeler = new List<Ulke>

{

new Ulke

{

Ad = "Türkiye",

Id = 1

new Ulke

{

Ad = "Azerbeycan",

Id = 2

}

};

ViewBag.Ulkeler = ulkeler;

return View();

}

public JsonResult Sehirler(int ulkeId)

{

var sehirler = new List<Sehir>();

if (ulkeId == 1)

{

sehirler.AddRange(new Collection<Sehir>

{

new Sehir {Id = 1, Name = "İstanbul"},

new Sehir {Id = 2, Name = "Kocaeli"}

});

}

else if (ulkeId == 2)

{

sehirler.AddRange(new Collection<Sehir>

{

new Sehir {Id = 1, Name = "Şeki"},

new Sehir {Id = 2, Name = "Bakü"}

});

}

return Json(sehirler);

}

Index.cshtml

@model MvcApplication1.Models.KonumViewModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></ script>
    <script>
        $(function () {
            //Ülke seçimi değiştiğinde bu event tetiklenir
            $("#UlkdeId").on("change", function () {
                var ulkeid = $(this).val();

                // secilen ülkenin id sini kullanarak Konum controller
                // sınıfı içerisindeki Sehirler metoduna çağrıda bulunuyoruz.
                // bu metod dan dönen listeyi kullanarak .each fonksiyonu ile
                // sehirleri dolduruyoruz...
                if (ulkeid != null && ulkeid != '') {
                    var options = new Array();
                    options.type = "POST";
                    options.url = '@Url.Action("Sehirler","Konum")';
                    options.data = { ulkeId: ulkeid };
                    options.success = function (res) {
                        $("#SehirId > option").remove();
                        $.each(res, function (index, sehir) {
                            $("#SehirId").append($('<option/>', { value: sehir.Id, text: sehir.Name }));
                        });
                        $("#SehirId").removeAttr("disabled");
                    };

                    options.error = function (res) {
                        // bu kısımda eğer ajax işlemi başarısız ise
                        // hata mesajı verebiliriz.
                        alert("Hata: " + res.responseText);
                    };

                    options.beforeSend = function () {
                        // bu kısımda form postalanmadan önce yapılacak
                        // işler belirlenebilir. mesela postalama başladığı
                        // anda loading resmi görüntüleyebiliriz.
                    };

                    options.complete = function () {
                        // bu kısımda form postalandıktan sonra yapılacak
                        // işler belirlenebilir. mesela postalama bittiği
                        // anda loading resmi gizleyebiliriz.
                    };

                    $.ajax(options);
                }
            });
        });
    </ script>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm())
    {
        <div class="editor-label">
            @Html.LabelFor(model => model.UlkdeId)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.UlkdeId, new SelectList(ViewBag.Ulkeler, "Id", "Ad"), "--- Ülke Seçiniz ---")
            @Html.ValidationMessageFor(model => model.UlkdeId)
        </div>
         <div class="editor-label">
             @Html.DisplayNameFor(model => model.SehirId)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.SehirId, Enumerable.Empty<SelectListItem>(), new { @disabled = "disabled" })
            @Html.ValidationMessageFor(model => model.SehirId)
        </div>
    }
</body>
</html>

@model MvcApplication1.Models.KonumViewModel

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

$(function () {

//Ülke seçimi değiştiğinde bu event tetiklenir

$("#UlkdeId").on("change", function () {

var ulkeid = $(this).val();

// secilen ülkenin id sini kullanarak Konum controller

// sınıfı içerisindeki Sehirler metoduna çağrıda bulunuyoruz.

// bu metod dan dönen listeyi kullanarak .each fonksiyonu ile

// sehirleri dolduruyoruz...

if (ulkeid != null && ulkeid != '') {

var options = new Array();

options.type = "POST";

options.url = '@Url.Action("Sehirler","Konum")';

options.data = { ulkeId: ulkeid };

options.success = function (res) {

$("#SehirId > option").remove();

$.each(res, function (index, sehir) {

$("#SehirId").append($('<option/>', { value: sehir.Id, text: sehir.Name }));

});

$("#SehirId").removeAttr("disabled");

};

options.error = function (res) {

// bu kısımda eğer ajax işlemi başarısız ise

// hata mesajı verebiliriz.

alert("Hata: " + res.responseText);

};

options.beforeSend = function () {

// bu kısımda form postalanmadan önce yapılacak

// işler belirlenebilir. mesela postalama başladığı

// anda loading resmi görüntüleyebiliriz.

};

options.complete = function () {

// bu kısımda form postalandıktan sonra yapılacak

// işler belirlenebilir. mesela postalama bittiği

// anda loading resmi gizleyebiliriz.

};

$.ajax(options);

}

});

</ script>

<title>Index</title>

</head>

<body>

@using (Html.BeginForm())

{

@Html.LabelFor(model => model.UlkdeId)

</div>

@Html.DropDownListFor(model => model.UlkdeId, new SelectList(ViewBag.Ulkeler, "Id", "Ad"), "--- Ülke Seçiniz ---")

@Html.ValidationMessageFor(model => model.UlkdeId)

</div>

@Html.DisplayNameFor(model => model.SehirId)

</div>

@Html.DropDownListFor(model => model.SehirId, Enumerable.Empty<SelectListItem>(), new { @disabled = "disabled" })

@Html.ValidationMessageFor(model => model.SehirId)

</div>

}

</body>

</html>

Sonuç

3.5/5 - (4 votes)

Kategoriler

Bloga e-posta ile abone ol

MVC İle İç İçe(Cascading) Dropdownlist’ler Oluşturma

MVC ile İç İçe(Cascading) Dropdownlist’ler oluşturma

Ulke.cs

Sehir.cs

KonumViewModel.cs

KonumController.cs

Index.cshtml

Sonuç

1 Response

Bir yanıt yazın Yanıtı iptal et

MVC ile İç İçe(Cascading) Dropdownlist’ler oluşturma

Ulke.cs

Sehir.cs

KonumViewModel.cs

KonumController.cs

Index.cshtml

Sonuç

1 Response

Bir yanıt yazın Yanıtı iptal et

Murat Öner sitesinden daha fazla şey keşfedin