Technorati Etiketleri: ,,,,,,,

Merhaba arkadaşlar.Bu yazımda uzun zamandır projelerimde kullandığım ama bir türlü bloğumda yazmaya zaman bulamadığım jquery kütüphanesinden bahsedicem.
jquery kütüphanesini net projelerimizde kullanarak kullanıcı dostu,kontroller ve sayfalar yapmaya çalışıcaz.Bu yazımda jquery kütüphanesinin .Net üzerinde nasıl kullanıldığını çok basit bir örnekle açıklamaya çalışıcam.

Öncelikle jquery kütüphanesinin son versiyonunu şu adresden indiriyoruz
jquery-1.3.2.min.js

Bu javascript dosyasını <head></head> taglarımız arasına yerleştiriyoruz. 

   1: <script src="js/jquery.js"></script>

Şimdi sıra jquery kodlarımızı yazmaya geldi.Bu kodları yine <head></head> taglarımızın arasına yazıyoruz. 

   1: <script>
   2:      $(document).ready(function(){
   3:      
   4:      $("#button").click(function()
   5:      {
   6:      $("#loading").show();
   7:      $.ajax({
   8:         type: "Get",
   9:         url: "jquery.aspx",
  10:         data: "", 
  11:         error: function() {
  12:         alert('Üzgünüm Bir Hata Oluştu.Lütfen Daha sonra Tekrar Deneyiniz');
  13:         $("#loading").hide();
  14:         },
  15:         success: function(data) 
  16:         {
  17:         $("#content").html(data);
  18:         $("#loading").hide();
  19:         }        
  20:      })
  21:      })
  22:      });
  23:      </script>

$(document).ready(function()}) = Bu fonsiyonu anlatmama gerek yok sanırım ( .net de Page_Load gibi düşünün ama o değil unutmayın)


$("#button").click(function()})   = Butonumuza ait id değeri (Ben span elemtini kullandım size isterseniz img gibi daha farklı elementler kullanabilirsiniz)

$.ajax({}); = Jquery methodumuz;

Bu methodumuzda 2 sonuç bulunmakta.Biri error diğeri ise succes.İşlemimiz hata ile karşılaştığında neler yapıcağımızı error bloğuna,işlemimiz başarı ile sonuçlandığına neler yapıcağımızı success bloğuna yazıyoruz.Ben şimdilik dönen veriyi belirttiğim div elementinin içerisine yazmasını istedim.

type: "Get" = Bildiğimiz post yada Get (Form Action)

url: "jquery.aspx" = Veri işleyeceğimiz sayfamızın adresi

data: "" = Veri yapacağımız sayfaya göndereceğimiz değişkenleri bu bölüme yazıyoruz.(Daha sonra ki yazılarımda görücez)

success: function(data)  =Buradaki data değişkeni,bize geri dönen verimizi barındırıyor.

$("#loading").show();  = İşlemlerimiz sürerken kullanıcaya bir loading ekranı göstermek için elementimizi show yapıyoruz.


$("#loading").hide();   = işlemlerimiz bittiğinde loading mesajımızı gizliyoruz.

Default.aspx sayfamızın içeriği;

   1: <form id="form1" runat="server">
   2:     Sistem Saati için <span style="color:Red; cursor:hand" id="button">Tıklayın</span>
   3:     <div id="content"></div>
   4:     <img src="images/loading.gif" style="display:none" />
   5:     </form>

Şimdi ise veri işleyeceğimiz sayfayı kodlayalım

Sayfamızın ismi jquery.aspx (url=”jquery.aspx”) 

   1: <%@ Page Language="C#" %>
   2: <script runat="server">
   3:     protected void Page_Load(object sender, EventArgs e)
   4:     {
   5:         GetSystemtime();
   6:     }
   7:     private void GetSystemtime()
   8:     {
   9:     Response.Write(DateTime.Now.ToString());
  10:     }
  11:     </script>

Burada anlaşıldığı gibi sadece sistem tarihini ve saatini çekiyoruz.

 

Evet hepsi bu kadar arkadaşlar.Sonra ki yazılarımda jquery den bolca bahsedicem. .Net ile kalın…

Proje ile ilgili Demo çalışmaya buradan ulaşabilirsiniz

Projeye ait kaynak kodlarına buradan ulaşabilirsiniz.