Mtro.

Roberto Limon Ulloa LSIA ITSON UG

rlimon@itson.mx

Curso: Instructor: Aula: Duracin:

ASP.NET AJAX (.NET Framework 2.0) con Visual Studio 2005/2008

Mtro. Roberto Limon Aula de Computo 2 11:00 a 13:00 Lu- VI

Objetivo del Curso Entender y Desarrollar aplicaciones web basadas en .NET Framework 2.0 (ASP.NET 2.0 ) orientadas a la web 2.0 mediante la implementacin de la multitecnologa AJAX. Programa de Curso I. INTRODUCCIN AJAX II. FRAMEWORKS HABILITADOS PARA AJAX III. ASP.NET AJAX III.I Un poo de Historia... III.II Qu es el ASP.NET AJAX Control ToolKit? III.III Instalacin del ASP.NET AJAX Control Toolkit III.IV Instalacin del Paquete de ASP.NET AJAX III.V Controles y Entendedores IV. PRACTICAS Accordion AlwaysVisibleControl Animation CascadingDropDown CollapsiblePanel ConfirmButton DragPanel DropDown DropShadow DynamicPopulate FilteredTextBox HoverMenu ModalPopup MutuallyExclusiveCheckBox NoBot NumericUpDown PagingBulletedList PasswordStrength PopupControl Rating ReorderList ResizableControl RoundedCorners Slider TextBoxWatermark ToggleButton ValidatorCallout

TEMARIO CURSO ASP.NET AJAX CON VS2005

ASP.NET AJAX Control Toolkit

ASP.NET 2.0 supone una enorme evolucin en el mundo de los lenguajes Web. Una mayor potencia, fiabilidad y eficiencia van cogidos de la mano de una gran capacidad de hacer la vida ms fcil a los programadores Web: lo que con otras arquitecturas de trabajo Web nos costara sudor y lgrimas, con el framework ASP.NET 2.0 ya viene por defecto o requiere una sencilla instalacin. Y es que hoy por hoy est muy de moda AJAX (Asynchronous JavaScript and XML), con la que se construyen las modernas Web 2.0: idas y vueltas entre el servidor Web y el navegador de nuestro visitante sin que la pgina se recargue. De este modo los programas de escritorio quedan cada vez ms obsoletos frente a los programas Web. El nico problema de AJAX es que, si bien no es la panacea de la dificultad, s requiere unos conocimientos medianamente avanzados del programador Web, as como una gran capacidad de organizacin de cdigo. Ante todo esto, la respuesta de ASP.NET 2.0 ha sido contundente: ASP.NET AJAX. ASP.NET AJAX es una nueva tecnologa Web que se presenta como extensin gratuita de ASP.NET 2.0, aadindole funcionalidades AJAX que eliminan de un plumazo su dificultad de uso, y siendo independiente del navegador con que accedamos. Ahora los programadores Web no necesitan saber absolutamente nada de javascript o XML para crear potentes aplicaciones Web 100% AJAX.

Qu es el ASP.NET AJAX Control Toolkit?

El ASP.NET AJAX Control Toolkit nace como un proyecto conjunto entre la comunidad de programadores y Microsoft. Est desarrollado en base a ASP.NET AJAX y contiene una serie de controles Web y extendedores con los que podremos utilizar las avanzadas caractersticas de ASP.NET AJAX sin ms que un arrastre de ratn. Del mismo modo, con su descarga disponemos de ejemplos de uso, as como del propio cdigo fuente de los controles. Y lo mejor de todo es que es totalmente gratuito. Vamos a distinguir entre controles Web y extendedores, donde los primeros tienen una entidad por s mismos, mientras que los segundos nicamente aaden un comportamiento a un control Web existente. Se trata de una serie de pequeas funcionalidades que cualquier webmaster, en su historia de programador, ha utilizado o deseado para sus Webs. La diferencia ahora es que los ejemplos son 100% AJAX y usarlos no exige conocimiento alguno sobre AJAX, javascript o XML. Estos controles van desde un simple botn con una alerta asociada, hasta un complejo panel que podemos arrastrar por la pantalla; en ambos casos, mandando y recogiendo informacin entre el cliente y el servidor sin ningn tipo de recarga de pgina. Su uso har que nuestra Web sea mucho ms atractiva y simptica al usuario a la par que potente y efectiva.

Instalacin del ASP.NET AJAX Control Toolkit El ASP.NET AJAX Control Toolkit
Una vez instalado el paquete de Atlas, ya estamos preparados para instalar nuestro ASP.NET AJAX Control Toolkit. Para ello acudiremos a la Web donde se centraliza el trabajo sobre el ASP.NET AJAX Control Toolkit, en su apartado de descargas: http://www.codeplex.com/AtlasControlToolkit/Wiki/View.aspx Como observamos podemos elegir entre descargarnos o no el cdigo fuente junto con el resto del Kit. Nosotros elegiremos la opcin en que s lo tiene. Seguiremos a continuacin los siguientes pasos: 1.- Aceptar los trminos y condiciones tras haberlos ledo. 2.- Guardar el archivo AjaxControlToolkit.zip en nuestro ordenador. 3.- Descomprimimos el fichero y guardamos el resultado en una carpeta. Comprobamos que dentro tenemos varios directorios, donde se ubica el cdigo fuente, su correspondiente binario, templates, etc. Destacamos la carpeta SampleWebSite, un proyecto con ejemplos especficos de cada uno de los controles que componen esta versin del ASP.NET AJAX Control Toolkit. 4.- Ahora iniciemos nuestro programa de la familia Visual Studio 2005, en nuestro caso el Visual Web Developer. 5.- Elijamos crear un nuevo WebSite.

Iniciamos un nuevo proyecto ASP.NET AJAX 6.- Escogemos abrirlo como ASP.NET AJAX-Enabled Web Site y presionamos sobre OK. 7.- Ahora ya tenemos un proyecto totalmente preparado para trabajar con ASP.NET AJAX. A continuacin vamos a aadir los controles del ASP.NET AJAX Control Toolkit a nuestra caja de herramientas. Para ello, una vez dentro de cualquiera de nuestras pginas (por ejemplo default.aspx), ubiquemos el ratn sobre nuestra caja de herramientas y presionamos el botn derecho para elegir Add Tab.

Aadamos una pestaa para el Toolkit Con ello, crearemos un tab especfico en nuestra caja de herramientas para el ASP.NET AJAX Control Toolkit. 8.- Para el colmo de la imaginacin, nombraremos ese tab como ASP.NET AJAX Control Toolkit. 9.- A continuacin desplegamos nuestro nuevo tab, presionamos sobre ste el botn de la derecha y elegimos Choose tems... 10.- Desde la pestaa en que nos encontramos (.NET Framework Components), hacemos clic sobre el botn de Browse... y navegamos hacia la carpeta donde hemos instalado nuestro ASP.NET AJAX Control Toolkit. 11.- Entramos en la carpeta SampleWebSite y de ah a su carpeta bin 12.- Elegimos AjaxControlToolkit.dll y presionamos sobre open. 13.- Volvemos a presionar OK y ya tendremos instalados los controles del ASP.NET AJAX Control Toolkit en nuestro Visual Web Developer, prestos y dispuestos a ser utilizados.

Controles y extendedores del Toolkit

El paquete de ASP.NET AJAX

Dado que el ASP.NET AJAX Control Toolkit est desarrollado en base a la tecnologa de ASP.NET AJAX, deberemos tener instalado el paquete de ASP.NET AJAX en nuestro ordenador. Acudamos, por tanto a la Web oficial de Atlas: http://ajax.asp.net. En esta Web conoceremos ms en detalle qu es ASP.NET AJAX, accederemos a vdeos, a tutoriales y a ejemplos de uso de ASP.NET AJAX. Desde la propia pgina inicial, localizaremos el enlace de descarga del paquete. A partir de aqu seguiremos los siguientes pasos: 1.- Guardaremos el archivo ASPAJAXExtSetup.msi en nuestro ordenador. 2.- Una vez descargado lo ejecutaremos, con lo que comenzar la instalacin. NOTA: si tenamos una versin previa instalada, deberemos desinstalarla desde nuestro Panel de Control.

