ASP.NET MVC ve AJAX

Herkese merhabalar. Bu hafta ASP.NET MVC'de AJAX teknolojisinin nasıl kullanılacağından bahsedeceğim.

Bu yazımda AJAX ile ilgili işlemler için JQuery kütüphanesinin AJAX fonksiyonundan yararlanacağız. Bunun için JQuery kütüphanesinin sitesinden JQuery'nin script dosyasının indirilip, kullanacağımız view'ın head etiketleri arasına eklenmesi gerekiyor:

    <script src="~/js/jquery-1.10.2.min.js"></script>

JQuery ile asinkron veri akışının sağlanması şu dört adımdan oluşuyor:

1. AJAX olayını tetikleyecek HTML elementine gerekli event handler'ın eklenmesi.
2. İlgili controller'a ait action'ın JQuery'nin ajax fonksiyonuyla çağrılması.
3. Sunucudan alınan JSON tipindeki verinin işlemin sonucuna göre işlenmesi (başarılı ya da başarısız işlem).
4. Elde edilen veriyle arayüzün yani HTML'in güncellenmesi.

Basit bir örnek ile yukarıdaki adımları sırasıyla uygulayalım. Öncelikle aşağıdaki gibi basit bir arayüz oluşturalım. Burada bir adet text tipinde bir input alanıyla ajax olayını tetikleyecek bir düğme mevcut. Daha sonra sunucudan gelen sonuç alttaki span içine yazılacak.

<span>İsim: </span>
<input id="ajaxtext" type="text" />
<button id="ajaxbutton">Gönder</button>
<div>
    <span id="hellotext"></span>
</div>

Daha sonra script etiketleri arasına düğmenin click olayını JQuery'nin click fonksiyonu yardımıyla ekliyoruz ve içine ajax fonksiyonunu ekliyoruz.

<script>
    $("#ajaxbutton").click(function () {
        $.ajax({
            type: "post",
            url: "@Url.Action("MerhabaAjax")",
            data: "isim=" + $("#ajaxtext").val(),
            dataType: "json",
            success: function (data) {
                $("#hellotext").html(data);
            },
            error: function (data) {
                // Hata Mesajı
            }
        });
    });
</script>

Yukarıda da görüldüğü gibi click olayı içine yazılan ajax fonksiyonu sayfada bir yenilenme olmadan arka planda bir controller action'ına çağrı yapıyor ve gelen sonucu arayüze yansıtıyor. Şimdi sırasıyla ajax fonksiyonunun parametrelerini inceleyelim. "type" parametresi belirtilen url'e çağrının nasıl yapılacağını belirtiyor, bu get ya da post olabilir. Biz burada post'u kullandık. Daha sonra url parametresiyle hangi action'a çağrının yapıldığını belirtiyoruz, bunu ASP.NET MVC'nin helper metotlarından biriyle yapıyoruz. Url.Action metodu verilen action'ın url'ini döndüren basit bir metot. Bizim örneğimizde bu metot "/Home/MerhabaAjax" döndürmektedir. "data" parametresi yukarıda belirtilen action'ın parametrelerinin tanımlandığı yerdir, burada parametreler param1=değer1&param2=değer2&... formatında tanımlanır. "dataType" kısmı ise yapılan çağrı sonucunda hangi tipte bir cevap istendiğini belirtiyor. "success" ve "error" parametreleri de sırasıyla çağrının başarılı veya başarısız olduğu durumlarda ne yapılacağını belirten fonksiyonları içeriyor. Bu fonksiyonların data parametresi sunucudan gelen cevabı taşıyor.

İşin istemci tarafından bahsettikten sonra sunucu tarafından bahsedebiliriz. Yukarıda da bahsettiğim gibi ajax çağrısının yapıldığı yer Home controller'ındaki MerhabaAjax action'ıdır. Bu örnekteki action aşağıdaki gibi tanımlanabilir:

public ActionResult MerhabaAjax(string isim) {
    return Json("Merhaba " + isim + "!");
}

Bu örnekte basit bir string döndürdük. Ama bundan daha karmaşık işlemler yapmak mümkün. Mesela aynı şekilde bir veri tabanından veri alınarak, alınan veri Json olarak döndürülebilir. Yukarıdaki örneğin ekran çıktısı aşağıda görülebilir:

Bu yazımda JQuery'nin ajax fonksiyonunu kullanarak ASP.NET MVC ile nasıl AJAX çağrısı yapılabileceğinden bahsettim. Haftaya Unit Testing konusuyla karşınızda olacağım.