Skip to main content

ASP.NET’te jQuery ile AJAX İşlemleri

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.

ASP.NET’te jQuery ile AJAX İşlemleri” hakkında 19 yorum

  1. Üstadım ben bazı seyleri anlamadım örneğin
    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’);

    });

    bu kodda ajax1.aspx içindeki kod nedir orada ne yapılıyor onu anlamadım misal
    }

  2. Ajax1.aspx sayfası QueryString’den gelen name adındaki parametreyi okuyor ve sayfa çıktısına bu bilgiyi basıyor. Yaptığı tek iş bu aslında.

  3. Hocam peki Jquery kullanarak başka bir asp.net sayfasından gelen QueryString bilgisini nasıl alabiliyoruz?

  4. Cevap için teşekkürler..Problemimi codebehinde de tanımladığım bir değişkene querystring bilgisini atadıktan sonra o değişkene javascript ile erişerek hallettim…

    İyi günler iyi çalışmalar

  5. Kuru kuru teşekkür yetmiyor, ama bu şartlarda başka seçenekte yok. İnşallah bizde birgün bu tarz makalaler ile bu konuda çalışann arkadaşlarımıza faydalı olacak seviyeye ulaşırız.

  6. hocam yaptığınız gibi ajax ile ajax1.aspx sayfasında veriyi alıp işleyip tekrar query string gönderdiktensonra success: kısmında yazdığım fonksiyonda kullamak istiyorum beceremedim. Çok mu şey istiyorum :)

  7. @Umut Tekrar kullanmak istediğiniz şey metot çağrıldığında bir kontrolün değeri mi, yoksa metodu çağırdıktan sonra elde edilen string değer mi anlayamadım? Metodu çağırmadan önceki değeri ilgili html elementine javascript veya jquery selector ile erişip alabilirsiniz. Ajax request’inden gelen değer zaten result değişkeninde var.

  8. json tipinde veri alıp sayfada isdeğimiz yerde kullanabiliyoruz. zaten verdiğiniz bilgiler geyet açıklayıcı. Bu konuyla ilgili şöyle bi sıkıntım var. veritabanından çektiğim verileri belli aralıklarla yenileyerek göstermem gerekiyor. setInterval("tekrar eden kod",tekrar süresi);
    ile bunu sağlıyorum. Ama şöyle bi sıkıntı var: jquery ajax aldığı her veriyi bellekte tutuyor ve belliği şişiriyor. Bunun bi çözümü var mıdır.

  9. Uğur Hocam QueryString ile web sayfasına talepte bulunma örneğinde Ajax1.aspx sayfasının içeriğinde tam olarak ne var. Oraya gönderdiğimiz ‘name’ parametresini o sayfa nasıl karşılıyor ve cevabı neye göre dönüyor bu kısmı tam olarak anlayamadım. Teşekkürler.

  10. Çok geç cevap yazıyorum kusura bakma Mesut.

    Oradaki name değeri aslında sayfaya querystring ile gönderilen bir değer default.aspx?name=ugur gibi. text1 input’undan alınan değeri ajax çağrısında parametre olarak iletmişim.

  11. Hocam Merhabalar. Ben bir uçak bileti satışı sistemi üzerinde çalışıyorum. Anlaştığım seyahat ecentesi bana bir json web servis verdi. http://testapi.iati.com/rest/flightSearch/52FED64FEF5A0534059FA008523E2B17 şeklinde.

    bu web servisin örnek parametreleride aşağıdaki gibi:
    {
    “fromAirport”: “ESB”,
    “toAirport”: “IST”,
    “fromDate”: “2013-02-01”,
    “adult”: 1
    }

    bunu jquery ajax ile denedim aşağıdaki gibi:

    script src=”http://code.jquery.com/jquery-1.5.2.js” type=”text/javascript”>

    function yap()
    {

    $.ajax({
    url: “http://testapi.iati.com/rest/flightSearch/52FED64FEF5A0534059FA008523E2B17”,
    type: “POST”,
    dataType: “json”,
    data: “{‘fromAirport’: ‘ESB’,’toAirport’: ‘IST’,’fromDate’: ‘2013-02-01′,’adult’: 1 }”,
    contentType: “application/json”,
    success: function (msg) {
    $(‘#TextBox1’).html(‘oluyor :D’);
    },
    error: function (e) {
    alert(JSON.stringify(e));
    $(‘#TextBox1’).html(‘OLMUYOR :/’);
    },

    });
    }

    sürekli error veriyor. Arkadaşın biri cross domain fln dedi ama anlamadım.

    acaba neden çalışmıyor?

    Teşekkürler…

  12. merhaba,.NET framework 3.5 ile beraber ajax post yada get ile döndürülen datanın javascript property’si result.data oldu
    örneğin
    success: function(result) {
    $(‘#sonuc’).html(result.d);

    “result.d”

  13. Hocam iyi günler.Makaleniz ajax’ı anlamamda oldukça faydalı oldu öncelikle teşekkür ediyorum.2-3 gündür ugraştığım bir sorun var.Bir js fonksiyonu yazdım ve buyona basıldıgında bu js çalışsın istiyorum.Butonun html kodu aşağıdadır.

    js fonksiyonu ise

    function QueryStringIleGorevlendirmeYap() {
    $.ajax
    ({
    type: ‘POST’,
    url:’BolAraDersGorevlendirmesiCVP/gorevlendirmeyiTaslakOlarakYapalım’,
    data: ‘{ “OgretimElamaniID”:”2″}’,
    success: function(result) {
    return true;
    },
    error: function() {
    alert(‘Talep esnasında sorun oluştu. Yeniden deneyin’);
    }

    });
    }

    Burada js fonksiyonu içerinde code behind da kullanıgım bir fonksiyonu çagırmak istedim.Ama Breakpoin koydugumda code behind tarafında ki fonksiyona bir türlü girmeyi başaramadım :S javascript konusunda çok tecrüben yok.Yardımcı olursanız sevinirim.
    Son olarak code behind tarafında kullandıgım Fonksiyon:

    public void gorevlendirmeyiTaslakOlarakYapalım(int OgretimElamaniID)
    {
    OgretimElamaniID = Int32.Parse(lblOgretimElamaniID.Text.ToString());
    GorevlendirmeyiTaslakOlarakKaydet(OgretimElamaniID);
    }

    Teşekkürler.

  14. Merhabalar. herkese iyi çalışmalar. arkadaşlar http://www.sancaktepe.bel.tr/ sitesinde güncel haberler, kültürel haberler diye ajax ile çalışan bir tab container var. bunun aynısını yapmam gerekiyor fakat çözemedim bir türlü. duyan bilen varsa yardımcı olabilir mi ? çok teşekkür ederim

  15. şans eseri denk geldim yazınıza. Genelde yabancı kaynaklardan faydalanırım daha açıklayıcı oldukları için ama bu yazınız yabancı tükçe fark etmeksizin en iyisi olmuş başarılarınızın devamını dilerim.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir