AJAX

  • 24 Eyl 2007

AJAX RATING(OYLAMA) KONTROLÜ
Merhaba arkadaşlar, bu makalemizde ajax kontrol tollkit nesnelerinden rating(oylama) kontrolünün nasıl kullanıldığını inceleyeceğiz.

Açıklama

Rating kontrolü, oylamada kullanılan yıldızların sayısı ile oylama islemi yapmayı saglayan bir ajax kontrol toolkit nesnesidir. Yıldızların üzerinde gezindiginizde vereceginiz puana göre o kadar yıldız seçili gelir. Rating kontrolünün yönüyü dikey ya da yatay olarak degistirebilirsiniz. Rating kontolü ClientCallBack eventini destekledigi için oylama islemi sırasında postback islemi arkaplanda gerçeklesir. 

Örnek Kullanımı

<ajaxToolkit:Rating ID="Rating" runat="server"

    CurrentRating="2"

    MaxRating="5"

    StarCssClass="ratingStar"

    WaitingStarCssClass="savedRatingStar"

    FilledStarCssClass="filledRatingStar"

    EmptyStarCssClass="emptyRatingStar"

    OnChanged="Rating_Changed" />

Özellikleri

AutoPostBack - True ise oylama islemi yapıldıgında postback islemi gerçeklesir

CurrentRating - Rating Kontrolünün ilk degeri

MaxRating - Rating Kontolünü Max. degeri

StarCssClass - Rating kontrolünde yer alacak yıldızların özelliklerini belirleyen CSS sitili

WaitingStarCssClass - Oylama islemi yapılırken görüntülenecek CSS sitili

FilledStarCssClass - Oylama yapılırken dolu olacak yıldızlar için belirtilecek CSS sitili

EmptyStarCssClass - Bos yıldızlar için belirtilecek CSS sitili

RatingAlign - Rating kontolünün yönü, (dikey yatay)

RatingDirection -  Oylama isleminin baslangıç hizası

OnChanged - Oylama islemi yapılırken tetikleyecek olan eventin adı.

Tag - Rating'e eklenecek olan parametre.

Örnek

Kontrolümüzü tanıdık ve simdi bir örnek yapalım. Genelde oylama islemi yapılırken yıldız iconları kullanılır. Buna baglı olmadıgımızı belirtmek için ben baska bir icon kullanıyorum.

Örnegimizde kitapları listeleyecegiz ve bu kitaplara ait oylama islemlerini yaptıracagız.

 - Oylama islemi yapılırken bu resim görüntülenecek. 

* - Oylanacak degerlerde bu resim görüntülenecek.

* - Bos degerlerde bu resim görüntülenecek.

Ilk olarak yeni bir AJAX tabanlı bir web projesi açalım.

 

Projemizi olusturduktan sonra yeni örnek bir veritabanı olusturalım. Kitapevi isimli yeni bir database olusturacagım. Bu veritabanında kitaplar ve kitappuanları isimli 2 tablo olacak.

 

Kitaplar Tablosu

 

Kitap Puanları Tablosu

Tablomuzu olusturduktan sonra kitaplar tablosuna örnek 2-3 kayıt girelim J

Simdi sayfamıza bir Gridview Ekleyelim.  Gridview'in autogenaretecolumn özelligini false yapalım ve 2 adet template field ekleyelim. 1. field da kitap adı ve açıklama yer alıcak. 2. ise rating kontolü. Benim sayfam bu sekilde oldu J

 

 

Simdi rating konrolümüz için gerekli olan CSS sitilleri yazalım. Ister yeni bir sitil dosyası ekleyelim, istersenized head tagları arasına yazalım hiç fark etmez J

  <style type="text/css">

        .standart

        {      width:20px;

                    height:16px;

                    cursor:crosshair;

                    background-repeat:no-repeat;                  

        }

        .dolu

        {

                    background-image:url(images/dolu.gif);    

        }

        .bos

        {

                    background-image:url(images/bos.gif);                 

        }

        .bekle

        {

                    background-image:url(images/bekle.gif);              

        }

 

    </style>

Simdi de Rating kontrolümüzün özelliklerini yazalım;

