ASP.NET Ajax Control Toolkit Akordiyon(Accordion) Kontrolü Kullanımı

ASP.NET Ajax Control Toolkit Akordiyon(Accordion) Kontrolü Kullanımı

ASP.NET Ajax Control Toolkit kullanılarak yapılan projelerde karşımıza sıklıkla çıkan Akordiyon(Accordion) Kontrolü derinlemesine inceleyeceğiz.


ASP.NET Ajax Control Toolkit Akordiyon(Accordion) kullanarak projemizde kayan paneller kullanabiliriz. Kayan panel kullanılan sayfaları ASP.NET Ajax Control Toolkit Akordiyon(Accordion) kontrolü kullanmadan da yapabilirdik fakat ASP.NET Ajax Control Toolkit bize bu yapıyı bir kontrol haline getirerek sunmaktadır.

Akordiyon(Accordion) kontrolünü kullanmak için öncelikle ASP.NET AJAX-Enabled Web Site oluşturmalıyız. ASP.NET AJAX-Enabled Web Site oluşturarak web.config dosyasını ajax altyapısına göre oluşturup her yeni oluşturulan sayfanın ajax kullanabilmesi için gerekli olan ScriptManager ı otomatik olarak sayfaya gömüyor. Eğer ASP.NET AJAX-Enabled Web Site oluşturmadıysanız tüm bu işlemleri elle ayarlayarak web sitenızda ajax control toolkit kullanabilirsiniz. Toolbar'ınıza daha önce ASP.NET Ajax Control Toolkit kontrollerini yüklememisseniz www.asp.net sayfasından gerekli yazılımları indirerek ve referans olarak AjaxControlToolkit.dll'ini vererek tüm kontrolleri toolbar'ınıza getirebilirsiniz.
 

Toolbar dan Accordion kontrolünü sayfanıza yüklediğinizde otomatik olarak AjaxControlToolkit.dll de projenize eklenecektir .Accordion kontrolünün içerisine  AccordionPane'ler ekleyerek sayfanızı statik olarak oluşturabilirsiniz.
Aşağıda aspx dosyası üzerinde kontrolün eklenmiş hali gözükmektedir.

<ajaxToolkit:Accordion
    ID="MyAccordion"
    runat="Server"
    SelectedIndex="0"
    HeaderCssClass="accordionHeader"
    HeaderSelectedCssClass="accordionHeaderSelected"
    ContentCssClass="accordionContent"
    AutoSize="None"
    FadeTransitions="true"
    TransitionDuration="250"
    FramesPerSecond="40"
    RequireOpenedPane="false"
    SuppressHeaderPostbacks="true">
    <Panes>
        <ajaxToolkit:AccordionPane
            HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelected"
            ContentCssClass="accordionContent">
            <Header> . . . </Header>
            <Content> . . . </Content>
        </ajaxToolkit:AccordionPane>        
        .
        .
        .
    </Panes>            
    <HeaderTemplate>...</HeaderTemplate>
    <ContentTemplate>...</ContentTemplate>
</ajaxToolkit:Accordion>

Accordion Kontrolünün özelliklerinden bahsedecek olursak:

    SelectedIndex: Sayfa ilk açıldığında seçili olan panel numarasını tutar
    HeaderCssClass: Kontrolün header için css'i tutar. Ayrıca AccordionPane kontrolünde de bu özellik vardır.
    HeaderSelectedCssClass: Seçili olan panelin header için css dosyasını tutar.
    ContentCssClass: Panel içerisindeki verinin css dosyasını tutar.   
    FadeTransitions: Seçilen panele fade(solukluk) özelliğinin verilmesini sağlar.
    TransitionDuration:Panel hareket animasyonunun süresini tutar   
    FramesPerSecond :Animasyon sırasında kullanılacak frame sayısını tutar
    AutoSize :None,Limit,Fill değerlerini alır, kontrolün büyüklüğü üzerine kısıtlar getirir.   
    RequireOpenedPane: Açık olan panelin headerına basıldığında kapanmasını önler.
    SuppressHeaderPostbacks: Başlık içerisinde client side kullanılan taglerin kullanılmasını sağlar.
    Panes: AccordionPaneleri içerir
    HeaderTemplate ve ContentTemplate: Başlığa ve içeriğe veri eklenirkenki görüntüyü saklar DataSource DataSource: Veri kaynağı ekleneceği zaman kullanılır.
    DataSourceID - Veri kaynağına kimlik vermek için kullanılır.
    DataMember - Veri kaynağı verilirkenki üyeyi tutar .(Dataset içerisindeki DataTable ismi gibi..)

