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]
}
|
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>
|
· $.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
www.ugurkizmaz.com
twitter: @vukizmaz