Dinamik Asp.Net Ajax Accordion Menü Kontrolü Hazirlayalim

Bu yazimda Ajax Control Toolkit ile gelen Accordion Kontrolü ile dinamik çalisarak bu kontrolün hem kullanimini kavrayalim, hem de kontrolümüzü dinamik bir yapi içerisinde kullanmayi ögrenelim.

Ben basliklari ve içeriklerini bir Access veritabanindan çektim. Veritabanina ait tasarim görüntüsü asagidaki gibidir. Siz isterseniz baska kaynaklardan da yararlanabilirsiniz.

Proje sonunda asagidaki gibi bir görüntü elde edecegiz.

1.Adim: Bir adet Asp.Net sayfasi açiniz. Sayfaniza bir adet Ajax Extensions içindeki ScriptManager ve AjaxControlToolkit içerisindeki Accordion kontrolünü birakiniz.

2.Adim: Sayfaniza bir adet AccessDataSource kontrolü ekleyiniz ve ben verileri daha önce belirttigim gibi Access veritabanindan çekecegim için projeme Access dökümanini da ekledim.
Veritabaninda istedigim verileri AccessDataSource kontrolüne ekledigim zaman asagidaki görüntü olustu.

<br />
ID=&quot;AccessDataSource1&quot; runat=&quot;server&quot;<br />
DataFile=&quot;~/elearner.mdb&quot; SelectCommand=&quot;SELECT * FROM [elearnerekibi]&quot;&amp;gt;<br />
asp:AccessDataSource&amp;gt;<br />

3.Adim: Website
<br />
.baslik<br />
{<br />
background-color:#6699FF;<br />
color:White;<br />
margin-top:3px;<br />
}</p>
<p>.icerik<br />
{<br />
background-color:White;<br />
color:#6699FF;<br />
}<br />

4.Adim: Sayfanizin tagi içerisine asagidaki linki ekleyiniz.
<br />
runat=&quot;server&quot;&amp;gt;<br />
Untitled Pagetitle&amp;gt;</p>
<p>head&amp;gt;<br />

5.Adim: Sayfaniza ait kaynak(Source) kisminda Accordion Kontrolünüzü asagidaki gibi yapilandiriniz.

ID=”Accordion1″ runat=”server”
HeaderCssClass=”baslik” ContentCssClass=”icerik” Width=”300″ FramesPerSecond=”200″ DataSourceID=”AccessDataSource1″>

<%#Eval(“Adi”) %>
HeaderTemplate>

<%#Eval(“Biyografi”) %>
ContentTemplate>
cc1:Accordion>

Burada Accordion Kontrolü içerisinde bazi özellikler ekledik. Bunlardan,

HeaderCssClass=”baslik” ile Accordion kontrolündeki basliklarin yapisi belirlendi. Css dökümanindaki “baslik” classina bakarsaniz, arkaplan rengi açik mavi, yazi rengi beyaz, her bir menü elemani arasindaki uzaklik ise 3px olarak ayarlandigini görebiliriz.

ContentCssClass=”icerik” ile Accordion kontrolündeki basliklara ait içeriklerin yapisi belirlendi. Bu da Css dökümanimizdaki icerik Classi ile ayarlandi.

Width=”300” ile Accordion kontrolünün genisligi belirlendi.

FramesPerSecond=”200″ ile Accordion kontrolündeki herbir baslik ve içerigin(Pane) açilma hizi belirlendi.

DataSourceID=”AccessDataSource1″ ile Accordion Kontrolümüzün veri kaynagi belirlendi.

ile basliklar belirlendi. Dikkat edin Basliklar degerini Eval() methodu ile dinamik olarak Veri kaynagimizdan aliyor. Ayni islem ile içerik içinde yapildi.

Iste sonuç…

Diger yazilarimda görüsmek üzere.