Ventana inicial de instalacin 3.- Presionamos sobre next. 4.- Aceptamos los trminos de la licencia (tras haberlos ledo) y volvemos a presionar sobre next. 5.- Ahora no tenemos ms que presionar sobre install y la instalacin se realizar sola.

ASP.NET AJAX instalndose

9.- Finalizando en pocos minutos.

Fin de instalacin de ASP.NET AJAX

Controles y extendedores
Sin ms dilacin, comenzamos con la explicacin de los elementos que componen el ASP.NET AJAX Control Toolkit. Cabe recordar que el Control Toolkit es un proyecto vivo, abierto a la comunidad y en continua evolucin. Constantemente se estn aadiendo nuevos elementos, as como corrigiendo y aumentando los actuales.

Accordion
Descripcin
El control Web Accordion te permite ubicar mltiples paneles, de modo que nicamente uno ser visible en cada momento. Dichos paneles son los AccordionPane, de los que debemos definir la cabecera (Header) y el contenido (Content). El estado del Accordion es guardado, de modo que el AccordionPane activo se mantendr visible a travs de los postbacks.

Propiedades
9 propiedades definen al Accordion: SelectedIndex: Define el AccordionPane que estar activo por defecto, donde el primero tiene como ndice 0. Es opcional y por defecto vale 0. HeaderCssClass / ContentCssClass: Identifica el nombre de la clase CSS utilizada para las

cabeceras/contenidos (Header/content). Si se define como atributo del Accordion, la clase se aplicar por defecto a todos los AccordionPane de que est compuesto. Tambin se puede definir individualmente como atributo de cada AccordionPane. FadeTransitions: en caso de ser true se aplicacar un efecto de fading en la transicin, en caso de ser false la transicin se realizar de modo normal. Es optativo y por defecto vale false. TransitionDuration: cantidad de milisegundos que definen la duracin de una transicin. Se consigue un efecto muy agradeble con transicin de unos 200-300 milisegundos. FramesPerSecond: nmero de frames por segundo que se usar en la animacin de las transiciones. Suele ser suficiente un nmero superior a 40. AutoSize: define la restriccin en la altura del Accordion. Puede tomar tres valores: o None: No tiene ninguna restriccin. La altura del Accordion no tiene lmite. Es importante resear que esto puede implicar que otros elementos de la misma Web sean movidos. o Limit: como mximo, el Accordion medir lo que marque la propiedad Height. Si el Accordion es ms alto de lo que marque su Height, al AccordionPane activo se le aadir un scroll para ajustarse al lmite. En caso de ser menor a ese lmite el Accordion no sufre cambios. o Fill: el Accordion siempre medir lo que marqu su propiedad Height, expandiendo o minimizando el contenido en base a las necesidades. Header: es una propiedad del AccordionPane y define el valor de su cabecera. Content: es una propiedad del AccordionPane y define el valor de su contenido. DataSource: El DataSource a aplicar (totalmente optativo). Para una correcta aplicacin hay que llamar a DataBind(). DataSourceID: Alternativamente, poder asignar el identificador de nuestra fuente de datos. DataMember: el miembro a enlazar cuando se usa el DataSourceID.

Ejemplo
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ACT-Accordion.aspx.cs" Inherits="Accordion_ACT_Accordion" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Accordion</title> <style> .accordionCabecera { border: 1px solid black; background-color: #ffd800; font-family: Arial, Sans-Serif; font-size: 14px; font-weight: bold; padding: 4px; margin-top: 4px; cursor: pointer; } .accordionContenido { font-family: Sans-Serif; background-color: #fff8ab; border: 1px solid black; border-top: none; font-size: 12px;

padding: 7px; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager id="ScriptManager" runat="server" /> <ajaxToolkit:Accordion ID="Accordion1" runat="server" FadeTransitions="True" FramesPerSecond="50" Width="250px" TransitionDuration="200" HeaderCssClass="accordionCabecera" ContentCssClass="accordionContenido"> <Panes> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header>Panel 1</Header> <Content>Contenido 1</Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane runat="server"> <Header>Panel 2</Header> <Content>Contenido 2</Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane runat="server"> <Header>Panel 3</Header> <Content>Contenido 3</Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion> </div> </form> </body> </html>

Al tratarse de nuestro primer ejemplo, hemos mostrado todo el cdigo de la pgina al completo. El motivo es que tengamos en cuenta que al arrastrar el control Accordion desde nuestra caja de herramientas, automticamente quedar registrado el Assembly correspondiente. Sin embargo, lo que no se har automticamente, y debemos hacerlo nosotros siempre, es incluir una referencia al ScriptManager, lo que no requiere ms que otro sencillo arrastre desde nuestra caja de herramientas. Adems, y como es obvio, debern definirse las clases CSS tanto de la cabecera como del contenido. En el resto de ejemplos, no mostraremos ms que el cdigo especfico del control en el que estemos trabajando.

AlwaysVisibleControl
Descripcin
El AlwaysVisibleControl es uno de los controles Web del ASP.NET AJAX Control Toolkit ms simples. Su funcionalidad consiste en dejar clavado el contenido en un punto especfico de la pgina. Un ejemplo sera el que cierto mensaje se muestre siempre en la parte inferior derecha de nuestra pgina, y que se mantenga en la misma posicin de la pantalla del usuario cuando se haga scroll sobre la pgina.

Propiedades
TargetControlID: ID del control que queremos que el AlwaysVisibleControl clave en la posicin que determinemos. Habitualmente suele tratarse de un Panel. HorizontalSide: ubicacin horizontal (derecha o izquierda) donde se clavar el control. Es una propiedad optativa que por defecto vale left. HorizontalOffset: distancia horizontal en pixels desde el objeto hasta el lado que definamos en el HorizontalSide. Es optativo y por defecto vale 0 px. VerticalSide: ubicacin vertical (arriba o abajo) donde se clavar el control. Es una propiedad optativa que por defecto vale top. VerticalOffset: distancia vertical en pixels desde el objeto hasta el lado que definamos en el VerticalSide. Es optativo y por defecto vale 0 px. ScrollEffectDuration: define la cantidad de segundos entre que la pgina hace scroll hasta que el control se posiciona donde definamos. Por defecto vale 0.1 segundos y siempre debe ser mayor que cero.

Ejemplo
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> de mensaje </asp:Panel> <ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="Panel1" VerticalSide="Bottom" VerticalOffset="10" HorizontalSide="Right" HorizontalOffset="10" ScrollEffectDuration="0.0001"> </ajaxToolkit:AlwaysVisibleControlExtender>

Animation
Descripcin
Y para el final dejamos dos controles que son, sin duda alguna, los ms espectaculares del ASP.NET AJAX Control Toolkit. El primero de todos es el Animation. El Animation es un extendedor que permite aplicar sobre el elemento elegido las animaciones que nos permiten el Animation Framework. El Animation Framework es una aquitecturo de animaciones creadas para ASP.NET AJAX y que, a pesar de no ser demasiado complicadas, mereceran un artculo completo para su correcta explicacin. A modo de tanteo, diremos que las animaciones proporcionadas por el Animation Framework y que podremos aplicar con nuestro extendedor Animation, nos permiten asignar efecto de fadeIn y fadeOut, pulse, Scale o acciones javascript, tanto en modo secuencia, en modo paralelo o cualquier combinacin imaginable de las dos.

Propiedades
TargetControlID: ID del control a partir del cual y sobre el cual vamos a aplicar las animaciones. OnLoad: elemento bajo el cual aadiremos las animaciones que se iniciarn tras la carga del control. OnClick: elemento bajo el cual aadiremos las animaciones que se iniciarn hacer click sobre el control. OnMouseOver: elemento bajo el cual aadiremos las animaciones que se iniciarn tras pasar el mouse sobre el control. OnMouseOut: elemento bajo el cual aadiremos las animaciones que se iniciarn tras sacar el mouse de encima del control. OnHoverOver: Similar a OnMouseOver, solo que parar la animacin OnHoverOut antes de ejecutarse. OnHoverOut: Similar a OnMouseOut, solo que parar la animacin OnHoverOver antes de ejecutarse.

