1. Ana Sayfa
  2. Java
  3. JQuery Ajax ile İl ve İlçe Bazında DropdownList Nasıl Oluşturulur?

JQuery Ajax ile İl ve İlçe Bazında DropdownList Nasıl Oluşturulur?

İl ve ilçe seçimi hemen hemen her projede karşımıza çıkan bir durum. Tabi her il seçiminde ilçeleri listelemek için sayfayı postback ettirmek de son kullanıcı açısından hoş olmuyor. Bu durumda ise genelde başvurulan yöntemlerden birisi ajax update panel. Kullanışlı bir yöntem, ancak sayfada update panel kullanmak istemiyorsanız ve son kullanıcı için daha hızlı olmasını istiyorsanız bunu bir de Ajax ile yapalım.

drop-down1

Bunun için öncelikle illeri ve ilin ID’si ile o ile ait ilçeleri getiren 2 web servis metodumuz olduğunu varsayalım. Web servisimiz de WebService.asmx olsun. İlleri almak için GetIller fonksiyonunu, il ve ilçe dropdownlist’lerinin id’lerini parametre olarak alacak şekilde aşağıdaki gibi yazabiliriz:

function GetIller(ddlIlId, ddlIlceId) {

    $.ajax({

        type: “POST”,

        url: “WebService.asmx/GetIller”,

        data: “{}”,

        contentType: “application/json; charset=utf-8”,

        success: function (msg) {

            $(“#” + ddlIlId).get(0).options.length = 0;

            $(“#” + ddlIlId).get(0).options[0] = new Option(“(Seçiniz)”, “”);

            $.each(msg.d, function (index, item) {

                $(“#” + ddlIlId).get(0).options[$(“#” + ddlIlId).get(0).options.length] = new Option(item.Display, item.Value);

            });

            $(“#” + ddlIlId).bind(“change”, function () {

                GetIlceler(ddlIlceId, $(this).val());

            });

        },

        error: function () {

            alert(“İller yüklenirken hata oluştu!”);

        }

    });

}

Fonksiyondan da göreceğiniz gibi, JQuery Ajax yardımıyla, WebService.asmx dosyasındaki GetIller methodunu POST ile çağırdıktan sonra, gelen ilçe id ve ilçe adı alanlarını each methodu ile teker teker dropdownlist’e ekliyoruz. Daha sonra ise il dropdownlist’inin change event’ine de ilçeleri il ID’ye göre çekeceğimiz methodu ilişkilendiriyoruz. Hata oluşması halinde ise alert ile son kullanıcıyı bilgilendirelim.

Aynı şekilde ilçeleri çektiğimiz GetIlceler fonksiyonunu da aşağıdaki şekilde yazalım:

function GetIlceler(ddlIlceId, ilId) {

    if (ilId > 0) {

        $(“#” + ddlIlceId).get(0).options.length = 0;

        $(“#” + ddlIlceId).get(0).options[0] = new Option(“Yükleniyor”, “”);

        $.ajax({

            type: “POST”,

            url: “WebService.asmx/GetIlceler”,

            data: “{ilId:” + ilId + “}”,

            contentType: “application/json; charset=utf-8”,

            success: function (msg) {

                $(“#” + ddlIlceId).get(0).options.length = 0;

                $(“#” + ddlIlceId).get(0).options[0] = new Option(“(Seçiniz)”, “”);

                $.each(msg.d, function (index, item) {

                    $(“#” + ddlIlceId).get(0).options[$(“#” + ddlIlceId).get(0).options.length] = new Option(item.Display, item.Value);

                });

            },

            error: function () {

                $(“#” + ddlIlceId).get(0).options.length = 0;

                alert(“İlçeler yüklenirken hata oluştu!”);

            }

        });

    }

    else {

        $(“#” + ddlIlceId).get(0).options.length = 0;

    }

}

Bu fonksiyonda da bir öncekinde olduğu gibi ile ait ilçeleri web servisten alarak dropdownlist’in item’larına ekleyebiliyoruz. Bu yöntem ilk bakışta biraz uzun ve zahmetli görünse de, kullanım aşamasında oldukça hızlı çalıştığı için tercih edebilirsiniz. Karar sizin.

Bu konuyla ilgili sorularınızı https://forum.mshowto.org linkini kullanarak ulaşacağınız forum sayfamızda sorabilirsiniz.

Referanslar

www.mshowto.org

Yorum Yap

Yazar Hakkında

Mert Yeter, lisans eğitimini Yıldız Teknik Üniversitesi Gemi İnşaatı Mühendisliği bölümünde, yüksek lisans eğitimini ise Bahçeşehir Üniversitesi Bilgi Teknolojileri bölümünde tamamlamıştır. Yazılım dünyasına üniversitenin ilk yıllarında aldığı QBasic ile başlayan Mert, .NET ve SQL Server gibi Microsoft teknolojileri ile devam etmiş; yüksek lisans tezini ise Linux konusunda yapmıştır. Netaş ve Ziraat Teknoloji gibi sektörün önde gelen firmalarında C#, .NET, SQL Server, Cisco Contact Center ürünleri ve Linux üzerine çalışmış, bir çok firmaya da bu konularda danışmanlık vermiştir. Şu anda da Done'de Cloud Development Manager olarak Azure, .NET Core, SQL Server, Docker vb güncel teknolojiler üzerinde çalışmaktadır.

Yorum Yap