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

JQuery ile Ajax-Enabled WCF Servisinden XML formatında List türündeki verileri nasıl çekeceğimizi inceleyelim.

02.05.2012

3375

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

 
public class Ogrenci
{
    public string OgrenciNo { get; set; }
    public string AdSoyad { get; set; }
    public string Bolum { get; set; }
}

    public class Ogrenci
    {
        public string OgrenciNo { get; set; }
        public string AdSoyad { get; set; }
        public string Bolum { get; set; }
    }

Şimdi servisimizde öğrenci listesini almak için Getir_Ogrenciler methodumuzu oluşturalım.

 
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Xml)]
public List<Ogrenci> Getir_Ogrenciler()
{
    var ogrenciler = new List<Ogrenci>
    {
        new Ogrenci{OgrenciNo="041180001", AdSoyad = "Veysel Uğur Kızmaz", Bolum="Bilgisayar Mühendisliği"},
        new Ogrenci{OgrenciNo="041170001", AdSoyad = "Engin Demiroğ", Bolum="Yönetim Bilişim Sistemleri"},
        new Ogrenci{OgrenciNo="041160001", AdSoyad = "Dicle Barış Akkurt", Bolum="Bilgisayar Mühendisliği"}
    };
    return ogrenciler;
}

        [OperationContract]
        [WebGet(ResponseFormat = WebMessageFormat.Xml)]
        public List<Ogrenci> Getir_Ogrenciler()
        {
            var ogrenciler = new List<Ogrenci>
            {
                new Ogrenci{OgrenciNo="041180001", AdSoyad = "Veysel Uğur Kızmaz", Bolum="Bilgisayar Mühendisliği"},
                new Ogrenci{OgrenciNo="041170001", AdSoyad = "Engin Demiroğ", Bolum="Yönetim Bilişim Sistemleri"},
                new Ogrenci{OgrenciNo="041160001", AdSoyad = "Dicle Barış Akkurt", Bolum="Bilgisayar Mühendisliği"}
            };
            return ogrenciler;
        }
 

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.

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.5.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.ajax({
            type: "GET",
            url: "OkulServis.svc/Getir_Ogrenciler",
            dataType: "xml",
            success: function (data) {
                $('#sonuc').append(data);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="sonuc"></div>
    </form>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.5.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.ajax({
            type: "GET",
            url: "OkulServis.svc/Getir_Ogrenciler",
            dataType: "xml",
            success: function (data) {
                $('#sonuc').append(data);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="sonuc"></div>
    </form>
</body>
</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.

 
<ArrayOfOgrencixmlnsArrayOfOgrencixmlns="http://schemas.datacontract.org/2004/07/JqueryWcf3"xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
 <Ogrenci>
    <AdSoyad>Veysel Uğur Kızmaz</AdSoyad>
    <Bolum>Bilgisayar Mühendisliği</Bolum>
    <OgrenciNo>041180001</OgrenciNo>
 </Ogrenci>
 <Ogrenci>
    <AdSoyad>Engin Demiroğ</AdSoyad>
    <Bolum>Yönetim Bilişim Sistemleri</Bolum>
    <OgrenciNo>041170001</OgrenciNo>
 </Ogrenci>
 <Ogrenci>
    <AdSoyad>Dicle Barış Akkurt</AdSoyad>
    <Bolum>Bilgisayar Mühendisliği</Bolum>
    <OgrenciNo>041160001</OgrenciNo>
 </Ogrenci>
</ArrayOfOgrenci>

<ArrayOfOgrencixmlns="http://schemas.datacontract.org/2004/07/JqueryWcf3"xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
 <Ogrenci>
    <AdSoyad>Veysel Uğur Kızmaz</AdSoyad>
    <Bolum>Bilgisayar Mühendisliği</Bolum>
    <OgrenciNo>041180001</OgrenciNo>
 </Ogrenci>
 <Ogrenci>
    <AdSoyad>Engin Demiroğ</AdSoyad>
    <Bolum>Yönetim Bilişim Sistemleri</Bolum>
    <OgrenciNo>041170001</OgrenciNo>
 </Ogrenci>
 <Ogrenci>
    <AdSoyad>Dicle Barış Akkurt</AdSoyad>
    <Bolum>Bilgisayar Mühendisliği</Bolum>
    <OgrenciNo>041160001</OgrenciNo>
 </Ogrenci>
</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.

 
<script type="text/javascript">
    $.ajax({
        type: "GET",
        url: "OkulServis.svc/Getir_Ogrenciler",
        dataType: "xml",
        success: function (data) {
            var sonuc = '';
            for (i = 0; i < $(data).find("ArrayOfOgrenci").find("Ogrenci").size(); i++) {
 
                sonuc += $(data).find("ArrayOfOgrenci").find("Ogrenci").get(i).childNodes[2].text + " - "; //OgrenciNo
                sonuc += $(data).find("ArrayOfOgrenci").find("Ogrenci").get(i).childNodes[0].text + " - "; //AdSoyad
                sonuc += $(data).find("ArrayOfOgrenci").find("Ogrenci").get(i).childNodes[1].text + "<br/>"; //Bolum
            };
            $('#sonuc').append(sonuc);
        }
    });
</script>

    <script type="text/javascript">
        $.ajax({
            type: "GET",
            url: "OkulServis.svc/Getir_Ogrenciler",
            dataType: "xml",
            success: function (data) {
                var sonuc = '';
                for (i = 0; i < $(data).find("ArrayOfOgrenci").find("Ogrenci").size(); i++) {
 
                    sonuc += $(data).find("ArrayOfOgrenci").find("Ogrenci").get(i).childNodes[2].text + " - "; //OgrenciNo
                    sonuc += $(data).find("ArrayOfOgrenci").find("Ogrenci").get(i).childNodes[0].text + " - "; //AdSoyad
                    sonuc += $(data).find("ArrayOfOgrenci").find("Ogrenci").get(i).childNodes[1].text + "<br/>"; //Bolum
                };
                $('#sonuc').append(sonuc);
            }
        });
    </script>

Şimdi bu uygulamamızı çalıştırıp sonucunu inceleyelim.

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi

veysel@ugurkizmaz.com

www.ugurkizmaz.com

Yazar Hakkında

Veysel Uğur KIZMAZ

www.ugurkizmaz.com

YazılımDilleri.Net projesinin lideri olan Veysel Uğur Kızmaz, Gazi Üniversitesi Bilgisayar Mühendisliği bölümü mezunudur. Bir çok projede çalışmış, yazılım alanında birçok eğitimler vermiştir. Şu an özel bir yazılım danışmanlık firmasında Sharepoint proje danışmanlığı ve proje yöneticiliği yapmaktadır. Veysel Uğur Kızmaz, dahil olduğu projelerin çeşitliliği sebebiyle farklı alanlarda uzmanlaşmıştır: .Net, Sharepoint, Java, Php, Javascript, SQL Server, Oracle, MySQL.

Yazar Hakkında

Sosyal Medya

0 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar