JQuery Ajax ile MVC Action’ını Çağırma
DropDownList’te bir item seçildiği zaman diğer DropDownList’te ilk DropDownList ile ilgili bilgileri yüklemeyi yapacağız. Asp.net webforms’ta bu oldukça basitti selectedIndexChanged olayı ile işi oldukça basit bir şekilde halledebiliyorduk fakat ajax updatePanel kullansak dahi o ajax pek bir ajax gibi değildi, zira her ajax isteği gerçekleştiğinde form_load da çalışıyor, yani sayfa bildiğin yeniden yükleniyordu. Neyse efendim asp.net mvc’de işler biraz daha olması gerektiği gibi oluyor ve bir ajax istemi gerçekleştiği zaman sadece istenilen yer etkileniyor ve oldukça hızlı çalışıyor.
Şimdi bir dropDownList’imiz veritabanından gelen şehir bilgileri ile doluyor diyelim ve ilgili DropDownList’in onchange event’ında ajax isteğinde bulunup ilçeler DropDownList’ini dolduracağız.
Haydi başlayalım. Öncelikle view’ımızdaki DropDownList’in onchange event’ında hangi JavaScript methodu çağrılacak onu belirleyelim.
@Html.DropDownListFor(model => model.SehirId, new SelectList(ViewBag.Sehirler, “Id”, “Ad”), “Şehir Seçiniz”, new { onchange = “drpSehirlerChnaged()”, id = “drpSehirler” })
<select data-val=”true” id=”drpIlceler” name=”IlceId”>
DropDownList’imizi yukarıdaki gibi ekleyebiliriz, model’ımızın SehirId’sine bağlı ve içindeki verileri ViewBag’den alıyor. Bizim için asıl önemli olan kısım ise onchange ve id kısmı. Çünkü verdiğimiz id ile o nesneye erişeceğiz ve onchange event’ında da ilgili method çalışacak.
Gelelim ajax methoduna:
function dpwnChnaged(KategoriId) {
var dropdownval = $(“#drpSehirler”).val();
$.ajax({
url: ‘/Home/GetIlceler,
data: {
SehirId: dropdownval,
},
dataType: ‘json’,
contentType: ‘application/json; charset=utf-8’,
success: function (data) {
var mySelect = $(‘#drpIlceler);
var JSONData = eval(data);
mySelect.empty();
$.each(JSONData, function (index, itemData) {
mySelect.append($(‘’).val(itemData.Id).html(itemData.Ad));
});
}
});
}
Yukarıdaki jquery ajax istemi ile Home controller’ındaki GetIlceler action’ını çağırıyor ve parametre olarak da SehirId’sini gönderiyor. Ve gelen JSON sonucundan aldığı verileri drpIlceler DropDownList’ine option olarak ekliyor.
Şimdi de gelelim mvc action’ımıza:
public JsonResult GetIlceler(int SehirId)
{
ArrayList IlceList = new ArrayList();
//Ilceler ilçeler ilçeler
JsonResult result = Json(IlceList);
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return result;
}
Evet bu kadar işte. Asp.Net WebForms’ta yaptığımız tekniğe göre oldukça hızlı. Ha Asp.Net’te de bu şekilde bir çağrım olmaz mı? olur tabii ama uptadapanel’in çakma ajax’ına kanıp ajax ile veri çektiğimizi sandığımız çok oluyor.
