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.