<cc1:Rating ID="Rating1" runat="server"

                               CurrentRating="1"

                               StarCssClass="standart"

                               EmptyStarCssClass="bos"

                               WaitingStarCssClass="bekle"

                               FilledStarCssClass="dolu"

       Tag='<%# Eval("KitapID")%>'

                               MaxRating="5"

                               OnChanged="Oyla" >

                            </cc1:Rating>

Evet artık oylama islemimiz hazır J Geriye kalan 2 sey kaldı, birincisi kayıtları listelemek, ikincisi de oylama sonucunu oylar tablosuna yazmak. Ilk olarak listeleme islemini yapalım.

SqlConnection Cnn;

SqlDataAdapter Da;

DataSet Ds;

SqlCommand Cmd;

 

    private void KayitlariGetir()

    {

        Cnn = new SqlConnection("Server=localhost; Database=kitapevi; trusted_connection=yes");

        Da=new SqlDataAdapter("select * from Kitaplar",Cnn);

        Ds = new DataSet();

        Da.Fill(Ds, "tbl");

        GridView1.DataSource = Ds.Tables[0];

        GridView1.DataBind();

    }

 

    protected void Page_Load(object sender, EventArgs e)

    {

        KayitlariGetir();

    }

 

Simdi projemizi çalıstırdıgımızda

 

 Simdi oylama islemini yapalım. Yukarıda da belirttigimiz gibi Oyla isimli bir metod olusturacagız.

     public void Oyla(object sender,AjaxControlToolkit.RatingEventArgs e)

    {    

        Cnn = new SqlConnection("Server=localhost; Database=kitapevi; trusted_connection=yes");

        if (Cnn.State == ConnectionState.Closed) Cnn.Open();

        Cmd = new SqlCommand("Insert Into KitapPuanlari(KitapID, Puan) values("+e.Tag+","+e.Value+")",Cnn);

        int returnvalue = Cmd.ExecuteNonQuery();

    }

 Simdi kodumuzu çalıstıralım.

 

2. Sıradaki 2 numaralı kitaba 4 puan verdim. Oylama sırasında oylama isleminin gerçeklestiginin anlasılması için farklı bir icon koymustuk. Oda üstteki resimde görünmektedir. Bakalım oylama gerçeklesmis mi? Veritabanına gidip kontrol edelim.

 

Evet oylama islemi gerçeklesmis J 2 numaralı kitap 4 puan J

Bu makaleninde sonuna geldik. Baska bir makale de görüsmek üzere.

Sem GÖKSU

MCP | MCAD.NET | MCTS

sem.goksu@yazilimgunlugu.com

  • 24 Mar 2007

AJAX'ın Dünü Bügünü
Merhabalar bu makalemizde ajax teknolojisini ve çalışma prensiplerini inceleyeceğiz.

Baslamadan önce makalemizin içerigini göz atalım. 

  • AJAX Nedir? 
  • AJAX'IN Kullandıgı teknolojiler 
  • Klasik Çalısma Modeli 
  • AJAX Çalısma Modeli 
  • ASP.NET AJAX Nedir? 
  • ASP.NET AJAX Sunucu Kontrolleri 
  • ASP.NET AJAX Control Toolkit
Ajax Nedir?

AJAX (Asynchronous JavaSctiprt ve XML), XML ve javascript'in es zamanlı olmadan birlikte çalısması ile ortaya çıkan bir teknolojidir. Yani Sunucu ile istemci arasında asenkron(eszamanlı olmayan) haberlesme yapılmasını saglayan bir yöntemdir. Bu sayede sayfanın tamamını yenilemeden sadece bizim belirledigimiz alanları güncellenmesini saglanır. AJAX Zannedilenin aksine yeni bir teknoloji degil sadece var olan birkaç teknolojinin bir araya gelmesi ile olusturulmus bir yöntemdir.

Ajax ilk olarak Subat 2005 yılında yayınlandı ve yazılım gelistiriciler tarafından çok çabuk benimsen bir web teknolojisi haline geldi.

AJAX Hangi teknolojileri kullanır? 

