Amigos del código, este dia trabajaremos con una herramienta muy útil y es Ajax Control Toolkit esta utilidad nos simplifica la vida a la hora de crear paginas web mediante ASP, este conjunto de herramientas la puedan descargar de aqui.

Una vez descargado el archivo, lo descomprimimos y procedemos a agregarlo a nuestro proyecto, en este caso estoy utilizando Visual Web Developer 2008, entonces los pasos serian los siguientes:

1. Creo un nuevo proyecto ASP.
2. Una vez creado y dentro del Default.asp, nos dirigimos a la barra de herramientas  (toolbox) que se encuentran en el lado izquierdo de nuestro IDE, una vez abierta la pestaña presionamos el botón derecho del mouse y en el menu elejimos la opción ADD TAB
3. Una vez hecho esto se creara una nueva pestaña y asignamos el nombre Ajax Control Toolkit y listo ya tenemos el espacio para nuestra barra de herramientas.
4. Ahora en ese espacio que creamos damos click derecho en el mouse y ahora seleccionamos choose items se nos abrira un cuadro de dialogo y damos click en browse y nos dirigimos a donde guardamos nuestros archivos que descargamos una vez en la carpeta seleccionamos el archivo AjaxControlToolkit.dll y click en ok.
5. Se cargaran las herramientas y ahora si estamos listos para desarrollar.

Muy bien ahora lo que debemos tener presente siempre es que cuando vallamos a utilizar uno o varios elementos de estas herramientas necesitamos agregar un Script, esto lo hacemos facilmente, nos dirijimos a nuestro set de heramientas que acabamos de crear y buscamos el elemento ToolkitScriptManager lo selecionamos y lo arrastramos a nuestro archivo ASP, en nuestro codigo quedara un fragmento asi:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

Pues bien ahora nos dirigimos al codigo y procedemos a crear nuestro Acordeon, esto mediante el siguiente codigo

<asp:Accordion  ID="Accordion1"  runat="server">
</asp:Accordion>

Bien una vez hecho esto procedemos a agregar los paneles del Acordeon, en esta ocacion solo agregaremos 3 para la demostracion.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
 </asp:ToolkitScriptManager>
 <asp:Accordion
 ID="Acordeon1"
 CssClass="accordion"
 HeaderCssClass="accordionHeader"
 HeaderSelectedCssClass="accordionHeaderSelected"
 ContentCssClass="accordionContent"
 runat="server">
 <Panes>
 <asp:AccordionPane ID="AccordionPane1" runat="server">
 <Header>@edgarronda</Header>
 <Content>
 Ejemplo de Acordeon
 </Content>
 </asp:AccordionPane>
 <asp:AccordionPane ID="AccordionPane2" runat="server">
 <Header>Programacion</Header>
 <Content>
 www.proyectmaker.com
 </Content>
 </asp:AccordionPane>
 <asp:AccordionPane ID="AccordionPane3" runat="server">
 <Header>Noticias</Header>
 <Content>
 www.ideasencodigo.com
 </Content>
 </asp:AccordionPane>
 </Panes>
 </asp:Accordion>

Bien como podemos ver aqui asignamos los 3 paneles, ahora procedemos a agregar un pequeño CSS para que se vea con estilo nuestra cascada

<style type="text/css">
 .accordion {
 width: 400px;
 }
 .accordionHeader {
 border: 1px solid #2F4F4F;
 color: white;
 background-color: #2E4d7B;
 font-family: Arial, Sans-Serif;
 font-size: 12px;
 font-weight: bold;
 padding: 5px;
 margin-top: 5px;
 cursor: pointer;
 }

 .accordionHeaderSelected {
 border: 1px solid #2F4F4F;
 color: white;
 background-color: #5078B3;
 font-family: Arial, Sans-Serif;
 font-size: 12px;
 font-weight: bold;
 padding: 5px;
 margin-top: 5px;
 cursor: pointer;
 }
  .accordionContent {
 background-color: #D3DEEF;
 border: 1px dashed #2F4F4F;
 border-top: none;
 padding: 5px;
 padding-top: 10px;
 }
 </style>

Y listo ahora tenemos nuestro Acordeón ejecutándose perfectamente, como siempre un cordial saludo y les dejo el codigo fuente del proyecto.

DESCARGAR

Bien en este post utilizaremos Visual Web Developer 2008, usare la Express edition que se pueden descargar gratis desde aqui.

El fin de este post es concer el entorno de esta herramieta de desarrollo, y crear una simple aplicacion web con motivos de interactuar y avanzar poco a poco en el uso de esta herramienta.

Una vez instalado el VWD iniciaremos la aplicacion para esto nos dirijimos a el munu File->New Project una vez aqui nos mostrara un menu de opciones como el siguiente.

En esta ocasion elejiremos la opcion C#-> Web del menu izquierdo y en la parte derecha elejiremos ASP.NET Web App bien ahora ingresamos un nombre a nuestra app y presionamos el boton OK.

Despues de esto, se nos abrira el entorno de trabajo como se muestra.

Este sera nuestro entorno de trabajo, Ahora seleccionaremos el modo de Disign e iniciaremos nuestra aplicacion.

Crearemos una aplicacion con que nos muestre un mensaje, para esto utilizaremos los controles Label, Button,TextBox.

Insertamos estos controles en nuestro modo diseño y se mostrara de esta manera.

Las propiedades de nuestro control seran las siguientes:

Para cambiar el ID de nuestro control, seleccionamos el control y en las propiedades del control buscamos el Tag ID y ahi cambiamos el ID, cambiamos el ID para tener control de todos los identificadores y asi no tener problemas a la hora de codificar.

Lo que estamos haciendo es tan solo insertar controles de forma aleatoria sin un formato de diseño, ya que es una aplicacion inicial, con la experiencia podremos insertar formatos CSS. Bien ahora pasamos al siguiente paso que es codificar nuestra aplicacion como seleccionamos al iniciar nuestra app el lenguaje utilizado sera C# pues bien ahora daremos doble click sobre el control del boton y agregamos el siguiente codigo.

   1: protected void cmdmensaje_Click(object sender, EventArgs e)

   2: {

   3:     lblmensaje.Text = txtmensaje.Text;

   4: }

bien ahora podremos probar nuestra app tan solo presionaremos F5 y se ejecutara en el navegador, pero antes de eso nos motrara una advertencia, como la siguiente.

La cual nos dire que necesitamos configurar nuestro Web.Config tan solo presionamos que si y se ejecutara nuestra aplicacion.

Una vez hecho esto se abrira nuestro Browser y mostrar nuestra aplicacion.

[DESCARGAR EJEMPLO]