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ı.
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.