Ejemplo
Apliquemos el uso del control Animation. Para aprender a usar animaciones, se recomienda visitar la web oficial, donde encontraremos ejemplos de uso y una referencia completa: - http://ajax.asp.net/ajaxtoolkit/Walkthrough/UsingAnimations.aspx - http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx <asp:Panel ID="Panel1" runat="server" Width="125px" BorderWidth="1px" BackColor="Yellow"> Pasa por encima mo y luego vete. Tambin puedes hacerme clic ;) </asp:Panel> <ajaxToolkit:AnimationExtender id="MyExtender" runat="server" TargetControlID="Panel1"> <Animations> <OnMouseOver> <FadeOut Duration="2.5" Fps="20" /> </OnMouseOver> <OnMouseOut> <FadeIn Duration=".5" Fps="20" /> </OnMouseOut> <OnClick> <Sequence> <Pulse Duration=".1" /> <Parallel Duration=".5" Fps="30"> <FadeOut /> <Scale ScaleFactor="5" Unit="px" Center="true" ScaleFont="true" FontUnit="pt" /> </Parallel> </Sequence> </OnClick> </Animations> </ajaxToolkit:AnimationExtender>

CascadingDropDown
Descripcin
Imaginemos un escenario en que tenemos 3 listas desplegables. La primera de ellas tiene unos items determinados, pero la segunda lista depende del valor que se le d a la primera y la tercera lista del valor que se le d a la segunda. Hasta ahora tenamos dos opciones: - Implementar una compleja serie de funciones javascript, - Utilizar ASP.NET recargando las pginas. En el primer caso quedaba muy profesional de cara al cliente, pues ste manejaba muchos datos de forma muy rpida y sin recargar la pgina... sin embargo era muy poco profesional del cara al programador pues la complejidad en el javascript se incrementaba exponencialmente. En el segundo caso el programador consegua una programa estable, rpido y fcilmente modificable, pero el usuario vea cmo se recargaba la pgina entera cada vez que elega una

opcin diferente. Pues bien, con el CascadingDropDown solucionamos los problemas y nos quedamos con las ventajas: no se recargar la pgina y se definir el contenido de los DropDownList mediante ASP.NET

Propiedades
TargetControlID: el ID de la lista desplegable a la que se aplicar. Category: se define como el nombre de la categora que la lista desplegable representa. Su utilidad ser la de representar uno de los dos parmetros de entrada al ServiceMethod que estudiaremos posteriormente PromptText: es un texto opcional que ver el usuario cuando la lista desplegable est vaca. LoadingText: tambin es un texto opcional que ver el usuario cuando el dato se est cargando. ServicePath: define el path del servicio web que devuelve la informacin que se usar para rellenar la lista desplegable. Si el servicio web se encuentra en la propia pgina en que estamos trabajando, no pondremos nada en esta propiedad. ServiceMethod: le dedicamos un apartado exclusivo ParentControlID: ID de la lista desplegable de cuya seleccin depende esta lista desplegable. En nuestro ejemplo, si esta es la lista desplegable 2, el ParentControlID apuntara a la lista desplegable 2. Gracias a ParentControlId creamos una jerarqua de listas desplegables. En caso de estar en lo ms alto de la jerarqua no pondramos nada. SelectedValue: valor que vendra seleccionado por defecto. Es opcional.

ServiceMethod
El es la funcin a la que se llamar para rellenar la lista desplegable. Tendr el siguiente aspecto: [WebMethod] public CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category){...} ...donde lo nico que se podr cambiar ser el nombre de la funcin, pues el resto debe ser igual. Observamos que: La funcin debe ir precedida por [WebMethod]. CascadingDropDownNameValue es un tipo de dato dentro del namespace AjaxControlToolkit (que en nuestro ejemplo suponemos ya importado mediante using (C#) o import (VB)). El segundo parmetro (category) se corresponde con el atributo Category que hemos indicado en nuestro control CascadingDropDown. Mencin especial merece el primer parmetro. En ste se almacena el valor seleccionado de cada una de las listas desplegables predecesoras en la jerarqua. Siguiendo con nuestro ejemplo, si estuviramos dentro del definido en la lista desplegable 3, el contenido del primer parmetro sera similar a:

Category1:valor1;category2:valor2 Pero no cabe asustarse, no hace falta que parseemos a mano esa informacin, pues dispondemos del mtodo ParseKnownCategoryValuesString que har ese trabajo por nosotros, de modo que haciendo: StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit .CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues); ... obtenemos un StringDictionary bien ordenado y sencillo de utilizar.

Ejemplo
Nota 1: hay que importar los siguientes namespaces: - System.Web.Services - AjaxControlToolkit - System.Collections.Specialized Nota 2: EnableEventValidation debe valer false El uso avanzado del CascadingDropDownList implica un estudio ms en profundidad de todas sus caractersticas. En los diferentes blogs tecnolgicos encontramos diferentes ejemplos en los que se configura la fuente de datos de diferentes listas desplegables mediante XML o ases de datos. Nosotros mostramos un sencillo ejemplo para que el lector se agilice en el uso del CascadingDropDown y pueda acceder a ejemplos mucho ms complejos. Nuestro ejemplo consta de dos listas desplegables, donde la segunda depende de la primera. En el momento hacemos una seleccin en la primera lista desplegable el mecanismo del CascadingDropDown entra en funcionamiento y se rellena la segunda lista desplegable sin que la pgina se recargue. CascadingDropDown.aspx <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> </atlas:ScriptManager> <asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem Text="Elige tu humor y te aconsejar tu color" Value="-1"> </asp:ListItem> <asp:ListItem Text="Triste" Value="Triste"> </asp:ListItem> <asp:ListItem Text="Alegre" Value="Alegre"> </asp:ListItem> </asp:DropDownList> <br /> <asp:DropDownList ID="DropDownList2" runat="server"> </asp:DropDownList> <br /> <ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2" Category="color" ServiceMethod="" ParentControlID="DropDownList1"> </ajaxToolkit:CascadingDropDown>

CascadingDropDown.aspx.cs [WebMethod] public CascadingDropDownNameValue[] (string knownCategoryValues, string category) { CascadingDropDownNameValue[] respuesta = new AjaxControlToolkit .CascadingDropDownNameValue[2]; if (category == "color") { StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit .CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues); if (DropDownList1.SelectedValue != "-1") { if (DropDownList1.SelectedValue == "Alegre") { respuesta[0] = new CascadingDropDownNameValue("Amarillo", "Amarillo"); respuesta[1] = new CascadingDropDownNameValue("Naranja", "Naranja"); } else if (DropDownList1.SelectedValue == "Triste") { respuesta[0] = new CascadingDropDownNameValue("Gris", "Gris"); respuesta[1] = new CascadingDropDownNameValue("Azul marino", "Azul_marino"); } } } return respuesta; }

CollapsiblePanel
Descripcin
Con el CollapsiblePanel conseguiremos que cualquier control ASP.NET pueda ser maximizado o minimizado a nuestro antojo. Distinguiremos entre el contenido, que ser el control que vaya a cerrarse y abrirse (por ejemplo un Panel) y el controlador, que ser el control sobre el que deberemos hacer clic para cerrar y/o abrir el contenido. El estado del contenido (abierto o cerrado) es guardado a lo largo de los postbacks, por lo que permanecer igual cuando recarguemos una pgina. Adems, podemos especificar si queremos que el contenido tenga una altura y/o anchura determinadas, o por el contrario permitimos que se dimensione como requiera.

Propiedades
TargetControlID: el ID del control Web correspondiente al contenido. CollapsedSize: el tamao en pixels del contenido cuando est cerrado. Lo habitual es ponerlo a 0, de modo que queda totalmente cerrado. ExpandedSize: el tamao en pixels del contenido cuando est abierto. Collapsed: especifica el estado del contenido cuando se inicializa la pgina. Puede ser collapsed (cerrado) o expanded (abierto).

 Scroll Contents: si especificamos true, se aadir una barra de scroll cuando el tamao sobrepaso al especificado en CollapsedSize y ExpandedSize. Si no queremos que se produzca ningn efecto, lo pondremos a false. ExpandControlID/CollapseControlID: el ID del control Web correspondiendo al controlador. Como vemos podemos elegir un controlador que maximice el contenido y otro que lo minimice. Habitualmente ambos atributos apuntan al mismo controlador. TextLabelID: el ID de la Label donde se especificar el estado en que se encuentra el contenido (ver las dos prximas propiedades). CollapsedText: texto que se mostrar en la Label especificada en TextLabelId cuando el controlador est cerrado. ExpandedText: texto que se mostrar en la Label especificada en TextLabelId cuando el controlador est abierto. ImageControlID: En lugar de un texto, podemos especificar una imagen para que sea sta la que describa el estado en que se encuentra el contenido. Si adems tambin hemos especificado un texto, ste se corresponder con el texto alternativo de la imagen (el atributo alt). CollapsedImage: Path que apunta a la imagen que se mostrar cuando el contenido est minimizado. ExpandedImage: Path que apunta a la imagen que se mostrar cuando el contenido est maximizado. ExpandDirection: podemos definir que el contenido se abra de arriba a abajo o de izquierda a derecha. En el primer caso asignaremos Vertical y en el segundo Horizontal.

