AJAX Collapsible Extender ve İçerisinde DataComponentleri Kullanımı

AJAX’ın hayatımıza girmesi ile Web’i windows projeleri gibi kullanmaya alıştık. Projelerimizde PostBack olayının sinir bozucu etkisini azaltmaya başladık.

Bu yazımda AJAX ile gelen Collapsible Panel Extender kontrolünü kullanarak Güzel bir örnek yapacağız. Bunun için Panellerimiz içerisinde GridView kontrolünü kullanacağız. Bunu öğrendikten sonra gerisi çok kolay. İstediğiniz gibi Extenderınıza hükmedebileceksiniz.

Şimdi CollapsiblePanel Extender a ait özelliklerin açıklamalarına bakalım. CollapsibleExtender’ı tek başlık ve içerikli Accordion kontrolüne benzetebiliriz.

TargetControlID=”Panel1″ Hangi kontrol için olusturuyoruz.
CollapsedSize=”0″ Detay görülmedigi zaman detaya ait büyüklük.
ExpandedSize=”300″ Detay görünümünde iken Detaya ait büyüklük.
Collapsed=”True” Ilk etapta Detay görünümünde mi yoksa kapali mi olacagi…
ExpandControlID=”Panel2″ Kapali görünümde hangi kontrolle çalisilacak
CollapseControlID=”Panel2″ Detay görünümünde hangi kontrolle çalisilacak
AutoCollapse=”False” Otomatik Kapanma
AutoExpand=”False” Otomatik detay görünümü
ScrollContents=”True” Detayin Scrool özelliginin olmasi
TextLabelID=”Label1″ Baslikta kontrol edilecek texte ait control
CollapsedText=”Detayi Göster…” Kapali iken görünecek text
ExpandedText=”Hide Details” Açik iken görünecek text
ImageControlID=”Image1″ Resim
ExpandedImage=”~/images/collapse.jpg” Açik iken görünecek resim yolu
CollapsedImage=”~/images/expand.jpg” Kapali iken görünecek resim yolu

Proje sonucunda aşağıdakine benzer bir görüntü elde edeceğiz.
Tıklamadan önce…

ajax-collapsible-extender-1

ajax-collapsible-extender-1

ajax-collapsible-extender-2

ajax-collapsible-extender-2

Tıkladıktan sonra…

Artık işe koyulsak iyi olacak…

1.Adım: Bir Adet ASP.NET Ajax sayfası açınız. (VS 2005 kullanıyorsanız Ajax Enabled Web Site)

2.Adım: Sayfanızda ScriptManager yoksa bir adet ScriptManager ekleyiniz.

3.Adım: WebSite>Add New Item adımlarını izleyerek sayfanıza bir adet CSS dökümanı(StyleSheet.Css) ekleyiniz. İçerisine aşağıdaki CSS sınıflarını ekleyiniz.

.collapsePanel {
width:100%;
}
.collapsePanelHeader{
width:40%;
height:30px;
color:Black;
font-weight:bold;
background-color:#ABCDEF;
}

4.Adım: Sayfanızın HEAD tagları arasına aşağıdaki kodu ekleyerek StyleSheet.CSS e bağlantı kurunuz.

 

5.Adım Projenize iki adet Panel ekleyiniz ya da aşağıdaki gibi Source kısmına elle yazınız ve tabi her şartta aşağıdaki gibi yapılandırınız. Birinci Panelinizin ID’si “BaslikPaneli” ikinci Panelinizin ID’si “icerikPaneli” olsun.

Başlık Panelinin içerisine bir adet Labe l Bırakınız. Başlık Paneline ait görüntü aşağıdaki gibi olmalı.

İçerik Panelinin içerisine ise bir Adet GridView kontrolü ve SqlDataSource komponenti ekleyiniz. (Siz isterseniz başka veri kaynakları ile de çalışabilirsiniz tabiki.)

Sonuç aşağıdakine benzer olmalı…

SelectCommand=”SELECT * FROM [elearnerekibi]”>

Şimdi tek yapmanız gereken GridView kontrolümüzün DataSource özelliğine az önce oluşturduğumuz SqlDataSource u göstermek.

ajax-collapsible-extender-3

ajax-collapsible-extender-3

ajax-collapsible-extender-4

ajax-collapsible-extender-4

İşte Sonuç…

Diğer yazılarımda görüşmek dileğiyle…