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
3714
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
Ö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
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.
- 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.
Ö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
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..