Ejemplo
<asp:Label ID="Label1" runat="server" Text="Label" CssClass="CP"></asp:Label> <asp:Panel ID="Panel1" runat="server" Width="120px"> Este es el contenido que ser abierto o cerrado mediante el controlador, que se corresponde con el texto de arriba. ste a su vez describir el estado. </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel1" CollapsedSize="0" ExpandedSize="300" Collapsed="True" ExpandControlID="Label1" CollapseControlID="Label1" TextLabelID="Label1" CollapsedText="Abrir contenido" ExpandedText="Cerrar contenido" ExpandDirection="Vertical"/> </ajaxToolkit:CollapsiblePanelExtender>

ConfirmButton
Descripcin
Con el ConfirmButton conseguimos una sencilla funcionalidad. Lo asignaremos a un Button, LinkButton o Hyperlink, de modo que cuando se haga clic sobre ste, el navegador nos muestre una ventana de confirmacin. En sta deberemos elegir s o no para que se ejecute o no el evento asociado al control en cuestin.

Propiedades
TargetControlID: ID del control al que aplicaremos el efecto el ConfirmButton. ConfirmText: texto que se mostrar al presionar sobre el control. Por ejemplo Realmente desea ejecutar?

Ejemplo
Mostraremos un botn que se ocupar de recargar la pgina. Cuando se nos muestre la ventana de confirmacin elegiremos si realmente deseamos recargarla o no. <asp:Button ID="Button1" runat="server" Text="Recargar pgina" /> <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server" TargetControlID="Button1" ConfirmText="Realmente desea recargar la pgina?" /> </ajaxToolkit:ConfirmButtonExtender>

DragPanel
Descripcin
El DragPanel sera el ejemplo perfecto de cmo conseguir una funcionalidad avanzada, que en javascript requerira decenas de lneas de programacin, con apenas dos lneas de cdigo y una mayor flexibilidad. Se aplica a cualquier control Web (el ms habitual es el Panel) y le aade la funcionalidad de poder arrastrarlo a cualquier parte de la pantalla. Vamos a distinguir entre el controlador y el contenido, donde el controlador es sobre lo que deberemos hacer clic y arrastrar para mover el contenido.

Propiedades
TargetControlID: el ID del control correspondiente al contenido. DragHandleID: el ID del control correspondiente al controlador.

Ejemplo
<asp:Panel ID="Panel3" runat="server" Height="50px" Width="125px"> <asp:Panel ID="Panel1" runat="server" Width="125px" BackColor="Yellow" Font-Bold="true" BorderColor="black" BorderWidth="1"> Arrstrame </asp:Panel> <asp:Panel ID="Panel2" runat="server" Height="250px" Width="125px" BorderColor="black" BorderWidth="1">

Este es el contenido que vamos a poder arrastrar por toda la pantalla. </asp:Panel> </asp:Panel> <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" DragHandleID="Panel1" TargetControlID="Panel3"> </ajaxToolkit:DragPanelExtender> <script type="text/javascript"> // Pequeo script para una correcta compatibilidad con todos los navegadores. function setBodyHeightToContentHeight() { document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px"; } setBodyHeightToContentHeight(); $addHandler(window, "resize", setBodyHeightToContentHeight); </script>

DropDown
Descripcin
Un sencillo control que le da un aspecto muy avanzado y profesional a nuestra pgina, as como resultar se muy til. Consiste en hacer aparentar un DropDown donde no lo hay. Por ejemplo, imaginemos que tenemos dos paneles y que al hacer click sobre uno queremos que aparezca el segundo panel del mismo modo que aparece el contenido de una lista desplegable (en la imagen lo veremos mejor.

Propiedades
TargetControlID: ID del control sobre el que aplicaremos los efectos. Normalmente ser un Panel, pero puede ser cualquier cosa. DropDownControlID: El Id del Panel que ser mostrado como una lista desplegable.

Ejemplos
<asp:Label ID="TextLabel" runat="server" Text="Ponte sobre m" Font-Names="Tahoma" FontSize="11px" Style="display: block; width: 300px; padding:2px; padding-right: 50px;" /> <asp:Panel ID="DropPanel" runat="server" Style="display:none;visibility:hidden; fontfamily:Tahoma; font-size: 11px; padding:5px;"> Aqu puede haber cualquier control: imgenes, MultiViews... lo que queris!!<br /> Por ejemplo, pongamos un Calendario: <br /> <br /> <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" />

<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> <br /> Si pusiramos el calendarios sobre un UpdatePanel... podramos hacer maravillas ;) </asp:Panel> <ajaxToolkit:DropDownExtender runat="server" ID="DDE" TargetControlID="TextLabel" DropDownControlID="DropPanel" />

DropShadow
Descripcin
El DropShadow extiende al control Panel con dos caractersticas muy interesantes: - Aade una sombra, permitindonos definir tanto su profundidad como su oscuridad. - Crea un efecto de redondeado del Panel. Por consiguiente, conseguimos dos efectos muy profesionales de forma tremendamente sencilla.

Propiedades
TargetControlID: ID del Panel sobre el que aplicaremos los efectos. Width: profundidad en pixels de la sombra. Es un parmetro opcional que por defecto vale 5. Opacity: valor decimal en tre 0 y 1 que define la opacidad de la sombra, donde el 0 corresponde a transparencia total y 1.0 a completamente opaco. Tambin es opcional y su valor por defecto es 0.5. TrackPosition: lo pondremos a true si nuestro panel lo hemos definido con posicin absoluta o si va a poder ser movido. En caso contrario pondremos false (o no ponemos nada). Rounded: Si queremos un efecto de redondeado lo pondremos a true, sino, vale con ponerlo a false.

Ejemplo
<asp:Panel ID="Panel1" runat="server" Width="125px" BackColor="Yellow" Font-Names="Arial"> <div style="padding:5px"> En este panel podemos poner lo que queramos. El efecto de sombreado + bordeado es muy agradable a la vista. </div> </asp:Panel> <ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" Opacity="1" Width="5" TargetControlID="Panel1" Rounded="true">

</ajaxToolkit:DropShadowExtender>

DynamicPopulate
Descripcin
Se trata de otro sencillo extendedor. Su funcionalidad consiste en permitir que en base a un evento (por ejemplo el click de un botn) se lea el resultado de un WebService o un mtodo de la propia pgina, y ste se escriba en un control, por ejemplo un Label... obviamente sin recargar la pgina. El valor que debe devolver el servicio Web o el mtodo de la pgina debe ser un string en formato HTML.

Propiedades
TargetControlID: el ID del control sobre el que se escribir el resultado. Tpicamente es un Label o un TextBox. ClearContentsDuringUpdate: propiedad opcional (por defecto vale true) en la que indicamos si durante la llamada al WebService o mtodo de pgina el valor del control debe borrarse. ServicePath: Url del servicio web al que haremos la llamada. Si lo que estamos es llamando a un mtodo de pgina, nos pondremos nada. ServiceMethod: nombre del mtodo al que estamos llamando. Su firma debe ser de este tipo: [WebMethod] public string DynamicPopulateMethod(string contextKey){...} PopulateTriggerControlID: control desde el que haremos clic para comenzar el proceso. Tpicamente es un Button o un LinkButton. UpdatingCssClass: cuando se ha iniciado la llamada, podemos querer demostrar al usuario que hemos iniciado el proceso. Con esta propiedad asignaremos la clase CSS que aplicaremos al control. CustomScript: en lugar de llamar a un mtodo de pgina o WebService, podemos llamar a un mtodo de javascript. ContextKey: se trata del string que se le pasar al mtodo como parmetro, de modo que podamos tratarlo en ste y dar una respuesta personalizada.

