41
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 implementación de la multitecnología AJAX. Programa de Curso
I. INTRODUCCIÓN AJAX II. FRAMEWORKS HABILITADOS PARA AJAX III. ASP.NET AJAX
III.I Un poço de Historia... III.II ¿Qué es el ASP.NET AJAX Control ToolKit? III.III Instalación del ASP.NET AJAX Control Toolkit III.IV Instalación 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
Curso: ASP.NET AJAX (.NET Framework 2.0) con Visual Studio 2005/2008
Instructor: Mtro. Roberto Limon
Aula: Aula de Computo 2
Duración: 11:00 a 13:00 Lu- VI
TEMARIO CURSO ASP.NET AJAX CON VS2005
ASP.NET AJAX Control Toolkit
ASP.NET 2.0 supone una enorme evolución 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 más fácil a los programadores Web: lo que con otras arquitecturas de trabajo Web nos costaría sudor y lágrimas, con el framework ASP.NET 2.0 ya viene por defecto o requiere una sencilla instalación. 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 página se recargue. De este modo los programas de escritorio quedan cada vez más 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 organización de código. Ante todo esto, la respuesta de ASP.NET 2.0 ha sido contundente: ASP.NET AJAX. ASP.NET AJAX es una nueva tecnología Web que se presenta como extensión gratuita de ASP.NET 2.0, añadiéndole 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 características de
ASP.NET AJAX sin más que un arrastre de ratón. Del mismo modo, con su descarga disponemos
de ejemplos de uso, así como del propio código 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 añaden un comportamiento a
un control Web existente.
Se trata de una serie de pequeñas 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 botón con una alerta asociada, hasta un complejo panel
que podemos arrastrar por la pantalla; en ambos casos, mandando y recogiendo información
entre el cliente y el servidor sin ningún tipo de recarga de página. Su uso hará que nuestra
Web sea mucho más atractiva y simpática al usuario a la par que potente y efectiva.
Instalación 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 código fuente junto con el resto del Kit. Nosotros elegiremos la opción en que sí lo tiene. Seguiremos a continuación los siguientes pasos: 1.- Aceptar los términos y condiciones tras haberlos leído. 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 código fuente, su correspondiente binario, templates, etc. Destacamos la carpeta “SampleWebSite”, un proyecto con ejemplos específicos de cada uno de los controles que componen esta versión 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 continuación vamos a añadir los controles del ASP.NET AJAX Control Toolkit a nuestra caja de herramientas. Para ello, una vez dentro de cualquiera de nuestras páginas (por ejemplo default.aspx), ubiquemos el ratón sobre nuestra caja de herramientas y presionamos el botón derecho para elegir Add Tab.
Añadamos una pestaña para el Toolkit Con ello, crearemos un tab específico en nuestra caja de herramientas para el ASP.NET AJAX Control Toolkit. 8.- Para el colmo de la imaginación, nombraremos ese tab como “ASP.NET AJAX Control Toolkit”. 9.- A continuación desplegamos nuestro nuevo tab, presionamos sobre éste el botón de la derecha y elegimos “Choose ítems...” 10.- Desde la pestaña en que nos encontramos (.NET Framework Components), hacemos clic sobre el botón 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 tecnología 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 más en detalle qué es ASP.NET AJAX, accederemos a vídeos, a tutoriales y a ejemplos de uso de ASP.NET AJAX. Desde la propia página 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 instalación. NOTA: si teníamos una versión previa instalada, deberemos desinstalarla desde nuestro Panel de Control.
Ventana inicial de instalación 3.- Presionamos sobre next. 4.- Aceptamos los términos de la licencia (tras haberlos leído) y volvemos a presionar sobre next. 5.- Ahora no tenemos más que presionar sobre install y la instalación se realizará sola.
ASP.NET AJAX instalándose
9.- Finalizando en pocos minutos.
Fin de instalación de ASP.NET AJAX
Controles y extendedores
Sin más dilación, comenzamos con la explicación 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 evolución. Constantemente se están añadiendo nuevos elementos,
así como corrigiendo y aumentando los actuales.
Accordion
Descripción
El control Web Accordion te permite ubicar múltiples 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 través 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. También se puede definir individualmente como atributo de cada AccordionPane. • FadeTransitions: en caso de ser true se aplicacará un efecto de fading en la transición, en caso de ser false la transición se realizará de modo normal. Es optativo y por defecto vale false. • TransitionDuration: cantidad de milisegundos que definen la duración de una transición. Se consigue un efecto muy agradeble con transición de unos 200-300 milisegundos. • FramesPerSecond: número de frames por segundo que se usará en la animación de las transiciones. Suele ser suficiente un número superior a 40. • AutoSize: define la restricción en la altura del Accordion. Puede tomar tres valores: o None: No tiene ninguna restricción. La altura del Accordion no tiene límite. Es importante reseñar que esto puede implicar que otros elementos de la misma Web sean movidos. o Limit: como máximo, el Accordion medirá lo que marque la propiedad Height. Si el Accordion es más alto de lo que marque su Height, al AccordionPane activo se le añadirá un scroll para ajustarse al límite. En caso de ser menor a ese límite 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 aplicación 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 código de la página al completo. El motivo es que tengamos en cuenta que al arrastrar el control Accordion desde nuestra caja de herramientas, automáticamente quedará registrado el Assembly correspondiente. Sin embargo, lo que no se hará automáticamente, y debemos hacerlo nosotros siempre, es incluir una referencia al ScriptManager, lo que no requiere más que otro sencillo arrastre desde nuestra caja de herramientas. Además, y como es obvio, deberán definirse las clases CSS tanto de la cabecera como del contenido. En el resto de ejemplos, no mostraremos más que el código específico del control en el que estemos trabajando.
AlwaysVisibleControl
Descripción
El AlwaysVisibleControl es uno de los controles Web del ASP.NET AJAX Control Toolkit más
simples. Su funcionalidad consiste en dejar clavado el contenido en un punto específico de la
página. Un ejemplo sería el que cierto mensaje se muestre siempre en la parte inferior
derecha de nuestra página, y que se mantenga en la misma posición de la pantalla del usuario
cuando se haga scroll sobre la página.
Propiedades
• TargetControlID: ID del control que queremos que el AlwaysVisibleControl clave en la
posición que determinemos. Habitualmente suele tratarse de un “Panel”.
• HorizontalSide: ubicación 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: ubicación 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 página 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
Descripción
Y para el final dejamos dos controles que son, sin duda alguna, los más 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,
merecerían un artículo completo para su correcta explicación.
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 combinación 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 añadiremos las animaciones que se iniciarán tras la carga del
control.
• OnClick: elemento bajo el cual añadiremos las animaciones que se iniciarán hacer click
sobre el control.
• OnMouseOver: elemento bajo el cual añadiremos las animaciones que se iniciarán tras pasar
el mouse sobre el control.
• OnMouseOut: elemento bajo el cual añadiremos las animaciones que se iniciarán tras sacar
el mouse de encima del control.
• OnHoverOver: Similar a OnMouseOver, solo que parará la animación OnHoverOut antes de
ejecutarse.
• OnHoverOut: Similar a OnMouseOut, solo que parará la animación 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 mío y luego vete. También 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
Descripción
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 teníamos dos opciones:
- Implementar una compleja serie de funciones javascript,
- Utilizar ASP.NET recargando las páginas.
En el primer caso quedaba muy profesional de cara al cliente, pues éste manejaba muchos
datos de forma muy rápida y sin recargar la página... 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 conseguía una programa estable, rápido y fácilmente
modificable, pero el usuario veía cómo se recargaba la página entera cada vez que elegía una
opción diferente.
Pues bien, con el CascadingDropDown solucionamos los problemas y nos quedamos con las
ventajas: no se recargará la página 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 categoría que la lista desplegable representa. Su
utilidad será la de representar uno de los dos parámetros de entrada al ServiceMethod que
estudiaremos posteriormente
• PromptText: es un texto opcional que verá el usuario cuando la lista desplegable esté vacía.
• LoadingText: también es un texto opcional que verá el usuario cuando el dato se está
cargando.
• ServicePath: define el path del servicio web que devuelve la información que se usará para
rellenar la lista desplegable. Si el servicio web se encuentra en la propia página en que
estamos trabajando, no pondremos nada en esta propiedad.
• ServiceMethod: le dedicamos un apartado exclusivo
• ParentControlID: ID de la lista desplegable de cuya selección depende esta lista
desplegable. En nuestro ejemplo, si esta es la lista desplegable 2, el ParentControlID
apuntaría a la lista desplegable 2. Gracias a ParentControlId creamos una jerarquía de listas
desplegables. En caso de estar en lo más alto de la jerarquía no pondríamos nada.
• SelectedValue: valor que vendría seleccionado por defecto. Es opcional.
ServiceMethod
El es la función 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 función, pues el resto debe ser
igual.
Observamos que:
• La función 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 parámetro (category) se corresponde con el atributo Category que hemos
indicado en nuestro control CascadingDropDown.
Mención especial merece el primer parámetro. En éste se almacena el valor seleccionado de
cada una de las listas desplegables predecesoras en la jerarquía. Siguiendo con nuestro
ejemplo, si estuviéramos dentro del definido en la lista desplegable 3, el contenido del
primer parámetro sería similar a:
Category1:valor1;category2:valor2
Pero no cabe asustarse, no hace falta que parseemos a mano esa información, pues
dispondemos del método 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 más en profundidad de todas sus características. En los diferentes blogs tecnológicos 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 más complejos. Nuestro ejemplo consta de dos listas desplegables, donde la segunda depende de la primera. En el momento hacemos una selección en la primera lista desplegable el mecanismo del CascadingDropDown entra en funcionamiento y se rellena la segunda lista desplegable sin que la página 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
Descripción
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 página. Además, 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 tamaño en pixels del contenido cuando está cerrado. Lo habitual es
ponerlo a 0, de modo que queda totalmente cerrado.
• ExpandedSize: el tamaño en pixels del contenido cuando esté abierto.
• Collapsed: especifica el estado del contenido cuando se inicializa la página. Puede ser
collapsed (cerrado) o expanded (abierto).
• Scroll Contents: si especificamos true, se añadirá una barra de scroll cuando el tamaño
sobrepaso al especificado en CollapsedSize y ExpandedSize. Si no queremos que se produzca
ningún 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 próximas 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 además también 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
Descripción
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 confirmación. En ésta deberemos elegir “sí” o “no” para que se
ejecute o no el evento asociado al control en cuestión.
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 botón que se ocupará de recargar la página. Cuando se nos muestre la ventana de confirmación elegiremos si realmente deseamos recargarla o no. <asp:Button ID="Button1" runat="server" Text="Recargar página" /> <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server" TargetControlID="Button1" ConfirmText="¿Realmente desea recargar la página?" /> </ajaxToolkit:ConfirmButtonExtender>
DragPanel
Descripción
El DragPanel sería el ejemplo perfecto de cómo conseguir una funcionalidad avanzada, que en
javascript requeriría decenas de líneas de programación, con apenas dos líneas de código y
una mayor flexibilidad.
Se aplica a cualquier control Web (el más habitual es el Panel) y le añade 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"> Arrástrame </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"> // Pequeño 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
Descripción
Un sencillo control que le da un aspecto muy avanzado y profesional a nuestra página, 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" Font-Size="11px" Style="display: block; width: 300px; padding:2px; padding-right: 50px;" /> <asp:Panel ID="DropPanel" runat="server" Style="display:none;visibility:hidden; font-family:Tahoma; font-size: 11px; padding:5px;"> Aquí puede haber cualquier control: imágenes, MultiViews... lo que queráis!!<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 pusiéramos el calendarios sobre un UpdatePanel... podríamos hacer maravillas ;) </asp:Panel> <ajaxToolkit:DropDownExtender runat="server" ID="DDE" TargetControlID="TextLabel" DropDownControlID="DropPanel" />
DropShadow
Descripción
El DropShadow extiende al control Panel con dos características muy interesantes:
- Añade una sombra, permitiéndonos 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 parámetro 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. También es opcional y su
valor por defecto es 0.5.
• TrackPosition: lo pondremos a true si nuestro panel lo hemos definido con posición 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
Descripción
Se trata de otro sencillo extendedor. Su funcionalidad consiste en permitir que en base a un
evento (por ejemplo el click de un botón) se lea el resultado de un WebService o un método
de la propia página, y éste se escriba en un control, por ejemplo un Label... obviamente sin
recargar la página.
El valor que debe devolver el servicio Web o el método de la página debe ser un string en
formato HTML.
Propiedades
• TargetControlID: el ID del control sobre el que se escribirá el resultado. Típicamente es un
Label o un TextBox.
• ClearContentsDuringUpdate: propiedad opcional (por defecto vale true) en la que indicamos
si durante la llamada al WebService o método de página el valor del control debe borrarse.
• ServicePath: Url del servicio web al que haremos la llamada. Si lo que estamos es llamando
a un método de página, nos pondremos nada.
• ServiceMethod: nombre del método 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.
Típicamente 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 método de página o WebService, podemos llamar a
un método de javascript.
• ContextKey: se trata del string que se le pasará al método como parámetro, 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 método de la página que nos devuelve un número 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
Descripción
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 múltiples
combinaciones:
- Numbers: todos los números
- LowercaseLetters: letras minúsculas.
- UppercaseLetters: letras mayúsculas.
- 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
separándolos en comas.
• ValidChars: sólo se le hará caso si hemos elegido a “Custom” como FilterType. Será un
string con los caracteres que consideraremos válidos.
Ejemplo
En nuestro ejemplo vamos a permitir que en nuestro TextBox se escriban únicamente números y los signos matemáticos „+‟, „-„, „*‟ y „/‟. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1"
FilterType="Numbers,Custom" ValidChars="+-*/" > </ajaxToolkit:FilteredTextBoxExtender>
HoverMenu
Descripción
El HoverMenu es un extendedor aplicable a cualquier control Web. Vamos a distinguir entre el
cuerpo y el popup, de modo que cuando el ratón pase sobre el control web cuerpo, el control
web popup aparezca en el lugar en que hayamos especificado. Además, 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 ratón 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 añadir o quitar pixels en
horizontal o en vertical con respecto a su posición relativa.
• PopDelay: la cantidad de milisegundos que pasarán 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 botón y el popup con un Panel, de modo que cuando el usuario vaya a hacer clic sobre el botón, 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 botón, se recargará la página. </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" PopupControlID="Panel1" TargetControlID="Button1" PopupPosition="Right" OffsetX="10"> </ajaxToolkit:HoverMenuExtender>
ModalPopup
Descripción
El ModalPopup es otro ejemplo de potente funcionalidad en muy pocas líneas de código. Con
éste, conseguimos el efecto de mostrar contenido deshabilitando la interacción con el resto
de la página. Podemos emular el efecto del famoso “window.open(...)” de javascript sin
necesidad de salir de la página en que estamos ni de abrir una nueva ventana del navegador.
Imaginemos que el usuario presiona el botón “Dime tu nombre y apellidos”, de repente la
página se oscurece y aparece en el centro un cuadro donde se pide el nombre y los
apellidos... todo ello sin salir de la página 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 función
javascript que hayamos definido.
Distinguiremos entre el activador, que en nuestro ejemplo es el botón “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. Típicamente será un Button o un LinkButton.
• PopupControlID: ID del control popup. Típicamente 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 añada 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 botón <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
Descripción
El MutuallyExclusiveCheckBox extiende al control CheckBox. Añadiendo varios checkboxes con
la misma Key, nos aseguramos que sólo 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, aplicándoles la misma Key en el extendedor, de modo que sólo 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="Opción A" /> <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MutuallyExclusiveCheckboxExtender1" TargetControlID="CheckBox1" Key="MSCoderExamples" /> <asp:CheckBox ID="CheckBox2" runat="server" Text="Opción B" /> <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MutuallyExclusiveCheckboxExtender2" TargetControlID="CheckBox2" Key="MSCoderExamples" /> <asp:CheckBox ID="CheckBox3" runat="server" Text="Opción C" /> <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MutuallyExclusiveCheckboxExtender3" TargetControlID="CheckBox3" Key="MSCoderExamples" />
NoBot
Descripción
El NoBot es un potentísimo 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 imágenes de caracteres distorsionados sobre los que
un humano tiene que evaluar qué caracteres son e introducirlos. Por tanto, un Captcha es
mucho más seguro que un NoBot, pero el NoBot no requiere participación 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 crítico, sino simplemente molesto.
Propiedades
• OnGenerateChallengeAndResponse: método de servidor opcional desde donde podemos
implementar un trabajo específico extra para ayudar al NoBot a detectar robots. Lo veremos
mejor en el ejemplo.
• ResponseMinimumDelaySeconds: número de segundos por debajo de los cuales un postback
se considerará inválido.
• 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 función “CustomChagellengeResponse”, vamos a exigir que el navegador implemente el motor DOM, algo que sí hacen todos los navegadores modernos, pero no es común en Robots de Spam. La comprobación de si se ha pasado el Test la hacemos en el manejador del evento Load de la página, 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, exigiéndole 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
Descripción
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 aritmético.
- Subir o bajar dentro de un listado de valores que le demos.
- Llamar a un servicio Web o un método de la página diferente según 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 (mínimo 25). Si elegimos que otros botones hagan esa función, 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 función de
incrementar y decrementar.
• ServiceDownPath/ServiceUpPath: path del servicio Web al que llamaremos cuando se
incremente o decremente. En caso de estar trabajando con métodos de página no
utilizaremos esta propiedad.
• ServiceDownMethod/ServiceUpMethod: método 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 parámetro del método al que llamaríamos, y lo
podemos utilizar para distinguir qué elemento está llamando al método.
Ejemplo
En nuestro sencillo ejemplo, vamos a viajar por los planetas del sistema solar, donde ya no
incluiremos a nuestro querido Plutón.
<asp:TextBox ID="TextBox1" runat="server" Text="Tierra" Width="120" style="text-
align:center"></asp:TextBox>
<cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server
TargetControlID="TextBox1" Width="120"
RefValues="Mercurio;Venus;Tierra;Marte;Júpiter;Saturno;Urano;Neptuno"
ServiceDownMethod="" ServiceUpMethod="" TargetButtonDownID="" TargetButtonUpID="">
</cc1:NumericUpDownExtender>
PagingBulletedList
Descripción
El PagingBulletedList extiende a la BulletedList confiriéndole propiedades de paginación y de
ordenación en cliente. Es decir, nosotros tendremos el típico listado HTML, tan largo como
queramos, al que le aplicaremos el PagingBulletedList y éste lo paginará según su índice (los
primeros caracteres) o por número de items por índice. Todo en cliente, por lo que vamos a
poder cambiar de índice sin recargar.
El resultado es tremendamente profesional, fácil de usar y muy manejable.
Propiedades
• TargetControlID: ID del BulletedList sobre el que vamos a trabajar.
• ClientSort: podemos elegir entre ordenar alfabéticamente (true) o no (false).
• IndexSize: Número de caracteres en el índice de cabecera.
• MaxItemPerPage: Máximo número de items por cada página. Predomina sobre IndexSize.
• Separator: El texto que separa los índices de cabecera. Típicamente será un guión „-„.
• 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 están elegidos.
Ejemplo
Mostramos un simple listado con 6 elementos desordenados que vamos a ordenar y aplicaremos como índice de cabecera el primer carácter. <asp:BulletedList ID="BulletedList1" runat="server"> <asp:ListItem Text="Braulio"></asp:ListItem> <asp:ListItem Text="Arturo"></asp:ListItem> <asp:ListItem Text="Sofía"></asp:ListItem> <asp:ListItem Text="Andrés"></asp:ListItem> <asp:ListItem Text="Begoña"></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
Descripción
El PasswordStrength es otro extendedor del TextBox. Con él podremos mostrar al usuario el
nivel de fortaleza que tiene la contraseña que está escribiendo, en base a unos parámetros
típicos de fortaleza que definiremos nosotros:
- Número total de caracteres.
- Exigencia de signos.
- Exigencia de combinar mayúsculas y minúsculas.
- Exigencia de números.
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.
Además, podemos añadir la opción de “ayuda”, donde explicar al usuario cómo debe ser su
contraseña.
Propiedades
• TargetControlID: ID del TextBox sobre el que vamos a trabajar.
• DisplayPosition: posición 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 mínima que debería tener la contraseña.
• PrefixText: prefijo a mostrar cuando estemos mostrando el texto que describa la fortaleza
de la contraseña. Típicamente será “Fortaleza= “.
• TextCssClass: clase CSS que se aplicará al texto que describe la fortaleza de la contraseña.
• MinimumNumericCharacters: cantidad mínima de caracteres numéricos.
• MinimumSymbolCharacters: cantidad mínima de signos (ej.: $ ^ *)
• RequiresUpperAndLowerCaseCharacters: especificamos si exigimos la combinación de
mayúsculas y minúsculas.
• TextStrengthDescriptions: listado de texto que se usará para describir la fortaleza de la
contraseña. Irá ordenado de débil a fuerte y separado por punto y coma „;‟. Tendrá un
mínimo de 2 textos y un máximo de 10. Por ejemplo: “muy
débil;débil;mejorable;buena;perfecta”.
• CalculationWeightings: listado de 4 valores numéricos separados por „;‟, donde la suma de
ellos debe dar 100. Cada valor asigna un porcentaje de importancia a una característica del
password; por ejemplo “40;25;15;20” significa que el 40% del peso de fortaleza viene de la
longitud de la contraseña, el 25% a la cantidad de números, el 15% a mayúsculas/minúsculas y
el 20% a la cantidad de caracteres no alfanuméricos.
• 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: posición 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 débil; débil; mejorable; buena; perfecta">
</cc1:PasswordStrength>
PopupControl
Descripción
El PopupControl se puede aplicar a cualquier control Web –al que llamaremos cuerpo- y su
funcionalidad consiste en mostrar una pequeña ventana emergente con infomación adicional.
Esa ventana emergente –a la que llamaremos popup- puede ser también cualquier control
Web (típicamente un panel) y dentro de él podemos ubicar cualquier cosa.
Por ejemplo, imagínese un TextBox en el que cuando se pone el ratón 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: posición relativa en la que aparecerá el popup con respecto al cuerpo. Sus valores
posibles serán: 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 también podríamos modificar su “Width”, su “TextMode”... Es
opcional.
• CommitScript: función javascript que se ejecutará cuando hayamos dado el resultado del
popup.
• OffsetX/OffsetY: distancia horizontal/vertical en pixels que añadiremos o quitaremos a la
posición 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
Descripción
Control con el que podemos mostrar al usuario el estado de una votación así como permitir
que éste vote de una forma muy intuitiva: con estrellitas.
Podemos configurar prácticamente todos los parámetros: dirección, puntuación inicial,
permitir o no que se vote, etc.
Propiedades
• CurrentRating: valor inicial de la puntuación.
• MaxRating: valor máximo de puntuación.
• 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 vacía.
• RatingAlign: dirección en la que se mostrarán las estrellas: Vertical or Horizontal.
• RatingDirection: orientación 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: parámetro 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 definición del estilo va entre los tags <head>...</head> y que para el correcto funcionamiento deben existir las imágenes 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
Descripción
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 más que arrastrarlos con el ratón.
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. Típicamente será un
ObjectDataSource, SqlDataSource…
• DataKeyField: clave primaria de los datos
• SortOrderField: campo que representa el orden de los items
• ItemInsertLocation: determina dónde 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 edición.
• ReorderTemplate: template que mostrará donde se va a ubicar la fila si la soltáramos ahí.
• InsertItemTemplate: template que se mostrará cuando se añada 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á vacío.
• 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
Descripción
El ResizableControl extiende cualquier control Web (por ejemplo un Panel o una imagen)
confiriéndole la propiedad de redimensionamiento. Podemos, por ejemplo, coger un Panel
con texto y redimensionarlo a nuestro gusto sin más que cogerlo con el ratón.
Además, añade multitud de funcionalidades, como lanzamiento de eventos “onresizing” y
“onresize” con los que podemos crear lógica compleja. Su estado se mantiene durante los
postbacks y sus dimensiones se pueden acceder desde cliente (javascript) y desde servidor
(ASP.NET). También podemos limitar su anchura y altura máximas.
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 mínimas.
• MaximumWidth/MaximumHeight: anchura/altura máximas.
• 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
Descripción
El Slider es un extendedor del TextBox, de modo que al aplicarlo sobre él, se convierte en un
deslizador (ver ejemplo). Sus funcionalidades son múltiples.
Por ejemplo se puede sincronizar con un TextBox o una Label, de modo que se va mostrando
el valor numérico que representa.
Podemos elegir un valor mínimo y un valor máximo, así como permitir números decimales. El
movimiento del Slider puede ser contínuo o discreto (le marcaremos los pasos que debe dar).
Además, 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 animación.
• HandleAnimationDuration: duración en milisegundos de la animación.
• RailCssClass: Asigna una clase CSS a la vía 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
botón izquierdo del ratón.
Ejemplo
Mostramos lo fácil 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
Descripción
El TextBoxWatemark extiende, de nuevo, al control TextBox. Su funcionalidad consiste en
que aparezca un texto (de una clase CSS específica) 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 información 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 contraseña. En la primera imagen vemos cómo quedarán los cuadros de texto nada más cargarse la página; 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="Contraseña" />
ToggleButton
Descripción
El ToggleButton extiende al control CheckBox. Su única funcionalidad consiste en sustituir por
imágenes el estado de un CheckBox. Es decir, si el CheckBox está “checked” mostrar una
imagen específica, 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
Descripción
El ValidatorCallout es un extendedor de cualquier tipo de validador (RequiredFieldValidator,
RangeValidator, CustomValidator...), con el que conseguimos una vista mucho más amable de
los típicos 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
añadirles 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 más que mil palabras, y en casos como el Callout mucho más: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="None" ErrorMessage='Mensaje de error donde podemos añadir 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" />
