ASP.NET’te jQuery ile AJAX İşlemleri

17 Aralık 200931 Temmuz 2016 ASP.NET, Web Teknolojileri

jQuery artık web uygulamalarında sıklıkla kullanılır hale geldi. Gerek sayfa tasarımına harika görseller ve efektler katması, gerekse AJAX taleplerini basit ve hızlı gerçekleştiriyor olması bu kütüphaneyi programcılar ve tasarımcılar için çok cazip hale getiriyor. Son zamanlarda jQuery ile bir web servisinin veya PageMethod’un nasıl çağrılabileceği şeklinde sık sık sorular duyunca ben de jQuery ile ASP.NET uygulamalarında farklı AJAX taleplerinin nasıl yapılabileceği ile ilgili ufak bir uygulama hazırladım. Bu doğrultuda bu yazıda da;

ASP.NET sayfasına
Parametre alan bir ASP.NET sayfasına
Web servisine
PageMethod’a

jQuery ile nasıl AJAX talepleri yöneltebileceğimizi inceleyeceğiz.

Öncelikli olarak jQuery kütüphanesinde AJAX taleplerini gerçekleştireceğimiz ajax isimli fonksiyonu tanıyalım. ajax fonksiyonu parametre olarak talep yapılacak url, varsa parametre verilerini, bu verileri iletme yöntemini(GET,POST gibi), talep sonucunda okunacak verinin tipi gibi bilgileri alır. Bunların dışında işlemin başarılı gerçekleşmesi durumunda sayfada güncelleme yapılmasını sağlayan veya hata oluşması durumunda gerekli işlemlerin yapılmasını sağlayan iki fonksiyon tanımlamasını da kendi içerisinde bulundurabilir. Burada saydığımız parametrik değerlerin tamamı zorunlu değildir, yapılan talepteki duruma göre sadece ihtiyaç duyulan parametreler kullanılabilir. Aşağıda AJAX talebi için kullanılabilecek basit bir metot çağırımı görülmektedir.