Ejemplo
Tenemos un Button y una Label, de modo que cuando presionemos sobre el Button se llame a un mtodo de la pgina que nos devuelve un nmero aleatorio menor que 1000. DynamicPopulate.aspx <input runat="server" id="Button1" type="button" value="button" /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <ajaxToolkit:DynamicPopulateExtender ID="DynamicPopulateExtender1" runat="server" ClearContentsDuringUpdate="true" PopulateTriggerControlID="Button1" ServiceMethod="DynamicPopulateMethod" TargetControlID="Label1"> </ajaxToolkit:DynamicPopulateExtender> DynamicPopulate.aspx.cs using System.Web.Services; [WebMethod] public string DynamicPopulateMethod(string contextKey) { Random r = new Random(); return r.Next(1000).ToString(); }

FilteredTextBox
Descripcin
El FilteredTextBox extiende al TextBox de modo que podemos definir qu tipo de caracteres permitimos que escriba el usuario. Elegiremos entre estas configuraciones y sus mltiples combinaciones: - Numbers: todos los nmeros - LowercaseLetters: letras minsculas. - UppercaseLetters: letras maysculas. - Custom: los caracteres que definamos.

Propiedades
TargetControlID: ID del TextBox sobre el que vamos a actuar. FilterType: Tipo de filtro de entre los que hemos definido previamente. Los combinaremos separndolos en comas. ValidChars: slo se le har caso si hemos elegido a Custom como FilterType. Ser un string con los caracteres que consideraremos vlidos.

Ejemplo
En nuestro ejemplo vamos a permitir que en nuestro TextBox se escriban nicamente nmeros y los signos matemticos +, -, * y /. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1"

FilterType="Numbers,Custom" ValidChars="+-*/" > </ajaxToolkit:FilteredTextBoxExtender>

HoverMenu
Descripcin
El HoverMenu es un extendedor aplicable a cualquier control Web. Vamos a distinguir entre el cuerpo y el popup, de modo que cuando el ratn pase sobre el control web cuerpo, el control web popup aparezca en el lugar en que hayamos especificado. Adems, cuando esto suceda, podemos aplicar una clase CSS al control web cuerpo, haciendo ver al usuario que es el causante de que aparezca el popup.

Propiedades
TargetControlID: ID del control identificado como cuerpo. PopupControlID: ID del control identificado como popup. HoverCssClass: clase CSS que se aplicar al cuerpo cuando pasemos el ratn sobre ste. PopupPostion: lugar donde aparecer el popup con respecto al cuerpo. Por defecto vale Left, y sus otros valores son Right, Bottom y Center. OffsetX/OffsetY: una vez definido el PopupPosition, podemos aadir o quitar pixels en horizontal o en vertical con respecto a su posicin relativa. PopDelay: la cantidad de milisegundos que pasarn entre que nos posemos sobre el cuerpo hasta que aparezca el popup. Por defecto son 100.

Ejemplo
En nuestro ejemplo, el cuerpo se corresponde con un botn y el popup con un Panel, de modo que cuando el usuario vaya a hacer clic sobre el botn, se muestre un mensaje (Podemos asignarle cualquier propiedad al Panel): <asp:Button ID="Button1" runat="server" Text="Haz clic" /> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" BackColor="Yellow" BorderWidth="1px" ScrollBars="Auto"> Si presionas sobre el botn, se recargar la pgina. </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" PopupControlID="Panel1" TargetControlID="Button1" PopupPosition="Right" OffsetX="10"> </ajaxToolkit:HoverMenuExtender>

ModalPopup
Descripcin
El ModalPopup es otro ejemplo de potente funcionalidad en muy pocas lneas de cdigo. Con ste, conseguimos el efecto de mostrar contenido deshabilitando la interaccin con el resto de la pgina. Podemos emular el efecto del famoso window.open(...) de javascript sin necesidad de salir de la pgina en que estamos ni de abrir una nueva ventana del navegador. Imaginemos que el usuario presiona el botn Dime tu nombre y apellidos, de repente la pgina se oscurece y aparece en el centro un cuadro donde se pide el nombre y los apellidos... todo ello sin salir de la pgina en que estamos y sin poder hacer nada con el resto de elementos de sta. As pues, el usuario puede elegir entre cancelar -para volver donde estaba antes- y rellenar sus datos y presionar OK, activando una llamada a una funcin javascript que hayamos definido. Distinguiremos entre el activador, que en nuestro ejemplo es el botn Dime tu nombre y apellidos, y el popup, que en nuestro ejemplo se corresponde con el panel que nos mostrar el formulario de entrada de datos del usuario.

Propiedades
TargetControlID: ID del control activador. Tpicamente ser un Button o un LinkButton. PopupControlID: ID del control popup. Tpicamente ser un Panel. BackgroundCssClass: clase CSS que se aplicar al fondo de pantalla, por ejemplo para dar un efecto de oscuridad a los elementos sobre los que no vamos a poder interactuar. DropShadow: le daremos el valor de true si queremos que se aada un efecto de sombra a nuestro control popup. OkControlID: el ID del elemento que produce el efecto de OK de nuestro popup. OnOkScript: nombre del script que se activar cuando presionemos sobre OK. OkCancelID - The ID of the element that cancels the modal popup OmCancelScript - Script to run when the modal popup is dismissed with the CancelControlID

Ejemplo
En nuestro ejemplo, el activador ser un Button que mostrar una ventana emergente (popup). Desde sta actuaremos de forma diferente si presionamos sobre OK o sobre Cancel. En nuestro ejemplo hemos presionado OK <asp:Button ID="Button1" runat="server" Text="Abrir ventana emergente" /> <asp:Panel ID="Panel1" runat="server" Width="125px" BackColor="yellow"> Ventana emergente debida a la llamada del botn <br /> <asp:Button ID="Button2" runat="server" Text="OK" /> <asp:Button ID="Button3" runat="server" Text="Cancel" /> </asp:Panel> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="Button3" OkControlID="Button2" OnCancelScript="Cancel()"

OnOkScript="OK()" PopupControlID="Panel1" TargetControlID="Button1"> </ajaxToolkit:ModalPopupExtender> <script type="text/javascript"> function OK() { alert('Has apretado OK'); } function Cancel() { alert('Has apretado Cancel'); } </script>

MutuallyExclusiveCheckBox
Descripcin
El MutuallyExclusiveCheckBox extiende al control CheckBox. Aadiendo varios checkboxes con la misma Key, nos aseguramos que slo uno de ellos puede estar seleccionado a la vez, de forma muy similar a como funciona el RadioButton, con la particularidad de que deseleccionar un CheckBox es inmediato, mientras que hacerlo a un RadioButton no es posible directamente y hay que acudiar a funciones javascript

Propiedades
TargetControlID: ID del checkbox que vamos a manejar. Key: clave que asociar a varios checkboxes.

Ejemplo
Trabajaremos con 3 CheckBox a la vez, aplicndoles la misma Key en el extendedor, de modo que slo puede estar seleccionado un CheckBox, el cual podemos deseleccionar clickando en l, o ser deseleccionado cuando clickemos en otro. <asp:CheckBox ID="CheckBox1" runat="server" Text="Opcin A" /> <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MutuallyExclusiveCheckboxExtender1" TargetControlID="CheckBox1" Key="MSCoderExamples" /> <asp:CheckBox ID="CheckBox2" runat="server" Text="Opcin B" /> <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MutuallyExclusiveCheckboxExtender2" TargetControlID="CheckBox2" Key="MSCoderExamples" /> <asp:CheckBox ID="CheckBox3" runat="server" Text="Opcin C" /> <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MutuallyExclusiveCheckboxExtender3" TargetControlID="CheckBox3" Key="MSCoderExamples" />

