Jquery ile Asp.net Sayfasına Ajax İsteğinde Bulunma

Bu yazımda Jquery ile Ajax işlemlerinde direk olarak sayfamıza Ajax isteğinde bulunmayı göstermeye çalışacağım. Daha önce Jquery ile Ajax işlemlerinde genelde metotları, ashx (generic handler) dosyalarını ve web servisleri kullanmıştık. Şimdi ise bunlara asp.net sayfamızı ekliyoruz ve Ajax isteğini asp.net sayfamıza yapıyoruz. Böylelikle Jquery ile Ajax işlemlerini daha iyi kavramış olacağız ve daha güzel uygulamalar geliştirebileceğiz. Ayrıca Ajax isteğinde bulunabileceğimiz nesneleri de yani seçeneklerimizi de artırmış oluyoruz. Şimdi bu uygulama için yazmamız gereken Jquery kodlarına bakalım.

Asp.net sayfamıza Ajax isteğinde bulunmak için aşağıdaki html yapısına göre Jquery kodlamasını yapacağız. Ancak şunu belirteyim ki sayfa isteğinde datatype olarak bir tipimiz yok. Daha önce bunu ashx dosyalarına Ajax isteğinde bulunurken görmüştük (Buradaki yazımda). Datatype json olan Ajax isteklerimizi metotlara ve web servislere yapıyorduk. Sayfalara datatype olmadan Ajax isteği yapacağız. Örnek kodlama aşağıdaki gibi olacak.

  //script kodlarımız
  <script type="text/javascript">
    $(document).ready(function(){
      $("#linkler a").click(function(){
        var adres = $(this).attr("href");
        //adres değişkeni sayfa.aspx gibi bir değer oluyor.
        $("#load").show();
        $.ajax({
          type:"post",
          //url'de adres değişkeninden gelen sayfayı belirliyoruz.
          //sonuçta url:"sayfa.aspx" gibi bir değer elde ediyoruz.
          url:adres,
          data:{},
          success:function(msg)
          {
            $("#sonuc").html(msg); //sayfa sonucunu yazdırıyoruz.
            $("#load").hide();
          }
        });
        return false;
      });
    });
  </script>

  // html kodlarımız
  <div id="linkler">
    <a href="sayfa1.aspx">Sayfa 1</a>
    <a href="sayfa2.aspx">Sayfa 2</a>
    <a href="sayfa3.aspx">Sayfa 3</a>
  </div>

Görüldüğü gibi eklenen sayfalara istekte bulunup bilgileri elde ediyoruz. İstekte bulunduğumuz sayfada tüm server kodları ve server kontrolleri çalıştırılmış olarak geliyor. Böylece Jquery ile Ajax işlemlerini daha iyi kavramış oluyoruz.

Artık daha iyi uygulamalar geliştirebiliriz. Örnek kodlarını verdiğim ve basit bir uygulama olarak hazırladığım projeyi buradan indirebilirsiniz. Ayrıca buradan da çalışır halini görebilirsiniz.

İyi Çalışmalar.