Bildiğiniz gibi Ajax ile asenkron data alışverişi yapmanın birden çok yolu var. Bu yazımda sizlere JQuery Ajax ile bir Pagemethod'a nasıl bağlantı sağlarız onu anlatmaya çalışacağım.
Önce jQueryAjax.aspx adlı bir sayfa oluşturalım. Bu sayfanın code behind yani .cs dosyasına geçelim ve bir metot ekleyelim ama bu metota WebMethod özelliği vereceğiz ki Ajax ile bu metoda direk bağlantı kurabilelim.
jQueryAjax.aspx.cs
[System.Web.Services.WebMethod]
public static string KarsilamaMesaji(string AdSoyad)
{
return "Hoşgeldiniz " + AdSoyad;
}
jQuery.aspx
<div id="result"></div>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: 'POST',
url: 'jQueryAjax.aspx/KarsilamaMesaji',
data: '{ "AdSoyad":"Doğuhan Aydeniz" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(result) {
$( '#result').html(result.d);
},
error: function() {
alert('Bağlantı sırasında bir sorun oluştu. Yeniden deneyin');
}
});
});
</script>
Ne yaptık?
jQuery.aspx sayfasının ilk satırında Ajax metodumuzdan dönen sonuçları içine yazdırmak için ID'si "result" olan bir div yerleştirdik.
İkinci satıra baktığımızda jquery.com'dan son sürümünü indirdiğim jquery kütüphanesini sayfama ekledim.
3'ncü satırdan itibaren şunu dedim; sayfa hazır olduğunda git jQuery Ajax metodunu, bu özelliklerle çalıştır ve duruma göre başarılıysa sonucu result div'inin içine yazdır eğer bir sorun yaşanmışsa kullanıcıya uyarı kutusu çıkar.
Peki Normal bir Ajax işleminden nesi farklı?
Kullandığımız Ajax metoduna verdiğimiz özeliklere bakacak olursak
- url kısmında bir sayfa ismi veriyoruz ve sonuna /KarsilamaMesaji yazıyoruz. Bu bizim o sayfanın .cs dosyasında yer alan web methodumuzun adı.
- data kısmında ise KarsilamaMesajı adlı web methodumuzun bizden istemiş olduğu parametreye değer gönderiyoruz.
- contentType ve dataType kısımlarında dönecek olan sonuç json türünde olacağı için bunu belirtmemiz gerekiyor.
- result.d bu farklı kullanımın sebebi json türünden data alışverişi yaptığınız zaman kullanılan dönen sonucun içerisindeki dataya erişmek için kullanılır.