$.ajax({
    type: ‘GET’,
    url: ‘Sayfa.aspx’,
    success: function(result) {
        $(‘#sonuc’).html(result);
    },
});

Parametrelerin ne anlama geldiğine bakalım:

type: Yapılacak talebin veri iletim yöntemi. GET, POST gibi.
url: Asenkron talebin yapılacağı adres.
success: Talebin başarılı bitmesi durumunda çalışacak fonksiyon. Burada talep sonucunda gelen veriler sayfaya işlenir.

Bunlar dışında kullanılabilecek birkaç parametre daha var, bu parametrelere ilerleyen kısımlarda değineceğiz. Buradaki success parametresinin değer olarak aldığı fonksiyon tanımlamasını C# dilindeki isimsiz metotlara(anonymous methods) benzetebiliriz. success metodundaki result değişkeni AJAX talebi sonucunda okunan veriyi taşımaktadır. Bu fonksiyon içerisindeki $(‘#sonuc’) ifadesi de sayfamızdaki sayfa id’sini taşıyan HTML elementini işaretleyen bir jQuery seçici ifadesidir. Dönen AJAX cevabı sonuc isimli HTML elementinin içeriğine yazdırılacaktır. Artık bir örnek ile bu talepleri nasıl yönetebileceğimizi incelemeye başlayalım.

NOT: jQuery’de seçiciler, olaylar gibi temel kavramlar hakkında detaylı bilgi almak isterseniz size jQuery’nin resmi sitesini veya bu konuda zengin Türkçe içeriğe sahip olan www.eburhan.com adresini incelemenizi tavsiye ederim.

NOT: jQuery’de ajax() fonksiyonu dışında get() ve post() isimli fonksiyonlarla da AJAX talepleri yapılabilmektedir. Aynı işlemleri yapan fakat farklı kullanım şekilleri olan get ve post isimli jQuery fonksiyonları ile ilgili de araştırma yapabilirsiniz.

ASP.NET Sayfasına Talepte Bulunmak

jQuery fonksiyonunu oluşturmadan önce sayfamız içerisindeki HTML elementlerini hazırlayalım.

Default.aspx
<input type=”text” id=”text1″ />
<input type=”button” value=”Seç” onclick=”CallAspxPage();” /><br />
<span id=”sonuc”></span>

Butona tıklandığında çağrılacak JavaScript fonksiyonu içerisinde jQuery ile yapılacak çağrının cevabı sonuc adındaki alana yazdırılacak. Geldik işin asıl önemli olan kısmına; jQuery ajax fonksiyonunun yazımına. Aşağıda basit olarak bir ASP.NET sayfasına yapılacak jQuery talebi görülmektedir.

Default.aspx
<script type=”text/javascript”>
    function CallAspxPage() {
        $.ajax({
            type: ‘GET’,
            url: ‘Ajax1.aspx’,
            success: function(result) {
                $(‘#sonuc’).html(result);
            },
            error: function() {
                alert(‘Talep esnasında sorun oluştu. Yeniden deneyin’);
            }
        });
    }
</script>

url kısmında yer alan Ajax1.aspx isimli dosyaya talepte bulunuyor ve dönen cevabı sonuc isimli span elementine yazdırıyoruz. Burada az önce gördüğümüz standart ajax fonksiyonu tanımlamasının dışında bir de error adında bir parametreyi görüyoruz. error parametresine bağlanan isimsiz metot ise talep esnasında bir hata ile karşılaşılırsa çalışacak. Sayfayı çalıştırıp butona tıklamamız durumunda sonuc isimli elementin içeriğine Ajax1.aspx sayfasının çıktısı gelecektir. Buradaki örnek aslında tüm web sayfası dosyaları için geçerli bir kullanım şeklidir. htm, asp, aspx, ashx, php gibi dosyalara da buradaki kod parçasında gördüğünüz şekilde talepte bulunabilir ve oluşan çıktıyı okuyabilirsiniz.

ASP.NET Sayfasına QueryString ile Talepte Bulunmak

jQuery’de ASP.NET veya sunucu taraflı çalışan başka bir sayfaya QueryString ile parametre gönderebilmek için ajax fonksiyona data isimli parametre ile değer göndermek gerekir. Burada parametreleri göndermek için farklı bir yazım biçimi bulunmaktadır. data: ‘{ “name”:”Uğur” }’ şeklinde kullanılan bu parametrede dikkat edileceği üzere değer süslü parantez karakterleri({}) içerisinde taşınmakradır. Parametre adı ve değeri çift tırnak karakteri(“) içerisinde taşınmakta, eşitlik operatörü olarak da iki nokta karakteri(:) kullanılmaktadır. Eğer birden fazla parametre iletilecekse parametreler virgül karakteri(,) ile ayrılmalıdır. Aşağıda bir Ajax1.aspx isimli sayfamıza URL üzerinden parametre iletilerek ajax talebinin nasıl gerçekleştirileceği görülmektedir. Sayfada yer alan button elementimizin onclick niteliğini de aşağıdaki fonksiyonun adı ile değiştirmek gerektiğini belirtelim.

Default.aspx
function CallAspxPageWithQueryString() {
    $.ajax({
        type: ‘GET’,
        url: ‘Ajax1.aspx’,
        data: ‘name=’ + escape($(‘#text1’).val()),
        success: function(result) {
            $(‘#sonuc’).html(result);
        },
        error: function() {
            alert(‘Talep esnasında sorun oluştu. Yeniden deneyin’);
        }
    });
}

Sayfayı çalıştırıp text1 isimli elemente bir isim girişi yapacak olursak Ajax1.aspx sayfasına ismin QueryString ile gönderildiğini ve sonucun sayfamızda yer aldığını görebiliriz.

Not: Yukarıda kullanılan escape() JavaScript fonksiyonu olası Türkçe karakter problemlerini gidermek amacıyla kullanılmıştır.

Resim: QueryString ile sayfaya gönderilen AJAX talebinin sonucu alındı

Web Servisine Talepte Bulunmak

jQuery ile XML Web Servislerine yapılan talepler JSON formatında elde edilerek değerlendirilebilmektedir. Web servislerine yapılan talep normal bir sayfa talebiyle benzerdir. Web servislerine yapılan talebin POST metoduyla gerçekleşmesi, contentType, dataType ve data parametrelerinin ajax fonksiyonunda belirtilmesi gerekmektedir. Çağrılan WebMethod parametre almıyorsa dahi data parametresi boş olarak verilmelidir. Aşağıda yerel makinede(localhost) yer alan ve name ile surname parametrelerini alan bir web servisine talep gerçekleşmektedir. Web servisindeki HellojQuery isimli metot web servis URL’sinin sonuna yazılmıştır.

NOT: Çağrılacak web servis class’ının System.Web.Script.Services.ScriptService niteliğini(attribute) uygulaması gerekmektedir. Böylece servis nesnesi kendisine gelecek asenkron taleplere cevap verebilecektir.

Default.aspx
function CallWebservice() {
    $.ajax({
        type: ‘POST’,
        url: ‘http://localhost:5199/JQueryWebService/Service.asmx/HellojQuery’,
        data: ‘{ “name”:”Uğur”,”surname”:”Umutluoğlu” }’,
        contentType: ‘application/json; charset=utf-8’,
        dataType: ‘json’,
        success: function(result) {
            $(‘#sonuc’).html(result.d);
        },
        error: function() {
            alert(‘Talep esnasında sorun oluştu. Yeniden deneyin’);
        }
    });
}

Görüldüğü gibi web servisine yapılan talep JSON formatında okunmakta ve gelen değerler sayfaya aktarılmaktadır. Eğer web servisi parametre almıyor olsaydı data parametresi; data: ‘{}’ şeklinde boş değer ile yazılmalıydı.

PageMethod’a Talepte Bulunmak

ASP.NET AJAX uygulamalarında sayfa içerisine yazdığımız WebMethod niteliği uygulamış static metotları asenkron talepler ile çağırabilmekteyiz. Bu tip metotlara PageMethod adı verilmekte ve ScriptManager ile istemciye yüklenen JavaScript fonksiyonları sayesinde bu metotlar AJAX taleplerinde kullanılabilmektedir. Benzer şekilde bu metotları jQuery ile yapılan AJAX taleplerinde de kolayca kullanabilmekteyiz. İlk olarak sayfamızın code-behind dosyasına bir tane PageMethod ekliyelim ve jQuery ile bu metodu nasıl çağıracağımızı görelim.

Default.aspx.cs
public partial class _Default : System.Web.UI.Page
{
    [System.Web.Services.WebMethod]
    public static string jQueryPageMethod(string name)
    {
        return “<h3>jQuery – PageMethod Talebi</h3>Merhaba “ + name;
    }
}

PageMethod’lar ile ilgili daha detaylı bilgi almak daha önceden yazdığım bu yazıyı inceleyebilirsiniz. Peki yazdığımız bu metodu nasıl çağıracağız? Aşağıda jQueryPageMethod isimli metodun ajax fonksiyonundan nasıl çağrıldığı görülmektedir. Çağırım şekli web servisi çağırımına oldukça benzemektedir.

function CallPageMethod() {
    $.ajax({
        type: ‘POST’,
        url: ‘Default.aspx/jQueryPageMethod’,
        data: ‘{ “name”:”Uğur” }’,
        contentType: ‘application/json; charset=utf-8’,
        dataType: ‘json’,
        success: function(result) {
            $(‘#sonuc’).html(result.d);
        },
        error: function() {
            alert(‘Talep esnasında sorun oluştu. Yeniden deneyin’);
        }
    });
}

Bu şekilde bir ASP.NET uygulamasında farklı bileşenlere jQuery ile nasıl AJAX talepleri gönderebileceğimizi incelemiş olduk.