Makale Özeti

ASP.NET 3.5'in gelmesi ile beraber yavaş yavaş yeni AJAX uygulamalarımızı da bu yeni platforma taşımamız gerekiyor. Hazır .NET Framework 3.0 ile beraber gelen WCF'in uygulama araçları çerçevesindeki desteği de Visual Studio 2008 ile beraber sağlamlaşmışken artık AJAX uygulamalarında da klasik web servisleri yerine WCF kullanmanın zamanı gelmiş demektir. Bu yazımızda tüm bu detayları inceliyor olacağız.

Makale

ASP.NET 3.5'in gelmesi ile beraber yavaş yavaş yeni AJAX uygulamalarımızı da bu yeni platforma taşımamız gerekiyor. Çoğunuzun Visual Studio 2008'e ait Express sürümlerini hemen bilgisayarlarınıza indirdiğinizden eminim. Bu yazımda bahsetmek istediğim nokta WCF servisleri ile ASP.NET AJAX entegrasyonu. Aslında bildiğimiz üzere WCF hiç de yeni bir teknoloji değil. .NET Framework 3.0 ile uzun süredir hayatımızda olan WCF maalesef gerekli yazılımcı araçlarının zayıflığı nedeniyle pek tercih edilmiyordu. Sonunda "bekleyen derviş" misali Visual Studio 2008 ile yine her şey gerekli kolaylığa kavuştu.

Bu yazımızda Visual Web Developer 2008 Express Edition kullanacağız. Yazılımı hemen ücretsiz olarak aşağıdaki adresten bilgisayarınıza indirebilirsiniz.

http://www.microsoft.com/express/download/

Visual Web Developer 2008 ile yeni bir web sitesi yarattıktan sonra eklenen ilk default.aspx dosyasına bir ScriptManager yerleştiriyoruz. Böylece artık söz konusu sayfa ASP.NET AJAX destekli bir sayfa oluyor. Malum, artık AJAX özellikleri ASP.NET 3.5 ile beraber zaten dahili olarak geliyor ve herhangi bir ek ayar veya yükleme gerektirmiyor. Sayfamızı bu hali ile bıraktıktan sonra hemen projemize bir WCF servisi ekleyelim. Bunun için "Solution Explorer" içerisinde projeye sağ tuş ile tıklayarak gelen menüden "Add new Item" dedikten sonra "AJAX-Enabled WCF Service" seçeneğini seçmemiz gerekiyor.

Projemize yeni bir WCF servisi ekliyoruz.
Projemize yeni bir WCF servisi ekliyoruz.

Projemize yukarıdaki şekli ile bir WCF servisi eklediğimizde VWD (Visual Web Developer) bizim için gerekli WCF end-point ayarlarını Web.Config içerisinde otomatik olarak yapmakla birlikte AJAX ile kullanabilmemiz için servisin gerekli JavaScript arayüzlerini de yaratmasını sağlıyor. Web.Config içerisine baktığımızda aşağıdaki ek düzenlemeleri görüyoruz.

<system.serviceModel>

  <behaviors>

    <endpointBehaviors>

      <behavior name="ServiceAspNetAjaxBehavior">

        <enableWebScript />

      </behavior>

    </endpointBehaviors>

  </behaviors>

  <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />

  <services>

    <service name="Service">

      <endpoint address="" behaviorConfiguration="ServiceAspNetAjaxBehavior"

      binding="webHttpBinding" contract="Service" />

    </service>

  </services>

</system.serviceModel>

Gelin şimdi de yeni yaratmış olduğumuz ve benim örneğimde adını service.svc verdiğim WCF servisimizin kodların bir bakalım.

Imports System.ServiceModel

Imports System.ServiceModel.Activation

Imports System.ServiceModel.Web

 

<ServiceContract(Namespace:="")> _

<AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)> _

Public Class Service

 

    <OperationContract()> _

    Public Function Topla(ByVal Sayi1 As Integer, ByVal Sayi2 As Integer) As Integer

        Return Sayi1 + Sayi2

    End Function

 

End Class

Aslında yukarıdaki kodun büyük bölümü VWD tarafından zaten otomatik olarak yerleştirilmişti. Benim tek yaptığım kendi Function'ımı yazmak oldu. Test amacıyla iki parametre alarak bunları toplayıp geri döndüren bir Function hazırladım. Bu noktada özellikle dikkat etmemiz gereken nokta bu Function'ların <OperationContract()> _ şeklinde işaretlenmiş olmasının gerektiği. Artık web servisim bittiğine göre sıra geldi default.aspx'e dönerek gerekli JavaScript kodlarını yazmaya.

İlk olarak web servisim tarafından toplanacak iki sayıyı kullanıcıdan almak üzere iki adet HTML kutusunu ve toplama işlemini tetikleyecek olan HTML düğmesini sayfama yerleştiriyorum. Sonrasında da ScriptManager'a ServiceReference olarak WCF servisimi tanıtıyorum.

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

        <Services>

            <asp:ServiceReference Path="service.svc" />

        </Services>

    </asp:ScriptManager>

    <input id="Sayi1" type="text" />

    <input id="Sayi2" type="text" />

    <input onclick="Baslat()" id="Button1" type="button" value="button" />

    </form>

Yukarıdaki kodu incelerseniz HTML Button nesnesinin Baslat adında bir JavaScript fonksiyonunu tetiklediğini görebilirsiniz. Sıra geldi bu JavaScript fonksiyonlarını yazarak web servisindeki kodumuzu asenkron olarak kullanmaya.

Visual Web Developer 2008 ile beraber gelen JavaScript Intellisense.
Visual Web Developer 2008 ile beraber gelen JavaScript Intellisense

Baslat adını verdiğim JavaScript fonksiyonumu yazarken aynen eskiden ASP.NET AJAX Extension içerisinde Web Servisilerini kullandığımız gibi WCF servisinin de sınıf ismi üzerinden tüm yazdığımız metotlara ulaşabiliyoruz. Daha da güzeli tüm bunlar tamamen Intellisense desteği ile geliyor :) Kodumuzu tamamladığımızda sayfanın tamamının kodu aşağıdaki şekilde sonlanıyor.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

 

<!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">

    <title>Untitled Page</title>

    <script type="text/javascript">

    function Baslat()

    {

        Service.Topla($get("Sayi1").value, $get("Sayi2").value,Tamamlandi);

    }

    function Tamamlandi(Data)

    {

        alert(Data.toString());

    }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

        <Services>

            <asp:ServiceReference Path="service.svc" />

        </Services>

    </asp:ScriptManager>

    <input id="Sayi1" type="text" />

    <input id="Sayi2" type="text" />

    <input onclick="Baslat()" id="Button1" type="button" value="button" />

    </form>

</body>

</html>

Baslat JavaScript fonksiyonunda $get AJAX Extension kısayol metodları ile sayfadaki Sayi1 ve Sayi2 adındaki HTML elementlerini yakalayarak içlerindeki değerleri AJAX ile asenkron olarak web servisime gönderiyorum. Gelen sonuç Tamamlandi metoduma parametre olarak geliyor ve ben de bir JavaScript mesaj kutusu ile bunu kullanıcıya gösteriyorum.

Sonuç

Görüldüğü üzere eski web servislerini kullanmak ile WCF servislerini kullanma noktasında artık pek bir fark kalmamış durumda. O nedenle "Yaşasın WCF" :)  sloganı ile hepinize kolay gelsin diyorum :)

Daron Yöndem
MCPD, MCITP, MCTS, MCSD, MCAD
MCDBA, MCP, ACP, ICSD, IEL'03
http://daron.yondem.com