Sermin'in Bilgi Paylaşımı..

Asp.Net’te Ajax Kontrollerinden Update Panel kulanım alanı bakımından çok önemli bir kontroldür. ScriptManeger kontrolü ile beraber sayfayı kısmi olarak yönetmeyi sağlar. Web sayfasında istenilen alanın yenilenmesine olanak sağladığından zaman ve .... bakımından kullanılması önemlidir.Şimdi basit bir örnekle genel olarak Update Panel ile neler yapabileceğimize bakalım.

Visual Studio içinden AJAXEnabledWebApplication bir proje açalım. Default.aspx Designer içine 3 tane label 1 tanede buton sürükleyelim. Button üzerine 2 kez tıklayarak Default.aspx.cs sayfası içine buttonClick eventi için kod bloğu oluşmasını sağlayalım. PageLoad eventi içine

protected void Page_Load(object sender, EventArgs e)

{

Label1.Text = "1.Zaman : " + DateTime.Now.ToString();

Label2.Text = "2.Zaman : " + DateTime.Now.ToString();

Label3.Text = "3.Zaman : " + DateTime.Now.ToString();

}

kod parçacığını yazıp çalıştırdığımız zaman

Şeklinde bir ekran görüyoruz bu bizim sistem saatimiz.

Defaul.aspx designer sayfasına gelip 1. ve 2. Labeller arasına 1 tane UpdatePanel sürükleyelim ve Label2 ile Button1 i bu panel içine taşıyalım. Proje çalıştırıldığında 1inci 2inci ve 3üncü zamanların aynı olduğunu görürüz. Ama 2. Zaman altındaki butonu tıklatığımız da artık 2. Zaman’ımızın butona tıklanma anı olduğunu göreceğiz. Burdan şu sonuç çıkartılıyor: Panel içine taşıdığımız kısım sayfa bütününden asenkron olarak postback oluyor.

Butonu panel içine taşımadan da böyle bir kontrol yapabilirmiyiz ona bakalım. Update Panel özellilerine baktığımız da Triggers diye bir özellik görüyoruz bu tetikleyici bize panel içini eventlerle kontrol edebilme özgürlüğü sağlıyor. Butonu dışarı aldıktan sonra UpdatePanel1 in özelliklerinden Triggers (Collection)’a tıkladığımızda karşımıza çıkan pecereden önce Add daha sonra ControlID den Button1’i seçiyoruz.

Tamam diyerek projemizi çalıştırdığımızda arada fark olmadığını görürüz. Default.aspx designer içine 1 tane daha UpdatePanel sürükleyerek 3. Zaman labelimizi içine taşıdıktan sonra da çalıştırdığımızda güncellenen satırların 2. Ve 3. Zaman olduğuna dikkat çekmek istiyorum. Sayfa içindeki UpdatePanellerden herhangi birisi için yazdığımız tetikleyici sayfa içindeki tüm update paneller üzerinde etkili olur. Buna müdahale etmek için UpdatePanel2 nin özelliklerinden seçili Always gelen UpdateMode’u Conditional olarak değiştiriyoruz. Artık Button1 e bastığımızda 3. Zaman sekmesi değişmeyecek. Son olarak UpdatePanel2 içine 1 tane daha buton sürükleyerek projeyi çalıştırdığımızda Button2 ye tıklandığında 2. Ve 3. Sekmelerin değiştiğini Button1 e basıldığında ise sadece 2. Sekmenin değiştiği görülür.

Bu yazımızda Ajax Kontrollerinde Update Panel’in genel kullanımını öğrenmeye çalıştık. Umarım size faydalı olmuştur.