Ajax Extensions 1.0 ile gelen ve sanırım en çok kullanılan kontrol olan UpdatePanel’den biraz bahsetmek istiyorum. Kendi yaptığım uygulamalarda oldukça sık kullanıyor olmam böyle bir yazı yazmam için beni tetikledi. Tetikledi derken, trigger mantığından da biraz bahsedeceğimi söylemek isterim. Bu yazıda basit bir UpdatePanel örneği ve bu UpdatePanel’i dışarıdan başka bir kontrol ile nasıl tetikleriz bundan bahsedeceğim. Umarım bir şekilde işinize yarayan bir şeyler olmuşmasını sağlar. Yapacağımız şey oldukça basit bir örnek olacak; RadioButtonList’den seçtiğimiz elemanlara göre UpdatePanel içindeki ASP.NET kontrolünü güncelleme.
Öncelikle Visual Studio ile bir ajax enabled web projesi açalım. Dikkat ederseniz açılan sayfanın kaynak kodlarına baktığınız zaman aşağıdaki gibi bir kod bloğu göreceksiniz.
Bu sayfamızda ajax kontrollerini çalıştırabilmemiz için gerekli ASP.NET kontrollerinden olmazsa olmazı. Mutlaka bu kod bloğu ajax olacak sayfalarda bulunmalı. Ajax Extensions ile birlikte gelen kontroller(UpdatePanel,UpdateProgress…) bu ScriptManager olmazsa çalışmıyor. Aşağıdaki gibi bir yapı oluşturacak şekilde toolkit’den gerekli kontrolleri sayfaya ekliyoruz.
İlk olarak UpdatePanel,içine Text property’si “Deneme” olan bir label, daha sonra altına da bir tane RadioButtonList kontrolü ekliyoruz. UpdatePanel kontrolü ne yapıyor peki? Bütün bir sayfa post back olmadan ya da refresh olmadan belli bir bölgedeki içeriği değiştirmek için ve “Partial-page rendering” olarak adlandıralan işlemler için tasarlanmış bir ASP.NET kontrolü. Belli bir bölge olarak bahsettiğim yer UpdatePanel’in yer aldığı kısım oluyor. UpdatePanel’in içine koyacağınız her hangi bir kontrolü sayfa post-back olmadan güncelleyebilirsiniz. Sanırım bu basit açıklama UpdatePanel için birazda olsa yeterli olmuştur.UpdatePanel’i ve içine az önce bahsettiğim Label’ı eklediğiniz zaman kaynak kod tarafında şu şekilde bir kod bloğu oluşacaktır.
Şimdi burda önemli olan kısım ContentTemplate olan yer. ContentTemplate tag’ı içerisindeki olan kodlar yani kontroller UpdatePanel tarafından işleme alınacak kısımdır. Yani bir işlem yaptığınız zaman post-back olmadan değişmesini istediğiniz kontrolleri ContentTemplate içeriğine yazıyorsunuz.
Şimdi bu UpdatePanel’i tetikleyecek diğer kontrolümüzü oluşturalım.Yukarıda bahsetmiş olduğum RadioButtonList bu kontrolümüz olsun. Burda dikkat etmeniz gereken şey RadioButtonList kontrolünü UpdatePanel kontrolünün dışına yani tagından sonra herhangi bir yere yazmamız.RadioButtonList’e 3 tane item ekliyoruz.Ve AutoPostBack özelliğinin true olmasına dikkat ediyoruz. Eğer true yapmazsak, ajax olayı sayfada istediğimiz gibi çalışmayacaktır. Ve ayrıca RadioButtonList kontrolündeki item’lara tıklandığı zaman olmasını istediğimiz event’i yazıyoruz, yani OnSelectedIndexChanged.
OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
Büyük
Orta
Küçük
Ayrıca kod tarafında aşağıdaki şekilde SelectedIndexChanged olduğu zaman ne olmasını istiyorsak onu yazıyoruz.
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (RadioButtonList1.SelectedValue == "Big")
{
Label1.Text = "Büyük";
}
else if (RadioButtonList1.SelectedValue == "Mid")
{
Label1.Text = "Orta";
}
else if (RadioButtonList1.SelectedValue == "Small")
{
Label1.Text = "Küçük";}
}
Oldukça basit bir şekilde, tıkladığımız item’a göre UpdatePanel içindeki Label’ı güncelliyoruz.Buraya kadar umarım herşey anlaşılır gidiyordur. Şimdi yaratmış olduğumuz RadioButtonList kontrolü ile UpdatePanel’i ilişkilendireceğiz.Yani RadioButtonList’de seçili olan item UpdatePanel’de post-pack olmadan güncellenecek. Bunun için tekrar UpdatePanel kontrolüne dönüyoruz, ve ContentTemaplate tagından sonra Triggers tagını açıyoruz. Zaten Visual Studio size bu konuda yardımcı olacaktır.
Burda dikkat ederseniz bir tane asenkron post-back tetiği yarattık. (PostBackTrigger diye bir eleman daha olduğunu göreceksiniz, bu normal post-back eventleri ile tetiklenmesini sağlar)Yani basitçe bütün sayfa komple post-back olmadan belli bir kontrol ile updatePanel’i tetikleyeceğiz. Bunun için ControlID özelliğine hangi kontrol ile tetiklemek istiyorsak onun ID’sini yazıyoruz. Burada RadioButtonList1 id’li kontrolümüz oluyor. Ayrıca bu kontrolün hangi event’i ile bu UpdatePanel’in tetikleneceğini de EventName özelliği ile belirtiyoruz. Bunada SelectedIndexChanged yazıyoruz.
Ve sayfamızı çalıştırıyoruz.RadioButtonList’de seçeneklerden birine tıkladığımız zaman sayfa postback olmadan label kontrolünün değiştiğini göreceksiniz.
Oldukça basit bir Ajax uygulaması yapmış olduk. Tabi ki bunu geliştirmek(data uygulamları, UI özellikleri gibi) sizin hayal gücünüze kalmış bir şey. Umarım bazı şeyler için yardımcı olmuştur. Her türlü sorunuz için iletişim kısmından benimle iletişime geçebilirsiniz.