Veysel Uğur KIZMAZ

JQuery ile Ajax-Enabled WCF Servisinden Json Formatında List Çekmek

16.06.2012Okunma Sayısı: 5182Kategori: JQuery

 Bu makalemizde Jquery ile Ajax-Enabled WCF Service’den List türünden nasıl veri alacağımızı inceleyelim.

Bu işlemi bir örnek uygulama üzerinde inceleyelim.
Örnek uygulamamız için öncelikle bir Asp.Net Web Application oluşturuyoruz. Örneğimizde Jquery ile Ajax request yapacağız. Bu sebeple projemize Ajax-Enabled WCF Service ekliyoruz.
 
 
OkulServis.svc dosyamızı ekledik. Örneğimizde öğrenci listesi almak istiyoruz. Bu sebeple Ogrenci nesnemizi tanımlamamız gerekmektedir.
Ogrenci.cs
 
  1. public class Ogrenci
  2. {
  3.     public string OgrenciNo { get; set; }
  4.     public string AdSoyad { get; set; }
  5.     public string Bolum { get; set; }
  6. }

 

 
Şimdi servisimizde öğrenci listesini almak için Getir_Ogrenciler methodumuzu oluşturalım.
 
  1. [OperationContract]
  2. [WebGet(ResponseFormat = WebMessageFormat.Json)]
  3. public List<Ogrenci> Getir_Ogrenciler()
  4. {
  5.     var ogrenciler = new List<Ogrenci>
  6.     {
  7.         new Ogrenci{OgrenciNo="041180001", AdSoyad = "Veysel Uğur Kızmaz", Bolum="Bilgisayar Mühendisliği"},
  8.         new Ogrenci{OgrenciNo="041170001", AdSoyad = "Engin Demiroğ", Bolum="Yönetim Bilişim Sistemleri"},
  9.         new Ogrenci{OgrenciNo="041160001", AdSoyad = "Dicle Barış Akkurt", Bolum="Bilgisayar Mühendisliği"}
  10.     };
  11.     return ogrenciler;
  12. }

 

 
Burada dikkat edilmesi gerkeen en önemli nokta, [WebGet(ResponseFormat = WebMessageFormat.Json)] attribute’udur. Burada, servisten döndürülecek datanın formatını belirliyoruz. WebMessageFormat enumunun 2 değeri vardır. Biri Json, biri Xml. Yani verilerimizi ya Json ya da XML türünde geri döndüreceğiz.
 
Şimdi Projemize Test.aspx isminde bir Web Form ekleyelim ve bu formda Jquery aracılığıyla OkulServis’imizin Getir_Ogrenciler() methodunu çağıralım.
 
 
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3.     <script src="Scripts/jquery-1.5.2.js" type="text/javascript"></script>
  4.     <script type="text/javascript">
  5.         $.ajax({
  6.             type: "GET",
  7.             url: "OkulServis.svc/Getir_Ogrenciler",
  8.             dataType: "json",
  9.             success: function (data) {
  10.                 $('#sonuc').append(data);
  11.             }
  12.         });
  13.     </script>
  14. </head>
  15. <body>
  16.     <form id="form1" runat="server">
  17.     <div id="sonuc"></div>
  18.     </form>
  19. </body>
  20. </html>

 

 
Öncelikle gelen veriyi görebilmek için $('#sonuc').append(data); satırına breakpoint koyup data’yı inceleyelim.
 
 
Gördüğümüz gibi “data” değişkenimizde verilerimiz gelmiş bulunmakta. Şimdi bu verileri Json formatına göre işleyip ekranda yazdıralım.
 
 
  1. <script type="text/javascript">
  2.         $.ajax({
  3.             type: "GET",
  4.             url: "OkulServis.svc/Getir_Ogrenciler",
  5.             dataType: "json",
  6.             success: function (data) {
  7.                 var ogrenci = '';
  8.                 for (i = 0; i < data.d.length; i++) {
  9.                     ogrenci += data.d[i].OgrenciNo + ' - ';
  10.                     ogrenci += data.d[i].AdSoyad + ' - ';
  11.                     ogrenci += data.d[i].Bolum + '<br/>';
  12.                 }
  13.                 $('#sonuc').append(ogrenci);
  14.             }
  15.         });
  16.     </script>
 
·         - ogrenci değişkenimizde ekranda yazdıracağımız ifadeyi tutuyoruz.
- ·      - data.d ile Json türünde aldığımız öğrenci listesine erişiyoruz.
·         - data.d[i] ile i. öğrenci bilgisine erişiyoruz.
·         - data.d[i].OgrenciNo ile öğrenci numarasına, data.d[i].AdSoyad ile ad soyadına, data.d[i].Bolum ile de öğrencinin bölüm bilgisine ulaşıyoruz.
·         - Satır sonundaki “<br/>” ile bir sonraki kaydı yazdırmadan önce alt satıra geçmesini söylüyoruz.
 
Şimdi bu uygulamamızı çalıştırıp sonucunu inceleyelim.
 
 
 
 
 
 
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com