İ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 JQuery Ajax ile yapalım.
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ı alt kısımda bulunan yorumlar alanını kullanarak sorabilirsiniz.
Referanslar