Veysel Uğur KIZMAZ

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

16.06.2012Okunma Sayısı: 4415Kategori: JQuery

 Bu makalemizde Jquery ile Ajax-Enabled WCF Service’den XML formatında 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.Xml)]
  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.Xml)] 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: "xml",
  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.
 
 
 
Data değerimizi QuickWatch’tan izleyelim. data.childNodes[0].childNodes[0] altında değerlerimizin geldiğini görüyoruz.
 
·         data.childNodes[0].childNodes[0].childNodes[0] : Veysel Uğur Kızmaz bilgileri
o   data.childNodes[0].childNodes[0].childNodes[0].childNodes[0] = AdSoyad
o   data.childNodes[0].childNodes[0].childNodes[1].childNodes[0] = OgrenciNo
o   data.childNodes[0].childNodes[0].childNodes[2].childNodes[0] = Bolum
·         data.childNodes[0].childNodes[0].childNodes[1] : Engin Demiroğ bilgileri
o   data.childNodes[0].childNodes[1].childNodes[0].childNodes[0] = AdSoyad
o   data.childNodes[0].childNodes[1].childNodes[1].childNodes[0] = OgrenciNo
o   data.childNodes[0].childNodes[1].childNodes[2].childNodes[0] = Bolum
·         data.childNodes[0].childNodes[0].childNodes[2] : Dicle Barış Akkurt bilgileri
o   data.childNodes[0].childNodes[2].childNodes[0].childNodes[0] = AdSoyad
o   data.childNodes[0].childNodes[2].childNodes[1].childNodes[0] = OgrenciNo
o   data.childNodes[0].childNodes[2].childNodes[2].childNodes[0] = Bolum
 
 
FireBug ile gelen XML verisini daha detaylı inceleyelim.
 
 
  1. <ArrayOfOgrencixmlnsArrayOfOgrencixmlns="http://schemas.datacontract.org/2004/07/JqueryWcf3"xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  2.  <Ogrenci>
  3.     <AdSoyad>Veysel Uğur Kızmaz</AdSoyad>
  4.     <Bolum>Bilgisayar Mühendisliği</Bolum>
  5.     <OgrenciNo>041180001</OgrenciNo>
  6.  </Ogrenci>
  7.  <Ogrenci>
  8.     <AdSoyad>Engin Demiroğ</AdSoyad>
  9.     <Bolum>Yönetim Bilişim Sistemleri</Bolum>
  10.     <OgrenciNo>041170001</OgrenciNo>
  11.  </Ogrenci>
  12.  <Ogrenci>
  13.     <AdSoyad>Dicle Barış Akkurt</AdSoyad>
  14.     <Bolum>Bilgisayar Mühendisliği</Bolum>
  15.     <OgrenciNo>041160001</OgrenciNo>
  16.  </Ogrenci>
  17. </ArrayOfOgrenci>

 

 
Jquery Ajax request ile aldığım XML dosyamdaki verileri düzenleyip ekranda yazdırmak için script kodumda değişiklik yapıyoruz ve projemizi çalıştırıyoruz.
 
 
  1. <script type="text/javascript">
  2.     $.ajax({
  3.         type: "GET",
  4.         url: "OkulServis.svc/Getir_Ogrenciler",
  5.         dataType: "xml",
  6.         success: function (data) {
  7.             var sonuc = '';
  8.             for (i = 0; i < $(data).find("ArrayOfOgrenci").find("Ogrenci").size(); i++) {
  9.  
  10.                 sonuc += $(data).find("ArrayOfOgrenci").find("Ogrenci").get(i).childNodes[2].text + " - "; //OgrenciNo
  11.                 sonuc += $(data).find("ArrayOfOgrenci").find("Ogrenci").get(i).childNodes[0].text + " - "; //AdSoyad
  12.                 sonuc += $(data).find("ArrayOfOgrenci").find("Ogrenci").get(i).childNodes[1].text + "<br/>"; //Bolum
  13.             };
  14.             $('#sonuc').append(sonuc);
  15.         }
  16.     });
  17. </script>
 
 
Şimdi bu uygulamamızı çalıştırıp sonucunu inceleyelim.
 
 
 
 
 
 
 
 
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com