1. ASP.NET Ajaxile Zengin İnternet Uygulamaları Geliştirme Uğur UMUTLUOĞLU Microsoft MVP(ASP.NET)
2. Uğur Umutluoğlu INNOVA Takım Lideri ve Uygulama Geliştirme Danışmanı www.umutluoglu.com ugur@nedirtv.com twitter.com/umutluoglu friendfeed.com/umutluoglu
6. Gündem Microsoft AJAX CDN Microsoft Ajax Library Nedir? İstemci Taraflı Data-Binding jQuery Entegrasyonu Control Toolkit Bileşenleri
7. Microsoft AJAX CDN Microsoft’un sunduğu hizmet ile Javascript dosyaları CDN üzerinden kullanılabilir Uygulama içerisinde onlarca JavaScript dosyasını barındırma zorunluluğunu ortadan kaldırıyor <script src="http://ajax.microsoft.com/ajax/4.0/MicrosoftAjax.js" type="text/javascript"></script>
8. Microsoft Ajax Library Microsoft’un yeni AJAX kütüphanesi Temel AJAX işlemleri ve Control Toolkit için birleştirilmiş iki kütüphane 200’e yakın script dosyası Platformdan ve dilden bağımsız! Açık kaynak(Open source) Microsoft’un destek verdiği bir ürün
9. ASP.NET AJAX’tan Farklılıkları Control Toolkit bileşenleri içerisinde geliyor Daha hızlı JavaScript kodu yazmak gerekiyor Sadece istemci tarafında çalışmayı destekliyor ASP.NET MVC, PHP, Ruby, JSP, HTML… gibi ortamlarda da kullanılabilir
10. ASP.NET AJAX / AJAX Library MicrosoftAjax System.Web.Ajax MicrosoftAjax.Extended AjaxControlToolkit Client Server
11. Script Loader Bu kadar kalabalık bir kütüphaneden hangi dosyaları kullanmak gerekecek? Belirtilen işlemlerle ilgili olan script dosyalarını sayfanın yüklenmesi esnasında istemciye gönderir Bu işlemler Sys.require fonksiyonu ile yapılır
12. İstemci Taraflı Veriye Erişim Client Data Access Library Web Servisleri OData (ADO.NET Data Services) MVC Controller JSON Client template'leri İki yönlü client data binding
13. İstemci Taraflı Veri Şablonları DataView nesnesi, istemci tarafındaki veri şablonlarına veriyi yükler <divclass="imageslist sys-template" > <spanclass="namedlistitem"> <imgsys:src="{{ Uri }}"/> <div>{{ Name }}</div> </span> </div>
14. İstemci Taraflı Veri Yükleme <script type="text/javascript"> var imagesList; Sys.onReady(function() { imagesList = $(".imageslist").dataView().get(0); Uc.ImagesWcfService.GetImages("Name", querySucceeded); }); function querySucceeded(results) { imagesList.set_data(results); } </script>
16. Control Toolkit Bileşenleri Control Toolkit’te yer alan sunucu kontrollerinin istemci tarafında oluşturulabilmesi Sys.require(Sys.components.colorPicker, function () { Sys.create.colorPicker("#color1", null); });
17. DEMO İstemci Taraflı Data-Binding Observable Nesnelerle Çalışma Control Toolkit Bileşenleri(Client & Server)