Öncelikle statik olarak Accordion ve AccordionPane'ımızı oluşturalım.

 

<cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"            ContentCssClass="accordionContent" TransitionDuration="250" FramesPerSecond="40"RequireOpenedPane="false" SuppressHeaderPostbacks="true">
    <Panes>
        <cc1:AccordionPane ID="AccordionPane1" runat="server">
            <Header>1 Header</Header>
            <Content>Birinci Header Content<br> </Content>
        </cc1:AccordionPane>
        <cc1:AccordionPane ID="AccordionPane2" runat="server">
            <Header> 2 Header</Header>
            <Content>İkinci Header Content<br>  </Content>
        </cc1:AccordionPane>
        <cc1:AccordionPane ID="AccordionPane3" runat="server">
            <Header>3 Header</Header>
            <Content>Üçüncü Header Content<br></Content>
        </cc1:AccordionPane><cc1:AccordionPane ID="AccordionPane4" runat="server">
            <Header>4 Header</Header>
            <Content>Dördüncü Header Content<br></Content>
        </cc1:AccordionPane>
    </Panes>
</cc1:Accordion>

Yaptığımız sayfa aşağıdaki gibi çalışacaktır.

Server side üzerinden run time da dinamik olarak Panellerimizi oluşturmak için:

aspx dosyası üzerindeki accordion kontrolu;

<cc1:Accordion ID="MyAccordion" runat="server" AutoSize="None" FadeTransitions="true"
HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent" TransitionDuration="250" FramesPerSecond="40"
RequireOpenedPane="false" SuppressHeaderPostbacks="true">
    <Panes>
    </Panes>
</cc1:Accordion>

.cs dosyası           

public partial class _Default3 : System.Web.UI.Page{
    protected void Page_Load(object sender, EventArgs e){

        AccordionPane ap01 = new AccordionPane();
        ap01.HeaderContainer.Controls.Add(new LiteralControl("1 Header"));
        ap01.ContentContainer.Controls.Add(new LiteralControl("Birinci Header Content"));
        MyAccordion.Panes.Add(ap01);
        AccordionPane ap02 = new AccordionPane();
        ap02.HeaderContainer.Controls.Add(new LiteralControl("2 Header"));
        ap02.ContentContainer.Controls.Add(new LiteralControl("İkinci Header Content"));
        MyAccordion.Panes.Add(ap02);
        AccordionPane ap03 = new AccordionPane();
        ap03.HeaderContainer.Controls.Add(new LiteralControl("3 Header"));
        ap03.ContentContainer.Controls.Add(new LiteralControl("Üçüncü Header Content"));
        MyAccordion.Panes.Add(ap03);
        AccordionPane ap04 = new AccordionPane();
        ap04.HeaderContainer.Controls.Add(new LiteralControl("4 Header" ));
        ap04.ContentContainer.Controls.Add(new LiteralControl("Dördüncü Header Content"));
        MyAccordion.Panes.Add(ap04);}}

şeklinde olmalıdır.

DataSource vererek panelleri oluşturmak için:

<form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" />
    <cc1:Accordion ID="Accordion1" runat="server" AutoSize="None"
        FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40"
        RequireOpenedPane="false" SuppressHeaderPostbacks="true"
        DataSourceID="SqlDataSource1" >
       
        <HeaderTemplate>
            <%#Eval("Header") %>
        </HeaderTemplate>
        <ContentTemplate>
            <%# Eval("Content") %>
        </ContentTemplate>
    </cc1:Accordion>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ConnectionStrings:HomesiteConnectionString2 %>"
        SelectCommand="SELECT [Header], [Content] FROM [Blog_]">
    </asp:SqlDataSource>
</form>

şeklinde olmadır.

Makale ya da kodlarda bulunan hatalar ya da sorularınız için mehmetaliecer@gmail.com adresinden bana ulaşabilirsiniz.İyi çalışmalar.

Mehmet Ali ECER

www.mehmetaliecer.com