Makale Özeti

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

Makale


Tab Container, sayfa içeriklerini organize etmek için  tablar oluşturmamızı sağlayan bir  AJAX nesnesidir. Sayfa içerisinde birden fazla sayfa varmış gibi hareket etmemizi sağlar.

Her TabPanel içerikleri görüntülemek için HeaderTemplatler oluştururuz. 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ışlıdır. (Ürün açıklaması, ödeme seçenekleri, resimler yorumlar vs...) 

Kullanımı:



Özellikleri:

TabContainer Özellikleri

  • ActiveTabChanged (Event) – Aktif tab değiştiğinde tetiklenecek olan olay
  • OnClientActiveTabChanged – tabChanged eventi çalıştığında client – side çalışacak javascript fonksiyonunun ismidir.
  • CssClass – Tablara uygulanacak olan Sitil Classı
  • ActiveTabIndex – Aktif olarak gelecek Tabın İndex numarası
  • Height – Tabın içerik yükseklik boyutu
  • Width – Tabın içerik genişlik boyutu
  • ScrollBars – Scrollbar özelliğinin olup olmayacağını belirler.
TabPanel Özellikleri
  • Enabled – Tabın aktif/pasif durumunu ayarlar
  • OnClientClick – Tab Eventi çalıştığında client – side çalışacak javascript fonksiyonunun ismidir.
  • HeaderText – Tabın Başlığına verilecek isim 
  • HeaderTemplate – Başlık Kısmında görüntülenmesini istediğimiz kısım.
  • ContentTemplate – İçeriğin görüntüleneceği kısım.
Örnek:

Örneğimzde E-ticaret sitelerinde sıklıkla gördüğümüz Ürün bölümlerinde kullanılarn ürün detayı bilgilerini oluşturacağız. Bunun için AJAX TAB Extender nesnesini kullanacağız. Ürün özelliklerini listeleyip ayru ayrı tablar oluşturup ürün ile ilgili bilgileri kullanıcıya sunacağız.

İlk olarak bir ajax projesi oluşturalım.



Projemizi oluşturduktan sonra sayfamıza bir adet TabContainer ekleyelim.



Evet şimdi Tablarımızı oluşturalım. Sayfamızın HTML kısmına gidelim ve TabContainerin özelliklerini ayarlayalım.



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

Şimdi projemizi çalıştıralım. Ürün özellikleri görüntülenecek



Resimler tabına geçelim;



Şimdide yorumlara bakalım



Evet AJAX hayatımızı kolaylaştırmaya devam ediyor J Bu makalenin de sonuna geldik, başka bir makalede görüşmek üzere başarı 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