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

16.06.2012Okunma Sayısı: 5990Kategori: JQuery

Bu makalemizde Jquery ile Ajax-Enabled WCF Service’den 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. Şimdi bu servisimize Getir_OkulAd() isminde string veri döndüren bir method yazalım.

 
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class OkulServis
{
   [OperationContract]
   [WebGet(ResponseFormat = WebMessageFormat.Json)]
    public string Getir_OkulAd()
    {
        return "Gazi Üniversitesi";
    }
    // Add more operations here and mark them with [OperationContract]
}

    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class OkulServis
    {
       [OperationContract]
       [WebGet(ResponseFormat = WebMessageFormat.Json)]
        public string Getir_OkulAd()
        {
            return "Gazi Üniversitesi";
        }
        // Add more operations here and mark them with [OperationContract]
    }

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 Get_OkulAd() methodunu çağıralım.

 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="JQueryWcf2.Test" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<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_OkulAd",
            dataType: "json",
            success: function (data) {
                $('#sonuc').append(data.d);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="sonuc"></div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="JQueryWcf2.Test" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<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_OkulAd",
            dataType: "json",
            success: function (data) {
                $('#sonuc').append(data.d);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="sonuc"></div>
    </form>
</body>
</html>

$.ajax() methodu ile servisimize ajax request gönderip sonucumuzu alacağız.
url: ServisimizinAdı/Methodumuzunadı
dataType: geri döndürdüğü veri tipi
success: Servisten veri başarıyla çekildiyse ekranda “Gazi Üniversitesi”’ni yazmasını beklemekteyiz.

Visual Studio’da $('#sonuc').append(data.d); satırına breakpoint koyup data değişkeninin değerine bakalım.

Çalıştırdığımızda sonuc <div>’inde “Gazi Üniversitesi” yazcaktır.

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi

veysel@ugurkizmaz.com