HTML/XHTML : Sayfa içerikleri görümtülemek için kullanılır. 
CSS : Sayfada görüntülenecek olan verilere stiller uygulayarak biçimlendirmemimizi saglar. 
DOM : Sayfa yüklendiginde sayfaın dinamik olarak update olmasını saglar.
XML : Sunucu ve istemci aradındaki veri degisimini saglar. 
XSLT : XML'in CSS ile biçimlendirilip HTML/XHTML'e dönüstürülmesini saglar. 
XMLHttpRequest: Server ile browser'ın iletisimi saglayan nesnedir. Bu nesne sayfanın postback olmadan server ile konusmasını saglar. 
JavaScript : AJAX Teknolojisini ugulamak için kullanılan script dilidir.

Tüm bu teknolojiler ajax içerisinde kullanılır fakat bunlar arasında sadece üçünün kullanılması zorunludur: HTML/XHTML, DOM ve Javascript. Bilginin görüntülenmesi için HTML/XHTML'e ihtiyaç duyar, Sayfa refresh olmadan HTML/XHTML'de görüntülenenen bilgilerin degismesi içinde DOM'a ihtiyaç duyar. JavaScript ise sayfadaki verileri güncellemek için DOM'u yapılandırmak ve client-server iletisimini baslatmak için kullanılır. Diger teknolojiler ise AJAX'ın daha islevsel kullanılması içindir fakat kullanılması da zorunlu degildir.

Klasik Çalısma Modeli



AJAX Çalısma Modeli


Niçin Ajax Kullanırız?

  • Kullanıcılara daha interaktif web sayfalarının hazırlanması 
  • Kullanıcıya daha çabuk yanıt verilmesi 
  • Farklı kaynaklar ile entegreli çalısması 
  • Kullanılmasının ve gelistirilmesinin çok kolay olması 
  • Tüm browserlar tarafından desteklenmesi 
  • ASP.NET 2.0 ile entegreli çalıstıgı için AJAX'ı tercih ederiz.

AJAX Teknolojisi Kullanılan bazı siteler:

  • Kisisel Web Sitem :)
  • Gmail 
  • Google Map 
  • Google Suggest 
  • Live mail

ASP.NET AJAX

ASP.NET AJAX, Microsoft tarafından gelistirilmis ücretsiz bir AJAX Frameworkdür. Javascript kodlarını arasında kaybolmadan kolayca AJAX uygullamalarımızı gelistirmemize saglayan bir teknolojidir. Ilk kod adı "ATLAS" olarak duyuruldu. Fakat daha sonra ASP.NET AJAX adı altında kendi orijinal adını geri aldı. Ocak 2007 yılında full sürümü olan ASP.NET AJAX 1.0 yayınlandı.

En sık sorulan sorulardan biride AJAX yalnızca ASP.NET 2.0 sürümleri ile kullanabilmekteyiz. ASP.NET 1.1 ve ASP.NET 1.0 Sürümlerini desteklemiyor.

Istemci ve sunucu tarafında bazı bilesenlerle desteklenmektedir. Istemci tarafında istemci frameworkleri ve servisleri bulunmaktadır. Sunucu tarafında da sunucu frameworki bulunmaktadır. Bu framework içerisinde sunucu kontrolleri, uygulama servisleri ve web servisleri bulunmaktadır.



AJAX Sunucu Kontrolleri

Script Manager
Script Manager, Ajax script kütüphanelerini ve script dosyalarını yönetir. Ajax kullanacagımız her sayfaya bu kontrolü eklemeliyiz.

Update Panel
Sayfadaki içeriklerin postback olmadan parçalar halinde güncellenmesini saglayan ajax kontolüdür. Update panel içerisindeki verilerin güncellenmesi gerektiginde sayfa da postback islemi olmadan sadece update panel içerisindeki veri güncellenir.
Triggers:
Update panel dısarısında yer alan kontrellerin update panel içerisindeki verileri güncellemeleri gerektiginde trigger kullanırız. 2 tip trigger vardır. AsyncPostBackTrigger ve PostBackTrigger.

AsyncPostBackTrigger: Hedef kontrolü ve tetiklenecek olan eventi belirtirerek ilgili updatepanel içerisindeki verinin postback olmadan(asenkron) güncellenmesini saglar.

PostBackTrigger: Hedef kontolü belirterek Updatepanel içerisindeki verinin postback olarak(senkron) güncellenmesini saglar.

Update Progress
UpdatePanel güncellendiginde yada içerik degistiginde browser da kullancıyı bilgilendirme amaçlı kullanacagımız kontroldür.

