Sem Göksu
Sem Göksu
Yazılım · Yolculuk · Fenerbahçe
AJAX

AJAX TAB Container Extender

Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden Tab Extender nesnesini ele alıp inceleyeceğiz.

14 Şubat 2007 2 dk okuma 3713 2
Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden Tab Extender nesnesini ele alıp inceleyeceğiz.

Tab Container, sayfa içeriklerini organize etmek için  tablar olusturmamızı saglayan bir  AJAX nesnesidir. Sayfa içerisinde birden fazla sayfa varmıs gibi hareket etmemizi saglar.

Her TabPanel içerikleri görüntülemek için HeaderTemplatler olustururuz. HeaderTemplateler içerisinde kullanıcıya o taba ait bilgiyi gösteririz. Özellikler E-ticaret sitelerinde sıkça kullanılır. Kulllanıcıya tek bir sayfa içerisinde farklı tablar içersinde farklı bilgileri sunmak için oldukça kullanıslıdır. (Ürün açıklaması, ödeme seçenekleri, resimler yorumlar vs...) 

Kullanımı:



Özellikleri:

TabContainer Özellikleri

  • ActiveTabChanged (Event) - Aktif tab degistiginde tetiklenecek olan olay
  • OnClientActiveTabChanged - tabChanged eventi çalıstıgında client - side çalısacak javascript fonksiyonunun ismidir.
  • CssClass - Tablara uygulanacak olan Sitil Classı
  • ActiveTabIndex - Aktif olarak gelecek Tabın Index numarası
  • Height - Tabın içerik yükseklik boyutu
  • Width - Tabın içerik genislik boyutu
  • ScrollBars - Scrollbar özelliginin olup olmayacagını belirler.
TabPanel Özellikleri
  • Enabled - Tabın aktif/pasif durumunu ayarlar
  • OnClientClick - Tab Eventi çalıstıgında client - side çalısacak javascript fonksiyonunun ismidir.
  • HeaderText - Tabın Baslıgına verilecek isim 
  • HeaderTemplate - Baslık Kısmında görüntülenmesini istedigimiz kısım.
  • ContentTemplate - Içerigin görüntülenecegi kısım.
Örnek:

Örnegimzde E-ticaret sitelerinde sıklıkla gördügümüz Ürün bölümlerinde kullanılarn ürün detayı bilgilerini olusturacagız. Bunun için AJAX TAB Extender nesnesini kullanacagız. Ürün özelliklerini listeleyip ayru ayrı tablar olusturup ürün ile ilgili bilgileri kullanıcıya sunacagız.

Ilk olarak bir ajax projesi olusturalım.



Projemizi olusturduktan sonra sayfamıza bir adet TabContainer ekleyelim.



Evet simdi Tablarımızı olusturalım. Sayfamızın HTML kısmına gidelim ve TabContainerin özelliklerini ayarlayalım.



Kullanıcıya 3 farklı bilgiyi 3 farklı tabda gösterecegiz. Ürün Özellikleri 1. tabda, Resmler 2. tabda, yorumlarda 3. tabda görüntülenecek.

Simdi projemizi çalıstıralım. Ürün özellikleri görüntülenecek



Resimler tabına geçelim;



Simdide yorumlara bakalım



Evet AJAX hayatımızı kolaylastırmaya devam ediyor J 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

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://ajax.asp.net 
Paylaş:

Yorumlar (2)

O
Onur 29 Ağu 2009 23:31

Sayfayı çalıştırdığımda aşağıdaki hatayı alıyorum sebebi nedir acaba.. The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

E
Emre 20 Eyl 2011 19:19

Merhabalar .. Örneğin X.aspx ve Y.aspx sayfalarımız hazır ama onları AJAX TAB Container şeklinde yapmak istiyorum . bu sayfalarımı AJAX TAB Container a aktarmanın bir yolu varmıdır ?? Şimdiden teşekkürler..

Yorum bırak

* Yorumlar moderasyon sonrası yayınlanır. E-posta gizli tutulur.