AJAX Control Toolkit - Accordion

L'Accordion è uno dei controlli contenuti nel AJAX Control Toolkit. La caratteristica di questo controllo è la possibilità di contenere diversi pannelli (AccordionPane) e permettere la visualizzazione di solo uno di questi per volta. Questi pannelli possono essere personalizzati sia per quanto riguarda l'Header che il Content, con la possibilità di contenere altri controlli. Gli stili sono personalizzabili usando i Cascading Style Sheet (css) impostando le proprietà HeaderCssClass (con la class css per l'header) e ContentCssClass (con la classecss per il content). 

<ajaxToolkit:Accordion ID="accordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"

    ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="40"

    TransitionDuration="250" AutoSize="Limit" RequireOpenedPane="false" SuppressHeaderPostbacks="true"

    Height="300px">

    <Panes>

        <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">

            <Header>

                <a href="" class="accordionLink">Header</a>

            </Header>

            <Content>

                Testo inserito all'interno del pannello dell'Accordion.<br />

                Puà contenere anche <a href=" http://www.dottor.net">link</a>, o un qualsiasi altro

                controllo.

                <asp:Button ID="Button2" runat="server" Text="Button" />

            </Content>

        </ajaxToolkit:AccordionPane>

    </Panes>

</ajaxToolkit:Accordion>

Tramite diverse proprietà è possibile gestire anche gli effetti di transizione che si vedranno al momento dell'apertura di un pannello. Infatti, attivando le transizioni (FadeTransitions=true) è possibile gestirne la durata (TransitionDuration) e il numero di frame al secondo (FramesPerSecond).

La proprietà RequireOpenedPane, se impostata a true, indica che quando verrà cliccato un pannello, si dovrà attendere la chiusara di quello visualizzato (aperto) prima che inizi l'apertura di quello appena selezionato. Viceversa, quando verrà cliccato un pannello, la chiusura di uno e l'apertura dell'altro verranno eseguite simultaneamente. 

Creare i pannelli mediante DataBinding. 

L'accordion consente di creare i suoi pannelli agganciandosi ad una sorgente dati. Per fare ciò, è sufficiente impostare una DataSource utilizzando la proprietà DataSource o DataSourceID (a seconda che si usi un DataSourceControl o meno) e utilizzare HeaderTemplate e ContentTemplate per gestire la visualizzazione e struttura dei pannelli.

Nel caso pratico, in cui volessimo usare una XmlDataSource per leggere gli ultimi dieci post di un feed, non si dovrà fare altro che definirla nel markup e impostarne correttamente le varie proprietà come nell'esempio che:

<asp:XmlDataSource 

    ID="dsXML" 

    runat="server" 

    DataFile=" http://www.ilsilenziodiunurlo.com/wp-rss.php"

    XPath="rss/channel/item[position()<=10]" 

    EnableCaching="True" 

    CacheDuration="9000">

</asp:XmlDataSource>

<ajaxToolkit:Accordion ID="accordion" DataSourceID="dsXML" runat="server" SelectedIndex="0"

    HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FadeTransitions="true"

    FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false"

    SuppressHeaderPostbacks="true">

    <HeaderTemplate>

        <a href="" class="accordionLink">

            <%# XPath("title") %>

        </a>

    </HeaderTemplate>

    <ContentTemplate>

       <b> Link:</b>&nbsp; <a href="<%# XPath("link")%>" class="link">

            <%# XPath("title")%>

        </a>

        <p><b>Descrizione:</b>&nbsp;

            <%# XPath("description")%>

        </p>

    </ContentTemplate>

</ajaxToolkit:Accordion>

Tirando le somme, si nota che è un controllo estremamente flessibile e personalizzabile. Ha però come contro l'impossibilità di impostare l'height al 100%. Esso infatti richiede una dimensione fissa, e questo a volte può essere un problema fastidioso.

Tra i controlli che fanno parte del AJAX Control Toolkit, non è l'unico ad avere la possibilità di collassare i panel, ma è presente anche un extender CollapsiblePanel che ha la medesima caratteristica, ma con la differenza che si riferisce ad un solo Panel. Quindi nelle applicazioni conviene valutare l'uso dell'uno o dell'altro a seconda della nostra necessità.

Link Accordion: http://ajax.asp.net/ajaxtoolkit/Accordion/Accordion.aspx
Link AJAX Control Toolkit: http://ajax.asp.net/ajaxtoolkit
Link AJAX Control Toolkit (CodePlex): http://www.codeplex.com/AtlasControlToolkit

Commenti