ASP.

NET AJAX – ScriptManager,UpdatePanel,UpdatePro

Eğitmen: Nurettin Şimşek
Tarih: 05.07.2007
Bu makalede ASP.NET Ajax kontrollerinden Update Panel kontrolünün nasıl kullanıldığı
Özet:
anlatılmaktadır
Arkadaşlar merhaba...

Bu makalede sizlere UpdatePanel kullanarak asenkron metod çağırma işlemi nasıl yapılır,tüm sayfa postback 
edilmeden sayfanın sadece bir kısmının yenilenmesi nasıl yapılır onu anlatacam.Bu bahsettiğimiz işleri yapabilen 
teknoloji ASP.NET Ajax’dır.Eğer daha önce bilgisayarınıza ASP.NET Ajax framework’ünü yüklemediyseniz 
http://ajax.asp.net/downloads/default.aspx?tabid=47 adresinden ASP.NET 2.0 Ajax Extensions 1.0’ı bilgisayarına 
yükleyin.

Bilgisayara yükleme işlemi bittikten sonra örnek senaryomuz üzerinden UpdatePanel kullanarak asenkron postback 
işleminin nasıl yapıldığını görelim.

  
ScriptManager ‐ UpdatePanel
Örneğimizde ASP.NET Ajax kontrollerini ön plana çıkarmak ve kodlarımızı ve makalemizi uzatmamak adına çok basit 
bir senaryo üzerinden gideceğiz.Veri tabanı ile herhangi bir bağlantı yapılmayacaktır. Senaryomuzda, yakın 
arkadaşlarımızın isim listesini hazırlayacağımız bir form tasarlayacağız.Öncelikle Visual Studio 2005’i açıp File‐>New‐
>Web Site dedikten sonra açılan pencerede ASP.NET AJAX‐Enabled Web Site projesini seçip “AjaxControls” ismini 
projemize veriyoruz.Web sitemizi localhost üzerinde(IIS’de) açalım.İlk olarak açılan Default.aspx sayfasına 
baktığımızda üzerinde bir adet ScripManager olduğunu görürüz.Sayfa üzerinde eğer Ajax kontrollerini kullanacak isek 
mutlaka ScriptManager olmalıdır.Formumuza bir adet Table ekleyip Table’ın içerisine bir adet UpdatePanel ve 
UpdatePanel’in içerisine de bir adet  GridView kontrolü koyuyoruz.Bunun dışında formun geri kalanını aşağıdaki gibi 
tasarlayalım;

Not : ASP.NET Ajax kontrollerine Toolbox’da Ajax Extensions sekmesinden ulaşabilirsiniz.
Formumuzu bu şekilde tanımladıktan sonra isimleri tutacağımız bir liste oluşturmalıyız.Page_Load metoduna 
aşağıdaki kodu yazıyoruz;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
StringCollection names = new StringCollection();
Session["Arkadaslar"] = names;
}
}

Burada bir adet StringCollection nesnesi oluşturulmaktadır. StringCollection nesnesi sadece string değerleri 

tutan bir kolleksiyondur.Daha sonra ulaşmak üzere oluşturduğumuz names isimli nesneyi Session’a “Arkadaşlar” 
anahtar kelimesiyle birlikte atıyoruz.Eklediğimiz bütün arkadaşların isimleri bu kolleksiyonda tutulacaktır.Bu 
kolleksiyonu da GridView üzerinde göstereceğiz.Ekle butonuna bastığımızda işletilecek olan kod aşağıdaki gibidir;
protected void lnkEkle_Click(object sender, EventArgs e)
{
StringCollection names = (StringCollection)Session["Arkadaslar"];
names.Add(txtArkadas.Text);
BindGridView();
txtArkadas.Text = String.Empty;
}

Bu metod da öncelikle, Page_Load metodunda Session’a eklediğimiz kolleksiyonu alıyoruz.Ardından TextBox içine 
yazılan değeri bu kolleksiyona ekleyip BindGridView()metodunu çağırıyoruz.Bu metod kolleksiyonunun içeriğini 
GridView’da göstermektedir. BindGridView()metodu aşağıdaki gibidir;
private void BindGridView()
{
StringCollection names = (StringCollection)Session["Arkadaslar"];
gvArkadaslar.DataSource = names;
gvArkadaslar.DataBind();
}

Şimdi sırasıyla Ahmet,Mehmet,Veli ve Ayşe isimlerini listemize ekleyelim.İsimleri ekledikten sonraki ekran 
görüntümüz aşağıdaki gibi olacaktır;

