Sermin'in Bilgi Paylaşımı..

 AJAX Timer Kontrol web sayfasında herhangi bir güncelleme görevi gerçekleştirmek için zaman aralığı belirleyen bir kontroldür. Bizim belirlediğimiz periyotlarla aktif olarak sürekli  postback yapmamızı sağlar. GenllikleUpdatePanellerle birlikte kullanılırlar. Sayfamızın kısmi olarak güncellenmesini sağlarlar. Örnek vermek gerekirse sayfa içinde saat görüntülemek, slayt göstermek, bir oyun içinde topu sürekli hareket ettirmek yada sayfa içinde yapılacak bir işlem için bekleme yapmak gerktiğinde kullanılabilecek önemli bir kontroldür.

Daha iyi kavrayabilmemiz açısından bu  kontrolü basit bir örnekle ele almaya çalışacağız. Bu örnekte yapacağımız şey sayfanın başında saniyeleri gösteren bir saat ve hemen altında bizim hazırladığımız klasör içindeki resimlerden beş saniyede bir rasgele seçilerek oluşturulan bir slayt.

VisualStudio içinde projemizi AJAXEnabledWebApplication olarak başlatıyoruz. Dizayn sayfasına bir adet update panel, panel içine bir tane Label ve bir tanede Timer kontrolü sürüklüyoruz. Bu kontrolün özelliklerine bakılınca Interval özelliğini görüyoruz. Bu özellik Timer’ın kaç milisaniyede (saniyenin binde biri)  bir tetikleneceğini gösteriyor.

  

Event (olay)’larına baktığımızda Tick görüyoruz bunun karşısına iki kez tıkladığımızda Default.aspx.cs sayfasına

protected void Timer1_Tick(object sender, EventArgs e)      {         Label1.Text = DateTime.Now.ToString();      }

kod parçasını yazarak projemizi çalıştırdığımızda sayfamızın içinde artık hersaniye değişen sistem saatimizi gösteren bir saatin mevcut olduğunu görürüz.

Sayfamıza bir tane de slayt ekleyelim. Bunun için önce proje içine bir Resimler klasörü ekleyelim. Resimlerin rasgele seçilmesi sağlayabilmek için resim isimlerinin sıralı olması gerekmekte. Örneğin resim_1, resim_2, resim_3, … gibi. Dizayn sayfamıza 1 tane daha update panel, timer kontrol ve image ekliyoruz. ImageUrl tanımlıyoruz.

<asp:Image ID="Image1" runat="server" ImageUrl="~/Resimler/resim_1.gif" />

Timer Kontrolün resimleri 5 saniyede 1 değiştirmesi için  için Timer2’nin Interval özelliğine 5000 yazıyoruz. Update panelin Triger Kolleksiyonunu aşağıdaki gibi düzenliyoruz.

Timer2’nin Tick eventi üzerine iki kez tıkladıktan sonra Default.aspx.cs sayfası içine

protected void Timer2_Tick(object sender, EventArgs e)       {         Random RasgeleResimlerim = new Random();         int i = RasgeleResimlerim.Next(1, 5);         Image1.ImageUrl = System.String.Concat("Resimler/resim_", i.ToString(), ".gif");       }

Kod bloğunu yazıyoruz. Burada Random sınıfından yararlanarak i değişkenine bir ile beş arasında bir değer tanımlıyoruz (bu sayıda olmasının nedeni resim klasörüne beş tane resim koymam) sonrasında da resimlerin görüntülenmesi amacı ile bu değişkeni Image1.ImageUrl ile dosya yolu bulmasında kullanıyoruz.

Projeyi çalıştırdığımızda sayfanın başında bir tarih saat göstergesi ve alttada beş saniyede değişen bir slayt yer alıyor.

 

 

Bu yazımızda AJAX ExtenderTimer Kontrolü anlamaya çalıştık. Web sayfamız içine sayfa içeriğimizden bağımsız olarak her saniye güncellenen bir saat ve beş saniyede bir rasgele olarak değişen resimlerden oluşan bir slayt gösterisi koyduk. Umarım sizin için yararlı olmuştur.

Sermin Yağcı

http://serminyagci.blogspot.com