ASP.NET AJAX 4.0 yollarında....

0 dakikada yazıldı

7996 defa okundu

Düzenle

ASP.NET 3.5 ile artık Framework'e dahil olan AJAX Extension
konusunda gelişmeler devam ediyor. ASP.NET AJAX 4.0'a ait
Preview sürümü download paketine aşağıdaki adresten ulaşabilirsiniz.
Unutmayın ki Preview (Önİzleme) sürümlerindeki özelliklerinin üretimde
kullanılması doğru olmaz ve bu özelliklerin gerçekten bir ürün olarak
Microsoft tarafından son sürümde yayınlanıp yayınlanmayacağını da kimse
garanti edemez.

http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=15511 

Peki ne gelişmeler var?

Aslında şu an için gelişmelerin neredeyse hepsi istemci taraflı
uygulamalarla ilgili. Sunucu tarafına yeni bir ASP.NET kontrolü
gelmiyor. ASP.NET AJAX Features paketindeki sunucu kontrollerinin de
AJAX'ın bir sonraki sürümünde bulunacağı beklentiler arasında.

 İstemci tarafındaki yeniliklerden faydalanabilmek için yukarıdaki
adresten download paketini bilgisayarınıza indirdikten sonra hemen
MicrosoftAjaxTemplates.js dosyasını ASP.NET AJAX destekli bir
WebForm'un HTML kısmında include etmeniz yeterli olacaktır. Bunu ister
standart HTML komutları ile yapın ister sayfadaki ScriptManager'a bir
ScriptReference ekleyin, karar sizin.

İstemci taraflı Template (Şablon) yapıları

El yapımı AJAX yolculuklarımızda belki de en can sıkıcı noktalardan biri
sürekli istemci tarafında for döngüleri içerisinde DOM ile HTML
nesneleri yaratıp uygun verileri içlerine yerleştirip sayfada
konumlarını ayarlamaktır. Keşke sunucu tarafında Repeater gibi istemci
de bir şeyler olsa da biz bir şablon hazırlayıp datayı versek, binding
işlemini de kendisi yapsa? Ne güzel olurdu değil mi? Eh olsun o zaman :)

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

        <Scripts>

            <asp:ScriptReference Path="MicrosoftAjaxTemplates.debug.js" />

        </Scripts>

    </asp:ScriptManager>

İlk önce yukarıdaki şekilde AJAX 4.0'ı sayfamıza ekleyelim. Ben
özellikle debug uzantılı dosyayı sayfama ekledim, böylece herhangi bir
hata oluştuğunda anlamlı açıklamalarla karşılaşacağız. Bu durumun
Web.Config'de Debug ayarı ile kısmen aynı olduğunu düşünebilirsiniz.

    <div id="Sablon"
class="sakla">

      Ürün Adı: <input type="text"
value="{{
Adi }}"
/> 

      Fiyatı: <input type="text"
value="{{
Fiyat + 'YTL' }}"/>
 

      <!--* if (Fiyat>5) { *-->

        Pahalıymış

      <!--* } *--><br
/>

    </div>

Bu da nesi? Karşınızda istemci tarafında şablonumuz. Bunu bir anlamda
sunucu taraflı ASP.NET Repeater kontrolünün ItemTemplate'ine
benzetebilirsiniz. Sablon adındaki DIV içerisine istediğiniz HTML
tasarımı yerleştirebilirsiniz. {{ ve }} işaretleri arasındaki komutlar
aslında birazdan verimizi bağlarken kullanacağımız veri kaynağımızda
Field'ler diyebiliriz.  Örneğin bizim veri kaynağımızda Adi ve
Fiyat adında iki özellik bulunacak. Kaynaktaki değerler {{ }}
işaretleri ile belirlenmiş yerlere otomatik olarak yerleştirilecek. {{
ve }} işaretleri arasında isterseniz ek JavaScript metodları da
kullanabilirsiniz.

      <!--* if (Fiyat>5) { *-->

        Pahalıymış

      <!--* } *--><br
/>

Bu üst kısımda gördüğünüz JavaScript kodunu biraz farklı yazmamız
gerekti. {{ ve }} işaretleri arasında JavaScript komutları
kullanabiliriz demiştik fakat burada kullanacağımız JavaScript'in
kendisinde de { ve } işaretleri bulunuyor. İşte böyle durumlarda
<!--* ve *--> işaretlerini kullanmamız gerekiyor. Buradaki
IF kontrolü hedef verideki Fiyat değeri 5'ten büyük olunca
Pahalıymış yazılmasını sağlayacak.

    <style type="text/css">

        .sakla

        {

            visibility:hidden;

            display:none;

        }

    </style>

Yukarıdaki CSS sınıfını bizim şablonumuzu sayfada görünmez yapmak için
kullanıyoruz. Bunun haricinde sayfada iki şeye daha ihtiyacımız var.
Birincisi bir düğme! Düğmeye basıldığında bu şablon üzerinden nesneler
yaratılarak sayfaya yerleştirilecek. İkincisi ise şablondan yarattığımız
nesneleri sayfada yerleştireceğimiz bir HostElement.

    <input id="TIKLA"
type="button" value="button" onclick="Yarat();" />

    <div id="BURAYA"></div>

Düğmeye basıldığında Yarat adındaki bir JavaScript fonksiyonu
çalıştırılacak. BURAYA adını verdiğimiz HTML DIV içerisine şablondan
türetilen nesneler yerleştirilecek. Sıra geldi Yarat JavaScript
fonksiyonunu yazmaya.

    function Yarat()

    {

        var Sablonum = new
Sys.Preview.UI.Template.getTemplate($get("Sablon"));

        Sablonum.createInstance($get("BURAYA"), {Adi: "XX", Fiyat: "34"});

        Sablonum.createInstance($get("BURAYA"), {Adi: "XX", Fiyat: "2"});

    }

Görüldüğü olay aslında çok kolay. İlk satırda Sablonum adında bir
değişkene Sablon üzerinden Template nesnesini yaratıyoruz.
getTemplate metoduna $get ile sayfadaki şablonu içeren DIV
elementini vermemiz yeterli oluyor. Sonrasında bu şablon üzerinden yeni
nesneler üretmemiz gerek. Bunun için createInstance metodunu
kullanacağız. createInstance metodu toplamda iki parametre alıyor;
üretilen nesne nereye yerleştirilecek ve üretilirken hangi veri kaynağı
kullanılacak. İlk parametreye $get ile sayfadaki DIV'i bulup
veriyoruz, ikinciye ise bir JSON verisi aktarıyoruz. Burada kolaylıkla
ASP.NET AJAX'daki PageMethodlardan dönen verilen de aktarılabilir.

Daha kolay olamazdı.
Daha kolay olamazdı.

Başka, başka?

XML ile declarative programlama AJAX'ın yıllardan beri konuşulan
altyapılarından biri. İlk konuşulduğu şekli ile olmasa da ilginç bir
yapı ile karşımıza çıkması olası. Şu an için bu konularda örnekler yapıp
ilerlemek için biraz erken sayılabilir. DataView gibi bazı kontrollerin
istemci taraflı sürümlerinin framework'e dahil edilmesi bile dedikodular
arasında. Zamanla ufukta güneş açtıkça gelişmeleri tabi ki sizlerle
paylaşıyor olacağım. Şimdilik bu kadarı ile yetinmeye çalışalım ;)

Hepinize kolay gelsin.