Ekle butonuna bastığımızda web form üzerinde senkron bir şekilde post back işleminin gerçekleştiğini 
görmüşsünüzdür.Öyle ki biz Ekle butonuna her bastığımızda post back işlemi gerçekleşir ve sayfa server’dan tekrar 
talep edilir.Bu durumda normal sayfa yaşam döngüsü(Page‐Cycle) gerçekleşir ve form üzerindeki her bir kontrol 
tekrar render edilir(html çıkıtısı üretilir).Bu durum, ASP.NET Ajax kontrollerini kullanmadan önceki 
durumdur.Formumuzun üzerinde her nekadar ScriptManager ve UpdatePanel kontrolleri olsa da hala işlevselliğe 
sahip değillerdir.Her bir ekleme işleminde sayfa tamamen temizlenir ve yeni sayfa server’dan gönderilir.Biz istiyoruz 
ki sayfa tamamen yenilenmesin de, sadece UpdatePanel kontrolü arasındaki bölüm yenilensin ve post back asenkron 
bir şekilde işletilsin.Yani sayfa server’a gidip render edilirken arayüz görünmeye devam etsin yani sayfa tamamen 
temizlenmesin.Bu durumda sadece UpdatePanel kontrolü içerisinde kısım render edilecek diğer kısımlar render 
edilmeyecektir.Şimdi bu işin nasıl yapıldığına bakalım.

Ekle butonuna basıldığında asenkron bir şekilde post back gerçekleşmesi istiyor isek UpdatePanel içerisinde bir adet 
Trigger oluşturmalıyız.Bunu yapabilmek için UpdatePanel kontrolünün Properties’lerinden Triggers’a 
tıklıyoruz.Açılan pencerede bir adet AsyncPostBack trigger’ı ekliyoruz.Ardından bu trigger’ın ControlID değerini 
lnkEkle,EventName değerini ise Click olarak belirliyoruz.

Bu işlemi Design tarafında bu şekilde yapabilrsiniz.Html tarafında da bu işi gerçekleştirebilirsiniz.Html  tarafında 
UpdatePanel’in görünümü şu şekildedir;

Not: Normal html kodlarımız bu kadar değildir,ben kod okunabilirliğini arttırmak adına görsellikle ilgili html kodlarını 
sildim.
Burada gördüğünüz gibi UpdatePanel tag’ı içerisinde 2 adet tag vardır.Bunlar ContentTemplate ve Triggers ‘dır.
Triggers tag’ı içerisinde bir adet AsyncPostBackTrigger trigger’ı oluşturulmuştur.Bahsettiğimiz üzere ControlID 
değeri lnkEkle ve EventName değeri Click olarak belirlenmiştir.Bu şu demektir; lnkEkle butonunun Click eventi 
tetiklendiğinde sadece UpdatePanel içeriği yenilenecektir.

Sayfamızı tekrar çalıştırdığınızda C# kodunun çalıştığını fakat sayfanın tamamının yenilenmediğini ve sayfanın 
asenkron bir şekilde post back edildiğini göreceksiniz.Yani sayfa post back olduğu anda tamamen temizlenip 
tekrardan yenilenmeyecektir.İlginç bir nokta daha var ki,işin mantığını anlamanız açısından sonra derece 
önemlidir.Biz Ekle butonuna bastığımızda TextBox içeriğini temizlememize rağmen TextBox içeriği 
temizlenmemektedir.Yani Ekle butonuna basıldığında C# kodları çalışıyor fakata sadece UpdatePanel içeriği 
yenilendiğinden dolayı ve TextBox UpdatePanel’in dışında olduğundan dolayı yenilenmemektedir.

UpdatePanel dışına eklediğimiz kontroller için bu şekilde bir çalışmanın gerçekleşmesini istiyor isek her biri için ayrı 
ayrı Trigger oluşturmamız gerekmektedir fakat UpdatePanel içerisine alınan bir kontrol(örneğin bu örneğimizde Ekle 
butonu) otomatik olarak asenkron işletilecek ve Trigger tanımlamamız gerekmeyecektir.

Peki UpdatePanel içerisindeki kontrollerin otomatik olarak asenkron işletilmesini istemiyor isek yani UpdatePanel 
içindekiler için otomatik Trigger tanımlamanmasını istemiyor isek UpdatePanel’in ChildrenAsTriggers özelliğini false 
olarak ayarlıyoruz.