AJAX Control Toolkit

AJAX Kontrol toolkit, Istemci taraflı çalısan ASP.NET AJAX kontolleri ve extenderleri olusturmamızı saglayan bir yapıdır. Kolayca Kisisel Kontroller ve extenderler olusturabilmemiz için güçlü bir SDK'si vardır. AJAX kontrol Toolkit'i http://ajax.asp.net adresinden indirebilirsiniz. Microsoft zamanla 70-80 arasında standart olarak kullanılabilecek kontrol gelistirmeyi planlıyor.

Beni dinlediginiz için tesekkür ederim.

SEM GÖKSU
MCP(Microsoft Certifed Professional)
MCAD(Microsoft Certifed Application Developer)
MCTS(Microsoft Certifed Technolgy Specialist)
MVP(Microsoft Most Valuable Professional)
info@semgoksu.com  
www.semgoksu.com

  • 09 Mar 2007

AJAX ListSearch Extender
Merhaba arkadaslar, bu makalemizde ajax control toolkit’innesnelerinden Ajax ListSearch Extenderi ve özelliklerini inceleyecegiz.

ListSearchExtender

List SearchExrender kontrolü ASP.NET Dropdownlist ve Listbox itemleri içinde yazarak aramayapmamizi saglar. Listeleme elemanlari üzerine tiklandiginda Bir uyari mesaji çikarörnegin; arama için birkaç harf giriniz. Bu uyariya sitil verebilir vepozisyonun belirleyebiliriz.

Kullanimi

<ajaxToolkit:ListSearchExtender id="LSE" runat="server"
TargetControlID="ListBox1"
PromptText="Type to search"
PromptCssClass="ListSearchExtenderPrompt"
PromptPosition="Top" /> 
Özellikleri
PromptText - Listeleme elemanina tiklandigindagösterilecek olan mesaj 
PromptCssClass - Uyari mesajina uygulanacak olan sitil adi
PromptPosition - Uyari mesajinin gösterilecegi yer. Bottomve Top degerlerini alir.
Örnek
Buanlattiklarimizi bir örnekle devam ettirelim. Örnegimizde Dropdownlist veListbox elemanlarinda arama yapacagiz. Örnegimize baslayalim ve ilk olarak birAJAX Projesi açalim. 
Simdiolusturdugumuz bu sayfaya 1 adet Dropdownlist ve Listbox ekleyelim. Bukontrollerde arama yapmak için 2 adet de ListSearch Extender ekleyelim. Benimolusturdugum sayfa asagidaki gibidir.
 
Benlisteleme elemanlarina bir miktar item ekledim. Bu elemanlari Databaseden dedoldurabiliriz. Ama suan için buna gerek yok.
Simdi ilkolarak Listbox için ListSearch Extenderinin gerekli propertylerini yazalim.
<cc1:ListSearchExtender ID="ListSearchExtender2" runat="server"TargetControlID="ListBox1"PromptText="Aramayapmak için yaziniz..." PromptPosition="Top" PromptCssClass="modalPopup">
</cc1:ListSearchExtender>
Yukarida ="text/css">
.modalPopup {
background-color:#ffffdd;
border-width:2px;
border-style:solid;
border-color:Gray;
padding:0px;
}
</style>
Simdidedropdownlist için ListSearch Extender için gerekli kodlari yazalim. Hiçbir farkyok sadece TargetControlID Propertysini degistirecegiz. 
<cc1:ListSearchExtender ID="ListSearchExtender1" runat="server"TargetControlID="DropDownList1"PromptText="Aramayapmak için yaziniz..." PromptPosition="Top" PromptCssClass="modalPopup">
</cc1:ListSearchExtender>
Simdi buyazdiklarimizi test edelim;
Simdi aramaiçin bir seyler yazalim; örnegin " Sem " : )
Simdi dediger DropdownList' deneyelim;
Simdi aramayapmak için bir seyler yazalim;
Gerçektençok kullanisli ve ise yarayacak bir kontrol : ) Projelerinizde güle gülekullanin : )
Bumakalenin de sonuna geldik, baska bir makalede görüsmek üzere basari ve iyigünler dilerim. 
SemGÖKSU
MCP | MCAD.NET | MCTS | ASP.NET MVP
ÖrnekKodlar için mail adresimi kullanabilirsiniz
askisem@hotmail.com
Kaynaklar 
http://ajax.asp.net

                        


                    



                


            

                


                    

                        
    
                            
  • 
                                
    
                                    06
                                    
                                        Mar 2007
                                    
                                
    
                            
    • 

                        

                    


                    


                        
