AJAX-enabled WCF Services

19.09.2011Okunma Sayısı: 5752Kategori: WCF

Bu makalemizde Ajax-Enabled WCF Servislerinin ne olduğunu ve nasıl oluşturulduğunu bir örnek ile inceleyelim.

AJAX, bir web sayfasının tamamının sunucuya gönderilmesi yerine istenen bölümlerinin sunucuya gönderilip sonucunun client tarafından alınması şeklinde çalışmaktadır. WCF-enabled Services, bu amaçla oluşturulmuş bir WCF servisidir.

Hemen bir örnek uygulama üzerinde konuyu detaylandıralım. Örnek uygulamamızda google aramalarında oluğu gibi textbox’ta her harfe tıkladığımızda o harflerle başlayan web sayfalarını listeleyelim.

Visual Studio’da yeni bir web application oluşturalım. Oluşturduğumuz web projemize Linkler.xml isminde bir xml dosyası oluşturalım. Bu xml dosyasında bizim daha önce ziyaret ettiğimiz web sayfalarının olduğunu düşünelim. Bunun yerine veritabanı uygulaması yapılması daha keyifli olabilirdi fakat daha basit bir örnek olduğundan bu şekilde bir uygulamayı tercih ettim şimdilik.

Linkler.xml

<?xmlversionxmlversion="1.0"encoding="utf-8" ?>
<linkler>
 <link>ugurkizmaz.com</link>
 <link>yazilimdevi.com</link>
 <link>yazilimdilleri.com</link>
 <link>engindemirog.com</link>
 <link>salihdemirog.com</link>
 <link>barisakkurt.com</link>
 <link>cs.com.tr</link>
 <link>alibabaoglan.com</link>
 <link>alperocalan.com</link>
 <link>mehmetduran.com</link>
 <link>cafermenderes.com.tr</link>
 <link>gokhanbesler.com</link>
 <link>yakupbugra.com</link>
 <link>gazi.edu.tr</link>
 <link>canliegitim.net.com</link>
 <link>google.com.tr</link>
 <link>milliyet.com.tr</link>
 <link>hurriyet.com.tr</link>
 <link>sabah.com.tr</link>
 <link>haberturk.com</link>
 <link>sahibinden.com</link>
 <link>gittigidiyor.com</link>
</linkler>

Şimdi projemize “LinkServis.svc” isminde AJAX-enabled WCF Service ekleyelim.

Şimdi LinkServis sınıfımızın kodlarını aşağıdaki gibi düzenleyelim.

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class LinkServis
{
    [OperationContract]
    public List<string> Getir_Linklerim(string baslangic)
    {
        XDocument xmlLinkler = XDocument.Load(HttpContext.Current.Server.MapPath("Linkler.xml"));
        var linkler = (from link in xmlLinkler.Element("linkler").Elements("link")
                       where link.Value.StartsWith(baslangic)
                       select link.Value).ToList();
        return linkler;
    }
}

1. xmlLinkler değişkenimiz ile Linkler.xml dosyasına erişim sağlıyoruz.

2. linkler değişkenimizde geri döndüreceğimiz “baslangic” ile başlayan linklerimiz yer almaktadır. Bu işlemi gördüğünüz gibi LINQ sorgusuyla gerçekleştik. <linkler>’in altındaki tüm <link>’lerden <link>’in değeri “baslangic” ile başlayanları alıyoruz.

3. Sonuç olarak linkler string listemizi döndürüyoruz.

Burada dikkat edilmesi gereken nokta, her methodun başında OperationContract attribute’ünün olduğudur. Basitçe, WCF servisimizden methodları yayınlayabilmemiz için OperationContract’ı kullanıyoruz.

Şimdi projemize Test.aspx isminde bir Web Form ekleyelim ve bu Web Form’dan LinkServis’imizi JavaScript ile çağıralım.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript">
        function Getir() {
            var baslangic = document.getElementById("txbLink").value;
            var servis = new LinkServis();
            servis.Getir_Linklerim(baslangic, Basarili, Hata);
        }
        function Basarili(sonuc) {
            var yazdir = "";
            for(var i = 0; i < sonuc.length; i++){
                yazdir += sonuc[i] + "<br/>";
            }
            document.getElementById("lbSonuc").innerHTML = yazdir;
        }
        function Hata() {
            alert("Hata");
        }
    </script>
</head>
<body>
 
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/LinkServis.svc" />
        </Services>
    </asp:ScriptManager>
    <div>
        <asp:TextBox ID="txbLink" runat="server"></asp:TextBox>
        <br />
        <input type="button" onclick="Getir()" value="Linkleri Getir" />
        <br />
        <asp:Label ID="lbSonuc" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>
</html>

Burada işlemimizi yapan Getir() methodudur.

Baslangic değişkenimizde linkimizin hangi string ifade ile başlayacağını belirliyoruz.

Servis değişkenimiz LinkServis’imiz türündendir. Servisimize erişim sağlıyoruz.

Servis.Getir_Linklerim ile servisimizdeki methodumuza erişiyoruz. Burada 2 parametre fazladan yer almaktadır. Basarili methodu servisten methodu çekme işlemi başarıyla sonuçlandıysa çalışacak, başarısız olduysa Hata methodu çalışacaktır.

Basarili methodunda ise “sonuc” listemizdeki (servisten dönen string listemiz) verileri alt alta label’da yazdırıyoruz.

Son olarak “button” ismindeki inpututmuzun “click” event’ına “Getir” methodunu bağlıyoruz.

Çalıştırıp ekranda “y” karakterini yazalım (ya da istediğiniz karakter) ve sonucu görelim.

Bu işlemi geliştirmek için textbox yerine Ajax Control Toolkit içerisinde bulunan Autocomplete kontrolünü kullanarak textbox’a her tıklandığında linklerin google aramalarında olduğu gibi gelmesini sağlayabiliriz.

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi

veysel@ugurkizmaz.com