UpdatePanel’in diğer bir önemli özelliği de UpdateMode özelliğidir.UpdateMode özelliği 2 değer almaktadır.Eğer 
Always değeri seçilirse,sayfa üzerinde oluşacak bütün post back’lerde UpdatePanel içeriği güncellenecektir.Fakat 
Conditional olursa UpdatePanel içeriğinin güncellenmesi için bazı koşulların sağlanması gerekir.Bunlar şunlardır;

• UpdatePanel için tanımlanmış bir Trigger’ın tetiklenmesi(örneğimizde Ekle butonunun davranışı)
• UpdatePanel’in Update() metodunun çağrılşması.
• UpdatePanel içerisine konulmuş kontrollerden kaynaklanan bir post back işleminin gerçekleşmesi.

Not: Sayfa üzerinde asenkron post back işlemlerinin gerçekleşmesini istemiyor iseniz yani sadece UpdatePanel 
içeriğinin değilde her seferinde tamamının render edilmesini kısaca sayfamızın eski üsul çalışmasını istiyor isek 
ScriptManager’ın EnablePartialRendering özelliğini false olarak ayarlayabiliriz.

Not: GridView’a eklediğiniz Sorting,Paging işlemleri de asenkron bir şekilde işletilecektir.

Not: Her bir sayfaya ayrı ayrı ScriptManager koymak istemiyor iseniz,ScriptManager’ı Master Page içerisine 
UpdatePanel’i de istediğiniz sayfaya yerleştirebilirsiniz.

  
UpdateProgress
Örneğimizde TextBox’dan bir ismi alıp kolleksiyona eklemek çok uzun sürmemektedir fakat öyle işlemlerimiz olabilir 
ki çok uzun sürebilir.Mesala veri tabanından çok fazla kaydı aynı anda getirmemiz uzun sürebilir veya herhangi bir 
web service’den veri çekmemiz çok uzun sürebilir.Ve bu işlemler uzun sürerken,o an işlemin devam ettiğini 
kullanıcıya bildirmek isteyebiliriz.Bu işlemi ASP.NET Ajax kontrollerinden UpdateProgress kontrolünü kullanarak 
yapabiliriz.

Ajax Extensions sekmesinden UpdateProgess kontrolünü alıp formumuza koyup içerisine “İşlem devam ediyor...” 
uyarısını yazalım.Son ekran görüntümüz şu şekildedir;

Ardından yaptığımız işlemin uzun sürdüğünü göstermek adına lnkEkle_Click metodunun sonuna Thread.Sleep
(2000);

Satırını ekleyelim.Bu durumda her isim eklenirken işlem en az 2 sn sürecektir.Tabi bu süre içerisinde kullanıcı ile 
arayüz etkileşim halinde olabilecektir.Ardından UpdateProgress kontrolünün DynamicLayout özelliğini false ve 
DisplayAfter özelliği 0(Sıfır) olarak ayarlayalım.Yaptığımız ayarlamalardan sonra uygulamamızı tekrar çalıştırıp 
sonucu görelim;
Eğer sayfamızda birden fazla UpdatePanel ve UpdateProgress var ise ve her bir UpdateProgress kontrolünü ayrı ayrı 
UpdatePanel kontrolleriyle ilişkilendirmek istiyor isek UpdateProgress kontrolünün AssociatedUpdatePanelID 
özelliğine, ilişkilendirmek istediğimiz UpdatePanel kontrolünün ID’sini veriyoruz.Bu durumda belirlediğimiz 
UpdatePanel içerisindeki kontrollerden kaynaklanan bir post back işlemi gerçekleşir ise sadece ilişkilendirdiğimiz 
UpdateProgress içeriği görüntülenecektir.

Not: UpdateProgress kontrolünün içerisine bir adet normal Panel kontrolü ekleyip içerisine gerekli şeyleri yazdıktan 
sonra sonra Panel’in Position Mode(Sağ Tıkla‐>Style‐>Position) özelliğini Absolutely position olarak belirler isek 
Panel kontrolünü sayfanın herhangi bir yerine koyabiliriz.Bu durumda “İşlem devam ediyor...” yazısı örneğin 
sayfanın tam ortasında görüntülenebilir.

Bu makalemizin sonuna geldik sonraki makalelerimde ASP.NET Ajax teknolojisinin diğer konularını sizlere anlatıyor 
olacağım.

Hepinize başarılar dilerim,hoşçakalın.

Örnek Uygulama : AjaxControls.rar

Eğitmen : Nurettin Şimşek - msegitim.net