Ajax Collapsible Panel Extender

1-Yeni bir Asp.Net sayfasına Collapsible Extender eklemek için Toolbox penceresinden extender alarak basitçe form etiketlerine alalım.Bu işlemden sonra web çözümünüze AjaxControls referansınız sayfanız üstüne eklenecek , ayrıca birde Bin klasörünüz otamatik oluşacak.Bu işlem sadece bir kez yapılacak, sonraki kontrolleri eklediğinizde sürüm değişmedikçe bu çözümünüze eklenmeyecek , ilk extender eklerken sayfanıza Ajax Extenders kısmından Script Manager'ı form etiketleriniz içine eklemenizde gerekmektedir.Elbette bunu bir sonraki bloglarda detaylı anlatmayacağım.

2- Extender eklendikten sonra artık her bir Collapsible panel için ilk panelimizi eklememiz gerekli şöyleki;

 İlk asp panel  ID=”CoolHeader” panelin içine birde yukarıdaki gibi bir Label atalım

Cssclass=”collapsePanelHeader” - Cssclass=”collapsepanel” panelin görünümleri için kullanacağımız iki ayrı class belirleyelim.(gerekli değildir)

3- Ve şimdi 2 nci panelimizi ekleyelim.

Her Ajax Collapsible panel için 2 adet asp panel oluşturmalıyız.Bu extender için en önemli noktadır.Bunu atlarsanız muhtemelen hatalarla karşılaşırsınız.Ayrıca tek bir Collapsible Panel Extender ile de bu Ajax kullanmanın pek bir mantığı yoktur.Yani buda birden fazla Extender ekleyeceğiz anlamına gelmektedir.

 

Biraz toplayalım...Şuana kadar yaptığımız 3 işlem oldu CollasiblePanel Extender kontrolünü sayfamıza sürekledik. 2 adet asp panel ekledik ve bir panel içinede Label koyduk.Ayrıca bu panellere CssClass larda tanımladık ve şimdide devam ediyoruz.

4-Şimdi Collapsible Panel Extender davranışını tanımlayacağız bunun için şunları yazmalıyız

Bu işlemden sonra ilk Collapsible işlemi tamamlandı fakat burada biraz detaya inelim 

TargetControlID="CoolContent" 2nci eklediğimiz paneldi ve bu paneli kontrolün denetimine tanımladık

ExpandControlId="CoolHeader" 1nci eklediğimi paneldi ve bu paneli de diğer panelin açılıp kapanırken kullancağımızı tanımladık.

TextLabelID="CollLabel_1" 1 nci panelimizin içine bir Label koymuştuk onu burda belirtiyoruz

ExpandtextText="Daha az" Bu tiplerle panellerimiz açılıp kapanırken dinamik yazacak sözcükleri belirliyoruz

CollapsibleText="Daha fazla"

ExpandDirection="Vertical" Buradada Yatay veya Dikey (Horizantal) panel açılımını belirtiyoruz

AutoCollapse-AutoExpand False bunlarla ise panellerin otomatik açık mı kapalımı olmasını gerektiğini tanımlıyoruz

EVET buraya kadar artık (ilk) Collapsible Panel Extender işi bitmiş oluyor...Fakat hala bitmedi kodlar gözünüzü korkutmasın zira bunu projede uygularken gayet basit ben biraz detaylı anlatmak istediğim için biraz uzuyor.Şimdi Gelelim 2 nci Collapsible Panel Extender yapmaya 

5- Kod tekrarlamamak ve zamandan kazanmak için aşağıdaki işlemi dikkatlice yapmalıyız.

 

Anladığınız üzere ilk oluşturulan 2 Panel ve Extender tanımlamalarımızı kopyaladık ve alt kısıma yapıştırarak kısa yoldan Collapsible Panellerimizi çoğaltık siz bu panelleri çoğaltarak alt alta açılan ajax paneller yapabilirsiniz.

6- Bu işlemden sonra 2 nci eklenilen Panel ID lerini Extender tanımı yaptığımız yerden değiştirmeyi unutmuyoruz 

 7-Artık panellerinizin içini dilediğiniz içerikle doldurabilirsiniz.

Daha önce CoolContent ID leri olan Panel tagları arasında olan kısımlara dilediğiniz içerikle doldurabilirsiniz.

Önemli olan son kopyalama işleminden sonra benim gibi panel ID lerini ve exdender'da tanımlarınıda değiştirdiğimi yukarıdaki resimden anlamış olmanızdır.Bu şayde artık bir Ajax Collapsible paneliniz var demek oluyor son işlem olarak "CssClass" ları projenizdeki styletheme dosyanızda biçimlerini tamamlamak kalıyor.Başarılar