Ajax, es uno de los grandes componentes nacidos para utilizar en asp.net que brinda gran cantidad de funcionalidades y potencia nuestras aplicaciones, brindando sencilles y agilidad.

Este post, esta dedicado a la creación de un menú tipo accordeon con ajax.

Como bien sabemos, para poder utilizar cualquiera de los componentes ajax, es necesario que exista un scriptmanager registrado en nuestra página, el cual será el encargado de manejar nuestros controles. Entonces, lo primero que haremos será crear nuestro script manager.

 <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

Seguidamente definimos nuestro elemento accordeon y establecemos algunas de sus propiedades básicas:

  <cc1:Accordion ID="AccordionCtrl" runat="server"
        SelectedIndex="0" HeaderCssClass="accordionHeader"
        ContentCssClass="accordionContent" AutoSize="None"
        FadeTransitions="true" TransitionDuration="250"
    FramesPerSecond="40"

Para que nuestro accordeon funcione debemos declarar PANES dentro de el, estos panes serán los encargados de contener los elementos, vinculos o información que deseamos mostrar.

  <Panes>
                <cc1:AccordionPane ID="AccordionPane0" runat="server">
                    <Header>Matenimiento</Header>
                    <Content>
                        <li><a href="mypagina.aspx">My página de prueba</a></li>
                                                                    
                    </Content>
                </cc1:AccordionPane>

Como vemos podemos declarar tantos accordionPanes como queramos, cada accordionPane representa un elemento de categoría dentro del accordeon.

Por útlimo debemos cerrar los elementos panel y accordion que abrirmos inicialmente.

 </Panes>
 </cc1:Accordion>

Nuesto ejemplo finalmente completo debería verse así:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
        <cc1:Accordion ID="AccordionCtrl" runat="server"
        SelectedIndex="0" HeaderCssClass="accordionHeader"
        ContentCssClass="accordionContent" AutoSize="None"
        FadeTransitions="true" TransitionDuration="250"
    FramesPerSecond="40"
>
            <Panes>
                <cc1:AccordionPane ID="AccordionPane0" runat="server">
                    <Header>Matenimiento</Header>
                    <Content>
                        <li><a href="mypagina.aspx">My página de prueba</a></li>
                                                                    
                    </Content>
                </cc1:AccordionPane>
          
                                    
            </Panes>
        </cc1:Accordion>     
  
De esta forma, nuestro Menu tipo accordeon debería estar funcionando, una forma sencilla y agil de crear un menú en asp.net con Ajax.