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.
