ASP.NET Ajax

  • 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

                        


                    



                


            

                


                    

                        
    
                            
  • 
                                
    
                                    07
                                    
                                        Mar 2007
                                    
                                
    
                            
    • 

                        

                    


                    


                        
AJAX'ı Sunucu da çalıştırmak...



                        
                    


                    



                        

                            Egerki sunucunuzda ajax kurulu ise hiç bir sorun olmadan AJAX uygulamalarını çalıstırabilirsiniz. 

Eger kurulu degilse; 




    

  • Ajax tabanlı bir web Projesi açılır.. Ajax tabanlı bir proje degilse web configi düzenleyelelim 

  • Projenin referanslarına AJAX Extension eklenir..(Microsoft ASP.NET 2.0 AJAX Extensions Toolbox Package) 

  • System.Web.Extensions.Design.dll ve System.Web.Extensions.dll projeye eklenir...


Bu sekilde sunucu üzerinde ajax kurulu olmasa bile AJAX uygulamarını çalıstırabilirsiniz..

                        


                    



                


            

                


                    

                        
    
                            
  • 
                                
    
                                    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