NoBot
Descripcin
El NoBot es un potentsimo control que nos ayudar a luchar contra el spam. Su funcionalidad trata de emular a los Captcha, de modo que se trata de evitar que un robot haga varios postback en la Web. Recordemos que los Captcha suelen ser imgenes de caracteres distorsionados sobre los que un humano tiene que evaluar qu caracteres son e introducirlos. Por tanto, un Captcha es mucho ms seguro que un NoBot, pero el NoBot no requiere participacin humana alguna, por lo que se hace transparente al usuario y le evita molestias.

As pues, podremos aplicar el NoBot sobre aplicaciones Web donde el Spam no sea un problema crtico, sino simplemente molesto.

Propiedades
OnGenerateChallengeAndResponse: mtodo de servidor opcional desde donde podemos implementar un trabajo especfico extra para ayudar al NoBot a detectar robots. Lo veremos mejor en el ejemplo. ResponseMinimumDelaySeconds: nmero de segundos por debajo de los cuales un postback se considerar invlido. CutoffWindowSeconds: ventana de tiempo en segundos utilizada por el CutoffMaximumInstances. CutoffMaximumInstances: cantidad de PostBacks permitidos por una misma IP en la ventana de tiempo definida por CutoffWindowSeconds.

Ejemplo
Vamos a trabajar con el NoBot desde dos frentes. Por una parte no permitiremos que se hagan dos PostBacks en menos de 6 segundos (tiempo exagerado para hacer mejor la prueba. Por otro lado, mediante la funcin CustomChagellengeResponse, vamos a exigir que el navegador implemente el motor DOM, algo que s hacen todos los navegadores modernos, pero no es comn en Robots de Spam. La comprobacin de si se ha pasado el Test la hacemos en el manejador del evento Load de la pgina, indicando si procede- el motivo por el cual no se ha pasado la prueba. NoBot.aspx <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <br /> <asp:Button ID="Button1" runat="server" Text="Button" /> <ajaxToolkit:NoBot ID="NoBot1" runat="server" ResponseMinimumDelaySeconds="6" OnGenerateChallengeAndResponse="CustomChallengeResponse" /> NoBot.aspx.cs protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { AjaxControlToolkit.NoBotState estado; if (!NoBot1.IsValid(out estado)) Label1.Text = "Eres un robot: " + estado.ToString(); else Label1.Text = "No eres un robot ;)"; } } protected void CustomChallengeResponse(object sender, AjaxControlToolkit.NoBotEventArgs e) { // Implicamos al motor DOM del navegador, exigindole unos sencillos calculos sobre el rea de un Panel que nos inventamos Panel p = new Panel(); p.ID = "ParaMSCoder"; Random rand = new Random(); p.Width = rand.Next(300);

p.Height = rand.Next(200); p.Style.Add(HtmlTextWriterStyle.Visibility, "hidden"); p.Style.Add(HtmlTextWriterStyle.Position, "absolute"); ((AjaxControlToolkit.NoBot)sender).Controls.Add(p); e.ChallengeScript = string.Format("var e = document.getElementById('{0}'); e.offsetWidth * e.offsetHeight;", p.ClientID); e.RequiredResponse = (p.Width.Value * p.Height.Value).ToString(); }

NumericUpDown
Descripcin
El NumericUpDown extiende al control Web TextBox habilitando unos botones que incrementan/decrementan el valor de ste. El incremento/decremento puede corresponder a: - El simple +1/-1 aritmtico. - Subir o bajar dentro de un listado de valores que le demos. - Llamar a un servicio Web o un mtodo de la pgina diferente segn si incrementamos o decrementamos. Podremos asignar botones para que hagan de incrementador/decrementador o dejar los que hay por defecto.

Propiedades
TargetControlID: ID del TextBox sobre el que vamos a actuar. Width: anchura combinada del TextBox y sus botones de arriba/abajo que vienen dados por defecto (mnimo 25). Si elegimos que otros botones hagan esa funcin, est propiedad se ignorar. RefValues: listado de valores sobre los que querremos ir subiendo y bajando. Los daremos en forma de string separado por punto y coma ;. TargetButtonDownID/TargetButtonUpID: ID de los botones que har la funcin de incrementar y decrementar. ServiceDownPath/ServiceUpPath: path del servicio Web al que llamaremos cuando se incremente o decremente. En caso de estar trabajando con mtodos de pgina no utilizaremos esta propiedad. ServiceDownMethod/ServiceUpMethod: mtodo que ser llamado para incrementar/decrementar el TextBox. Deber tener la forma: [WebMethod] public int NextValue(int current, string tag) {} Tag: se corresponde con el segundo parmetro del mtodo al que llamaramos, y lo podemos utilizar para distinguir qu elemento est llamando al mtodo.

Ejemplo
En nuestro sencillo ejemplo, vamos a viajar por los planetas del sistema solar, donde ya no incluiremos a nuestro querido Plutn.

<asp:TextBox ID="TextBox1" runat="server" Text="Tierra" Width="120" style="textalign:center"></asp:TextBox> <cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server TargetControlID="TextBox1" Width="120" RefValues="Mercurio;Venus;Tierra;Marte;Jpiter;Saturno;Urano;Neptuno" ServiceDownMethod="" ServiceUpMethod="" TargetButtonDownID="" TargetButtonUpID=""> </cc1:NumericUpDownExtender>

PagingBulletedList
Descripcin
El PagingBulletedList extiende a la BulletedList confirindole propiedades de paginacin y de ordenacin en cliente. Es decir, nosotros tendremos el tpico listado HTML, tan largo como queramos, al que le aplicaremos el PagingBulletedList y ste lo paginar segn su ndice (los primeros caracteres) o por nmero de items por ndice. Todo en cliente, por lo que vamos a poder cambiar de ndice sin recargar. El resultado es tremendamente profesional, fcil de usar y muy manejable.

Propiedades
TargetControlID: ID del BulletedList sobre el que vamos a trabajar. ClientSort: podemos elegir entre ordenar alfabticamente (true) o no (false). IndexSize: Nmero de caracteres en el ndice de cabecera. MaxItemPerPage: Mximo nmero de items por cada pgina. Predomina sobre IndexSize. Separator: El texto que separa los ndices de cabecera. Tpicamente ser un guin -. SelectIndexCssClass: Clase CSS que se aplicar al ndice elegido. Normalmente se le aplicar negrita y/o subrayado. UnselectIndexCssClass Clase CSS que se aplicar a los ndices que no estn elegidos.

Ejemplo
Mostramos un simple listado con 6 elementos desordenados que vamos a ordenar y aplicaremos como ndice de cabecera el primer carcter. <asp:BulletedList ID="BulletedList1" runat="server"> <asp:ListItem Text="Braulio"></asp:ListItem> <asp:ListItem Text="Arturo"></asp:ListItem> <asp:ListItem Text="Sofa"></asp:ListItem> <asp:ListItem Text="Andrs"></asp:ListItem> <asp:ListItem Text="Begoa"></asp:ListItem> <asp:ListItem Text="Antonio"></asp:ListItem> </asp:BulletedList> <cc1:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server ClientSort="true" IndexSize="1" Separator="-"

TargetControlID="BulletedList1"> </cc1:PagingBulletedListExtender>

PasswordStrength
Descripcin
El PasswordStrength es otro extendedor del TextBox. Con l podremos mostrar al usuario el nivel de fortaleza que tiene la contrasea que est escribiendo, en base a unos parmetros tpicos de fortaleza que definiremos nosotros: - Nmero total de caracteres. - Exigencia de signos. - Exigencia de combinar maysculas y minsculas. - Exigencia de nmeros. Podemos elegir y configurar los dos modos que tenemos de mostrar al usuario la fortaleza de su password: - Mediante texto 100% configurable. - Mediante una barra que se ir rellenando. Adems, podemos aadir la opcin de ayuda, donde explicar al usuario cmo debe ser su contrasea.