AJAX SlideShow Extender 



                        
                    


                    



                        

                            Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden Ajax SlideShow Nesnesini ve özelliklerini ele alacağız... 


Açıklama 

Slideshow extender resimleri slayt olarak göstermemize yarayan ajax nesnesidir. Sayfamıza ekleyecegimiz butonlar ile slaytı baslatabilir ve resimler arasında gezinebilirsiniz. Slaytı otomatik baslatabilir ve resimler arasında dönmek için nesnemizi konfigüre edebiliriz. Resimlerimizi göstermek için bir web servisi yada slide show için image destekleyen bir metod kullanabiliriz. Slideshow 3 sn'de bir bir sonraki resmi açar. Eger sona gelmisse yeniden ilk resme döner. 

Bu kontol ile aynı windows uygulamalarındaki gibi resimleri slayt seklinde izleyebiliriz. Ayrıca we sayfalarımızda çok daha sık fotogaleriler olusturabiliriz. 

Kullanımı 


Özellikleri 

· SlideShowServiceMethod - AjaxControlToolkit.Slide döndüren bir Web servisi çagırır. Bu web servisi resimlerin pathini ve diger bilgilerini içerir. 

Örnek web servisi 

[System.Web.Services.WebMethod] 

[System.Web.Script.Services.ScriptMethod] 

public AjaxControlToolkit.Slide[] GetSlides() 

{ ... } 

· SlideShowServicePath - Resimler ile ilgili bilgileri döndürecek olan web servisinin adı. 

· NextButtonID - Bir sonraki resme geçmek için kullanılacak olan button'un ID'si 

· PlayButtonID - Slaytı baslatmak için kullanılacak olan button'un ID'si 

· PreviousButtonID - Bir önceki resme geçmek için kullanılacak olan button'un ID'si 

· PlayButtonText - Slayt basladıgında baslat butonuna verilecek olan text'in özelligi. 

· StopButtonText - Slayt durduruldugunda durdur butonuna verilecek olan text'in özelligi. 

· PlayInterval - Slayt için resimler arasındaki geçis süresi. 

· ImageDescriptionLabelID - Resimlerin bilgilerini görüntülemek için kullanılacak olan Label'in ID'si 

· Loop - Degeri True ise Resimlerin sürekli dönmesini saglayan özellikdie. 

· AutoPlay - Degeri True ise Sayfa açıldıgında slayt otomatik olarak çalısır. 

Kontrolümüz ile ilgili bilgileri aldıktan sonra bir örnek yapalım. Sizlerden gelen feedback'ler dogrultusunda bu makalede basit bir örnek ile konuyu pekistirecegim. 

Örnek: Örnegimizde basit bir image galeri olusturup bu extender'i kullanacagız. Bunun için ilk olarak yeni bir Ajax Web Site olusturalım. 



Projemizi olusturduktan sonra sayfamıza sayfamıza 3 adet buton, 1 image, 1 label ve 1 de slideshow extender'i ekleyelim. 



Simdi bize resimleri saglayacak olan web servisini yazalım. Bunun için sayfamıza yeni bir web servisi ekleyebiliriz ama ben aynı sayfada static bir servis yazıp onu kullanacagım. 

[System.Web.Services.WebMethod] 

[System.Web.Script.Services.ScriptMethod] 

public static AjaxControlToolkit.Slide[] GetSlides() 

{ 

return new AjaxControlToolkit.Slide[]{ 

new AjaxControlToolkit.Slide("SlidePictures/1.jpg", "XP Theme 1", "XP Theme 1"), 

new AjaxControlToolkit.Slide("SlidePictures/2.jpg", "XP Theme 2", "XP Theme 2"), 

new AjaxControlToolkit.Slide("SlidePictures/3.jpg", "XP Theme 3", "XP Theme 3"), 

new AjaxControlToolkit.Slide("SlidePictures/4.jpg", "XP Theme 4", "XP Theme 4"), 

new AjaxControlToolkit.Slide("SlidePictures/1.jpg", "XP Theme 5", "XP Theme 5")}; 

} 

