ASP.NET Ajaxile Zengin İnternet

Uygulamaları Geliştirme

Uğur UMUTLUOĞLUMicrosoft MVP(ASP.NET)

Uğur Umutluoğlu

INNOVATakım Lideri ve Uygulama Geliştirme Danışmanı

www.umutluoglu.comugur@nedirtv.com

twitter.com/umutluoglufriendfeed.com/umutluoglu

Biraz nostalji – 1998-1999...

Biraz nostalji – 2003-2004...

Ve Bugün...

Gündem

Microsoft AJAX CDN Microsoft Ajax Library Nedir? İstemci Taraflı Data-Binding jQuery Entegrasyonu Control Toolkit Bileşenleri

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>

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

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

ASP.NET AJAX / AJAX Library

System.Web.Ajax

AjaxControlToolkit

MicrosoftAjax

MicrosoftAjax.Extended

Server Client

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

İ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

İstemci Taraflı Veri Şablonları

DataView nesnesi, istemci tarafındaki veri şablonlarına veriyi yükler

<div class="imageslist sys-template" > <span class="namedlistitem"> <img sys:src="{{ Uri }}"/> <div>{{ Name }}</div> </span></div>

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

İstemci Taraflı Veri Yükleme

jQuery Entegrasyonu

Kütüphane içerisindeki fonksiyonlar jQuery nesneleri ile entegre şekilde kullanılabiliyor

<script type="text/javascript"> Sys.require([Sys.components.watermark, Sys.scripts.jQuery]); Sys.onReady(function() { $(".text1").watermark(“Adınızı yazınız", "watermarked"); });</script>

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);});

DEMO

İstemci Taraflı Data-BindingObservable Nesnelerle ÇalışmaControl Toolkit Bileşenleri(Client & Server)

Kaynak

http://www.asp.net/ajax/

Soru & Cevap

Teşekkürler…