Propiedades
TargetControlID: ID del TextBox sobre el que vamos a trabajar. DisplayPosition: posicin relativa del indicador con respecto al TextBox. Puede tomar 6 valores: AboveLeft, AboveRight, BelowLeft, BelowRight, LeftSide, RightSide. StrengthIndicatorType: tipo de indicador: Text o BarIndicator. PreferredPasswordLength: longitud mnima que debera tener la contrasea. PrefixText: prefijo a mostrar cuando estemos mostrando el texto que describa la fortaleza de la contrasea. Tpicamente ser Fortaleza= . TextCssClass: clase CSS que se aplicar al texto que describe la fortaleza de la contrasea. MinimumNumericCharacters: cantidad mnima de caracteres numricos. MinimumSymbolCharacters: cantidad mnima de signos (ej.: $ ^ *) RequiresUpperAndLowerCaseCharacters: especificamos si exigimos la combinacin de maysculas y minsculas. TextStrengthDescriptions: listado de texto que se usar para describir la fortaleza de la contrasea. Ir ordenado de dbil a fuerte y separado por punto y coma ;. Tendr un mnimo de 2 textos y un mximo de 10. Por ejemplo: muy dbil;dbil;mejorable;buena;perfecta. CalculationWeightings: listado de 4 valores numricos separados por ;, donde la suma de ellos debe dar 100. Cada valor asigna un porcentaje de importancia a una caracterstica del password; por ejemplo 40;25;15;20 significa que el 40% del peso de fortaleza viene de la longitud de la contrasea, el 25% a la cantidad de nmeros, el 15% a maysculas/minsculas y el 20% a la cantidad de caracteres no alfanumricos. BarBorderCssClass: Clase CSS del borde de la barra indicadora.

 BarIndicatorCssClass: Clase CSS del interior de la barra indicadora. HelpStatusLabelID: ID de la Label que usaremos opcionalmente- para mostrar el texto de ayuda. HelpHandleCssClass: clase CSS del elemento que mostrar el texto de ayuda. HelpHandlePosition: posicin relativa del elemento de ayuda con respecto al TextBox. Puede tomar 6 valores: AboveLeft, AboveRight, BelowLeft, BelowRight, LeftSide, RightSide.

Ejemplo
Veamos qu fortaleza nos asigna este control: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <cc1:PasswordStrength ID="PasswordStrength1" runat="server" DisplayPosition="rightside" MinimumNumericCharacters="2" MinimumSymbolCharacters="2" PreferredPasswordLength="13" PrefixText="Fortaleza: " RequiresUpperAndLowerCaseCharacters="true" StrengthIndicatorType="Text" TargetControlID="TextBox1" TextStrengthDescriptions="muy dbil; dbil; mejorable; buena; perfecta"> </cc1:PasswordStrength>

PopupControl
Descripcin
El PopupControl se puede aplicar a cualquier control Web al que llamaremos cuerpo- y su funcionalidad consiste en mostrar una pequea ventana emergente con infomacin adicional. Esa ventana emergente a la que llamaremos popup- puede ser tambin cualquier control Web (tpicamente un panel) y dentro de l podemos ubicar cualquier cosa. Por ejemplo, imagnese un TextBox en el que cuando se pone el ratn sobre l, emerja un calendario sobre el que podamos elegir una fecha y en el momento la elijamos, sta se plasme en el TextBox.

Propiedades
TargetControlID: ID del control cuerpo. PopupControlID: ID del control popup. Position: posicin relativa en la que aparecer el popup con respecto al cuerpo. Sus valores posibles sern: Left, Right, Top, Bottom, Center. CommitProperty: especifica la propiedad del control cuerpo que se modificar con el resultado del popup. Por ejemplo, en el caso de un TextBox, lo normal es que queramos modificar su value, aunque tambin podramos modificar su Width, su TextMode... Es opcional. CommitScript: funcin javascript que se ejecutar cuando hayamos dado el resultado del popup. OffsetX/OffsetY: distancia horizontal/vertical en pixels que aadiremos o quitaremos a la posicin relativa del popup con respecto del cuerpo.

Ejemplo
Aplicaremos el ejemplo propuesto en 3.15.1 PopUp.aspx Fecha: <asp:TextBox ID="TextBox1" runat="server" Width="80"></asp:TextBox> <asp:Panel ID="Panel1" runat="server" CssClass="popupControl"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <center> <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> </center>

</ContentTemplate> </asp:UpdatePanel> </asp:Panel> <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="TextBox1" PopupControlID="Panel1" Position="Bottom"> </ajaxToolkit:PopupControlExtender> PopupControl.aspx.cs protected void Calendar1_SelectionChanged(object sender, EventArgs e) { PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString()); }

Rating
Descripcin
Control con el que podemos mostrar al usuario el estado de una votacin as como permitir que ste vote de una forma muy intuitiva: con estrellitas. Podemos configurar prcticamente todos los parmetros: direccin, puntuacin inicial, permitir o no que se vote, etc.

Propiedades
CurrentRating: valor inicial de la puntuacin. MaxRating: valor mximo de puntuacin. ReadOnly: determinaremos si el usuario puede o no votar. StarCssClass: clase CSS para una estrella visible. WaitingStarCssClass: clase CSS de una estrella en modo de espera. FilledStarCssClass: clase CSS de una estrella rellenada. EmptyStarCssClass: clase CSS de una estrella vaca. RatingAlign: direccin en la que se mostrarn las estrellas: Vertical or Horizontal. RatingDirection: orientacin en la que se votar: de izquierda a derecha/arriba a abajo(LeftToRightTopToBottom) o de derecha a izquierda/abajo a arriba (RightToLeftBottomToTop) OnChanged: evento ClientCallBack que se ejecutar cuando el usuario vote. Tag: parmetro que se le pasar al ClientCallBack.

Ejemplo
Simple ejemplo en el que se muestran las estrellas y se muestra como manejar el resultado cuando se vota. Obvia decir que la definicin del estilo va entre los tags <head>...</head> y que para el correcto funcionamiento deben existir las imgenes especificadas: Rating.aspx <style> .ratingStar { font-size: 0pt; width: 13px;

height: 12px; margin: 0px; padding: 0px; cursor: pointer; display: block; background-repeat: no-repeat; } .filledRatingStar { background-image: url(Images/FilledStar.png); } .emptyRatingStar { background-image: url(Images/EmptyStar.png); } .savedRatingStar { background-image: url(Images/SavedStar.png); } </style> <ajaxToolkit:Rating ID="Rating1" runat="server" CurrentRating="3" MaxRating="5" StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" OnChanged="ThaiRating_Changed" /> Ranting.aspx.cs protected void ThaiRating_Changed(object sender, AjaxControlToolkit.RatingEventArgs e) { e.CallbackResult = "Valor = " + e.Value + ", Tag = " + e.Tag; }

ReorderList
Descripcin
Se trata de un control Web al que se le asigna una fuente de datos y se muestran por pantalla, de modo que estos pueden ser reordenados sin ms que arrastrarlos con el ratn. Cuando lo hemos reordenado, la fuente de datos se actualiza y/o nosotros mismos podemos capturar ese evento para actuar en consecuencia.

Propiedades
DataSourceID: el ID del datasource que se aplicar a este control. Tpicamente ser un ObjectDataSource, SqlDataSource DataKeyField: clave primaria de los datos

 SortOrderField: campo que representa el orden de los items ItemInsertLocation: determina dnde se insertar un nuevo item, al principio (Beginning) o al final (End). DragHandleAlignment indica donde se ubicar el elemento que podemos coger para arrastrar la fila. Sus posibles valores son: Top, Bottom, Left o Right. AllowReorder: indica si permitimos o no el reordenamiento. ItemTemplate: template al mostrar los items. EditItemTemplate: template al mostrar los items en modo de edicin. ReorderTemplate: template que mostrar donde se va a ubicar la fila si la soltramos ah. InsertItemTemplate: template que se mostrar cuando se aada una nueva columna. DragHandleTemplate: template que se mostrar cuando se agarra la fila y se est arrastrando. EmptyListTemplate: template a mostrar cuando el listado est vaco. PostbackOnReorder: determina si el reordenamiento debe producir un postback o callback. Deberemos activarlo si implica un borrado o modificado de datos.

Ejemplo
<ajaxToolkit:ReorderList ID="ReorderList1" runat="server" DataSourceID="ObjectDataSource1" DragHandleAlignment="Left" ItemInsertLocation="Beginning" DataKeyField="ItemID" SortOrderField="Priority" AllowReorder="true"> <ItemTemplate>...</ItemTemplate> <ReorderTemplate>...</ReorderTemplate> <DragHandleTemplate>...</DragHandleTemplate> <InsertItemTemplate>...</InsertItemTemplate> </ajaxToolkit:ReorderList>