Olusturdugumuz bu web servis bize Slaytta kullanacagımız resimlerin bilgilerini saglıyor. Simdi Slideshow kontrolünün özelliklerini yazalım. 



Simdi bu örnegi test edelim. 



Simdi ileri diyelim. 



Iste çok isimize yarayacak bir kontrol daha J Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim. 

Not: Ajax Sample Site'daki örnekleri incelemeniz size daha farklı fikirler verecektir. 

Sem GÖKSU 
MCP | MCAD.NET | MCTS | ASP.NET MVP 

Örnek Kodlar için mail adresimi kullanabilirsiniz 
semgoksu@semgoksu.com 

Kaynaklar 
http://ajax.asp.net 
                        


                    



                


            

                


                    

                        
    
                            
  • 
                                
    
                                    20
                                    
                                        Şub 2007
                                    
                                
    
                            
    • 

                        

                    


                    


                        
AJAX ve AJAX Control Toolkit Kurulumu



                        
                    


                    



                        

                            Merhaba arkadaşlar, bu makalemizde ajax ve ajax control toolkit’in nasıl kurulduğundan bahsedeceğiz.

AJAX ve AJAX Control Toolkit Kurulumu 

Yazılıramı takip edenler de bilirler, simdiye kadar hep ajax control toolkit nesnelerinden bahsettim. Ama gelen sorular ve istekler üzerine bu makale de ajax özelliklerinin ve ajax control toolkit nesnelerinin Visual Studio'ya nasıl ekleneceginden bahsedecegim. 

Ilk olarak web uygulamalarımızda AJAX uygulamalarını gelistirebilmek için ASP.NET 2.0 AJAX Extensions 1.0'i yüklememiz gerekir. 

ASP.NET 2.0 AJAX Extensions 1.0'i asagıdaki adresten indirelim. 

ASP.NET 2.0 Ajax Extension 1.0 



Next, Next, Next... 



Evet AJAX 2.0 Extension'ı kurduktan sonra, su anda en son versiyonu yayınlanan ASP.NET 2.0 AJAX Futures January CTP yi indirelim. Bu bize ASP.NET 2.0 AJAX yada ASP.NET AJAX Control Toolkit için yeni özellikleri yüklememizi saglar. ASP.NET 2.0 AJAX Futures January CTP yi asagıdaki adresten indirelim. 

ASP.NET 2.0 AJAX Futures January CTP

Simdi bunu kuralım. 



Klasik olarak Next, Next, Next... 



ASP.NET 2.0 AJAX Futures January CTP yi de kurduktan sonra geriye kalan tek sey Control toolkit nesnelerinin Visual studio'ya eklenmesi. Ajax Control Toolkit'i asagıdaki adresten indirelim. 

Ajax Control Toolkit



Simdi indirdigimiz bu dosyalara göz atalım. 



Ajax contollerinin yer aldıgı sample site ve derlenecek olan projelerin yer aldıgı bir klasör bulunuyor. Simdi AjaxControlToolkit Projesini açalım ve projemizi derleyelim. 



Projemizi derledikten sonra Visul Studio Toolbox üzerinde yeni bir tab olusturalım. 



Bu tab üzerinde sag tıklayalım ve açılan pencereden Choose Item 'ı Seçelim 



Açılacak olan pencere de browse tıklayalım ve derlemis oldugumuz AjaxControlToolkit.DLL dosyasını seçelim. 



Open seçenegini seçelim. 



Gördüldügü gibi Ajax nesneleri artık tüm projelerimiz de kullanmak üzere hazır : ) 

Simdi Visual Studio üzerinde yeni bir proje açmaya deneyelim; 



Artık projemiz de ajax özelliklerini ve ajax nesnelerini kullanabiliriz... 

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim. 

Sem GÖKSU 
MCP | MCAD.NET | MCTS 
www.semgoksu.com 

Örnek Kodlar için mail adresimi kullanabilirsiniz 

semgoksu@ semgoksu.com 

Kaynaklar 

http://ajax.asp.net