ResizableControl
Descripcin
El ResizableControl extiende cualquier control Web (por ejemplo un Panel o una imagen) confirindole la propiedad de redimensionamiento. Podemos, por ejemplo, coger un Panel con texto y redimensionarlo a nuestro gusto sin ms que cogerlo con el ratn. Adems, aade multitud de funcionalidades, como lanzamiento de eventos onresizing y onresize con los que podemos crear lgica compleja. Su estado se mantiene durante los postbacks y sus dimensiones se pueden acceder desde cliente (javascript) y desde servidor (ASP.NET). Tambin podemos limitar su anchura y altura mximas.

Propiedades
TargetControlID: ID del control Web que vamos a poder redimensionar. HandleCssClass: clase CSS de elemento que debemos coger para redimensionar. ResizableCssClass: clase CSS que se aplicar cuando estemos redimensionando. MinimumWidth/MinimumHeight: anchura/altura mnimas. MaximumWidth/MaximumHeight: anchura/altura mximas. OnClientResize: evento que se lanzar cuando el elemento haya sido redimensionado

 OnClientResizing: evento que se lanzar cuando el elemento est siendo redimensionado. HandleOffsetX/HandleOffsetY: offsets a aplicar sobre el elemento redimensionador.

Ejemplo
<style> .handleText { width:16px; height:16px; background-image:url(images/HandleGrip.png); overflow:hidden; cursor:se-resize; } </style> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> Elemento que se va a redimensionar </asp:Panel> <ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" MinimumWidth="50" MinimumHeight="20" MaximumWidth="250" MaximumHeight="125" HandleCssClass="handleText" TargetControlID="Panel1"> </ajaxToolkit:ResizableControlExtender>

RoundedCorners
Ejemplo
Aplica un redondeado de los bordes a cualquier control Web (habitualmente un Panel). Podemos elegir el radio de redondeo.

Propiedades
TargetControlID: ID del control Web sobre el que se aplicar el redondeo. Habitualmente es un Panel. Radius: radio de redondeo de las esquinas. Por defecto vale 5. Color: color de fondo del rea redondeada en las esquinas. Por defecto se coge el color de fondo del Panel al que pertenece.

Ejemplo
<asp:Panel ID="Panel1" runat="server" Width="125px" BackColor="#557755"> Este es el panel sobre el que se aplicar el bordeado. </asp:Panel> <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel1" Radius="8"> </ajaxToolkit:RoundedCornersExtender>

Slider
Descripcin
El Slider es un extendedor del TextBox, de modo que al aplicarlo sobre l, se convierte en un deslizador (ver ejemplo). Sus funcionalidades son mltiples. Por ejemplo se puede sincronizar con un TextBox o una Label, de modo que se va mostrando el valor numrico que representa. Podemos elegir un valor mnimo y un valor mximo, as como permitir nmeros decimales. El movimiento del Slider puede ser contnuo o discreto (le marcaremos los pasos que debe dar). Adems, soporta postbacks e incluso lo podemos combinar con un UpdatePanel para viajar al servidor en modo AJAX.

Propiedades
Minimum: Valor inferior. Por defecto es 0. Maximum: Valor superior. Por defecto 100. Decimals: Cantidad de decimales. Por defecto no hay. Steps: Cuando queramos un deslizamiento discreto, marcaremos la cantidad de pasos. Value: Valor actual del deslizador. EnableHandleAnimation: Activa la animacin. HandleAnimationDuration: duracin en milisegundos de la animacin. RailCssClass: Asigna una clase CSS a la va sobre la que se mueve el deslizador. HandleCssClass: Asigna una clase CSS al deslizador. HandleImageURL: opcionalmente podemos asignar una imagen al deslizador. Length: Longitud del deslizador. Por defecto se coger la longitud del TextBox que estamos extendiendo BoundControlID: ID del TextBox o Label en el que estamos mostrando el valor del deslizador. RaiseChangeOnlyOnMouseUp: Si se activa, lanza el evento change cuando se suelta el botn izquierdo del ratn.

Ejemplo
Mostramos lo fcil que es crear un Slider. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="TextBox1"

BoundControlID="TextBox2" />

TextBoxWatermark
Descripcin
El TextBoxWatemark extiende, de nuevo, al control TextBox. Su funcionalidad consiste en que aparezca un texto (de una clase CSS especfica) en el TextBox cuando este no haya sido rellenado por el usuario, de modo que cuando hagamos clic sobre ste, ese texto desaparezca, y si nos vamos del textbox sin haber escrito nada, el texto vuelve a aparecer. Su finalidad habitual es la de mostrar al usuario cierta informacin antes de rellenar el TextBox.

Propiedades
TargetControlID: ID del TextBox que vamos a extender. WatermarkText: Texto que se mostrar cuando no haya nada escrito en el TextBox. WatermarkCssClass: la clase CSS que se aplicar al TextBox cuando no haya nada escrito.

Ejemplo
Vamos a pedir el nombre de usuario y contrasea. En la primera imagen vemos cmo quedarn los cuadros de texto nada ms cargarse la pgina; en la segunda imagen hemos hecho click sobre el primer TextBox y de inmediato se ha borrado el texto Nombre de usuario para dejarnos escribir lo que queramos. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1" WatermarkText="Nombre de usuario" /> <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" TargetControlID="TextBox2" WatermarkText="Contrasea" />

ToggleButton
Descripcin
El ToggleButton extiende al control CheckBox. Su nica funcionalidad consiste en sustituir por imgenes el estado de un CheckBox. Es decir, si el CheckBox est checked mostrar una imagen especfica, y su est unchecked mostrar otra.

Propiedades
TargetControlID: ID del CheckBox que extenderemos. CheckedImageUrl: URL de la imagen a mostrar cuando el CheckBox est Checked. UncheckedImageUrl: URL de la imagen a mostrar cuando el CheckBox est UnChecked. DisabledCheckedImageUrl: URL de la imagen a mostrar cuando el CheckBox est deshabilitado y en estedo de Checked. DisabledUncheckedImageUrl: URL de la imagen a mostrar cuando el CheckBox est deshabilitado y en estedo de UnChecked. CheckedImageAlternateText: texto alternativo de la imagen definida en CheckedImageUrl. UncheckedImageAlternateText: texto alternativo de la imagen definida en UnCheckedImageUrl. ImageHeight/ImageWidth: Altura/Anchura de la imagen que se va a mostrar.

Ejemplo
<asp:CheckBox ID="CheckBox1" Checked="true" Text="Mi CheckBox" runat="server"/> <br> <ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1" ImageWidth="19" ImageHeight="19" UncheckedImageUrl="ToggleButton_Unchecked.gif" CheckedImageUrl="ToggleButton_Checked.gif" CheckedImageAlternateText="Seleccionado" UncheckedImageAlternateText="No seleccionado" />

ValidatorCallout
Descripcin
El ValidatorCallout es un extendedor de cualquier tipo de validador (RequiredFieldValidator, RangeValidator, CustomValidator...), con el que conseguimos una vista mucho ms amable de los tpicos validadores. No tenemos que aplicar los validadores como lo hemos hecho hasta ahora (ver http://www.subgurim.net/articulos/asp-net-general-articulo48.aspx), pero con el detalle de aadirles el atributo Display=None y asignarles el ValidatorCallout.

Propiedades
TargetControlID: ID del Validador que se est extendiendo. Width: Anchura del Callout

 HighlightCssClass: Opcionalmente se puede asignar una clase CSS sobre el Callout. WarningIconImageUrl: Url del icono que muestra la alerta. Si no se especifica se muestra el que viene por defecto. CloseImageUrl: Imagen que produce el cierre del Callout

Ejemplo
Un ejemplo vale ms que mil palabras, y en casos como el Callout mucho ms: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="None" ErrorMessage='Mensaje de error donde podemos aadir todo tipo de HTML, por ejemplo una <a href="http://www.es-asp.net">Url cualquiera</a>.' ControlToValidate="TextBox1"></asp:RequiredFieldValidator> <br /> <asp:Button ID="Button1" runat="server" Text="Button" /> <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender1" TargetControlID="RequiredFieldValidator1" Width="350px" />