P. 1
Tutorial Curso ASP Net Ajax

Tutorial Curso ASP Net Ajax

|Views: 2,196|Likes:
Published by karinaamador

More info:

Published by: karinaamador on Oct 12, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

06/20/2013

pdf

text

original

Mtro.

Roberto Limon Ulloa LSIA ITSON UG
rlimon@itson.mx

Curso: Instructor: Aula: Duración:

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 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

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.

Ahora ya tenemos un proyecto totalmente preparado para trabajar con ASP. ya estamos preparados para instalar nuestro ASP. Para ello acudiremos a la Web donde se centraliza el trabajo sobre el ASP..NET AJAX Control Toolkit.codeplex.NET AJAX Control Toolkit. Para ello. A continuación vamos a añadir los controles del ASP. etc. su correspondiente binario.NET AJAX. Nosotros elegiremos la opción en que sí lo tiene..NET AJAX Control Toolkit El ASP.Descomprimimos el fichero y guardamos el resultado en una carpeta.Aceptar los términos y condiciones tras haberlos leído.Elijamos crear un nuevo WebSite.NET AJAX-Enabled Web Site” y presionamos sobre OK.NET AJAX Control Toolkit a nuestra caja de herramientas.NET AJAX Control Toolkit. 2.. donde se ubica el código fuente.. una vez dentro de cualquiera de nuestras páginas (por ejemplo default. templates.Guardar el archivo AjaxControlToolkit. 3.zip en nuestro ordenador. en su apartado de descargas: http://www.Ahora iniciemos nuestro programa de la familia Visual Studio 2005. Iniciamos un nuevo proyecto ASP. en nuestro caso el Visual Web Developer.Instalación del ASP.NET AJAX 6..aspx Como observamos podemos elegir entre descargarnos o no el código fuente junto con el resto del Kit. 4. 7... Destacamos la carpeta “SampleWebSite”.Escogemos abrirlo como “ASP. Seguiremos a continuación los siguientes pasos: 1. Comprobamos que dentro tenemos varios directorios. ubiquemos el ratón sobre nuestra caja de herramientas y presionamos el botón derecho para elegir Add Tab. un proyecto con ejemplos específicos de cada uno de los controles que componen esta versión del ASP.aspx). 5.com/AtlasControlToolkit/Wiki/View. .NET AJAX Control Toolkit Una vez instalado el paquete de Atlas.

..” 10...Para el colmo de la imaginación.Desde la pestaña en que nos encontramos (.Volvemos a presionar “OK” y ya tendremos instalados los controles del ASP. prestos y dispuestos a ser utilizados.NET AJAX Control Toolkit”. hacemos clic sobre el botón de “Browse.. 13.NET AJAX Control Toolkit. crearemos un tab específico en nuestra caja de herramientas para el ASP.A continuación desplegamos nuestro nuevo tab.Añadamos una pestaña para el Toolkit Con ello..NET Framework Components).Elegimos AjaxControlToolkit.dll y presionamos sobre “open”. 9. 11.NET AJAX Control Toolkit en nuestro Visual Web Developer.” y navegamos hacia la carpeta donde hemos instalado nuestro ASP.Entramos en la carpeta “SampleWebSite” y de ahí a su carpeta “bin” 12... . presionamos sobre éste el botón de la derecha y elegimos “Choose ítems.NET AJAX Control Toolkit. 8... nombraremos ese tab como “ASP.

. a tutoriales y a ejemplos de uso de ASP.asp.msi en nuestro ordenador. accederemos a vídeos.net. A partir de aquí seguiremos los siguientes pasos: 1.NET AJAX Dado que el ASP.Controles y extendedores del Toolkit El paquete de ASP. 2.NET AJAX Control Toolkit está desarrollado en base a la tecnología de ASP.Guardaremos el archivo ASPAJAXExtSetup. con lo que comenzará la instalación.NET AJAX. Acudamos. En esta Web conoceremos más en detalle qué es ASP. localizaremos el enlace de descarga del paquete. deberemos tener instalado el paquete de ASP. NOTA: si teníamos una versión previa instalada. Desde la propia página inicial.NET AJAX. por tanto a la Web oficial de Atlas: http://ajax. . deberemos desinstalarla desde nuestro Panel de Control..NET AJAX en nuestro ordenador.NET AJAX.Una vez descargado lo ejecutaremos.

..Presionamos sobre next.NET AJAX instalándose . 5.Ventana inicial de instalación 3.Aceptamos los términos de la licencia (tras haberlos leído) y volvemos a presionar sobre next.Ahora no tenemos más que presionar sobre install y la instalación se realizará sola. 4. ASP..

Cabe recordar que el Control Toolkit es un proyecto vivo. comenzamos con la explicación de los elementos que componen el ASP.NET AJAX Controles y extendedores Sin más dilación. de modo que el AccordionPane activo se mantendrá visible a través de los postbacks.9. • HeaderCssClass / ContentCssClass: Identifica el nombre de la clase CSS utilizada para las . de modo que únicamente uno será visible en cada momento. Dichos paneles son los AccordionPane. Fin de instalación de ASP. así como corrigiendo y aumentando los actuales. El estado del Accordion es guardado.Finalizando en pocos minutos.NET AJAX Control Toolkit. abierto a la comunidad y en continua evolución. donde el primero tiene como índice 0. Constantemente se están añadiendo nuevos elementos.. Es opcional y por defecto vale 0. Accordion Descripción El control Web Accordion te permite ubicar múltiples paneles. Propiedades 9 propiedades definen al Accordion: • SelectedIndex: Define el AccordionPane que estará activo por defecto. de los que debemos definir la cabecera (Header) y el contenido (Content).

La altura del Accordion no tiene límite. • DataMember: el miembro a enlazar cuando se usa el DataSourceID. También se puede definir individualmente como atributo de cada AccordionPane. o Fill: el Accordion siempre medirá lo que marqué su propiedad Height. Para una correcta aplicación hay que llamar a DataBind(). } . • Content: es una propiedad del AccordionPane y define el valor de su contenido. Si se define como atributo del Accordion. Ejemplo <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ACT-Accordion. expandiendo o minimizando el contenido en base a las necesidades. margin-top: 4px. background-color: #fff8ab.cs" Inherits="Accordion_ACT_Accordion" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. padding: 4px. poder asignar el identificador de nuestra fuente de datos. o Limit: como máximo.accordionCabecera { border: 1px solid black.org/1999/xhtml" > <head runat="server"> <title>Accordion</title> <style> . Es optativo y por defecto vale false. background-color: #ffd800. cursor: pointer. border: 1px solid black. en caso de ser false la transición se realizará de modo normal. Se consigue un efecto muy agradeble con transición de unos 200-300 milisegundos. al AccordionPane activo se le añadirá un scroll para ajustarse al límite. font-size: 12px.aspx. • Header: es una propiedad del AccordionPane y define el valor de su cabecera. font-weight: bold. el Accordion medirá lo que marque la propiedad Height.0 Transitional//EN" "http://www. Sans-Serif. Si el Accordion es más alto de lo que marque su Height. font-family: Arial. Es importante reseñar que esto puede implicar que otros elementos de la misma Web sean movidos. • DataSource: El DataSource a aplicar (totalmente optativo).w3. En caso de ser menor a ese límite el Accordion no sufre cambios. • FadeTransitions: en caso de ser true se aplicacará un efecto de fading en la transición. • FramesPerSecond: número de frames por segundo que se usará en la animación de las transiciones. • DataSourceID: – Alternativamente. • AutoSize: define la restricción en la altura del Accordion. border-top: none. Suele ser suficiente un número superior a 40. font-size: 14px. la clase se aplicará por defecto a todos los AccordionPane de que esté compuesto. • TransitionDuration: cantidad de milisegundos que definen la duración de una transición.dtd"> <html xmlns="http://www.accordionContenido { font-family: Sans-Serif. Puede tomar tres valores: o None: No tiene ninguna restricción.cabeceras/contenidos (Header/content).org/TR/xhtml1/DTD/xhtml1-transitional. .w3.

} </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> .padding: 7px.

no mostraremos más que el código específico del control en el que estemos trabajando. • VerticalSide: ubicación vertical (arriba o abajo) donde se clavará el control. deberán definirse las clases CSS tanto de la cabecera como del contenido.NET AJAX Control Toolkit más simples. Es optativo y por defecto vale 0 px. • HorizontalSide: ubicación horizontal (derecha o izquierda) donde se clavará el control. AlwaysVisibleControl Descripción El AlwaysVisibleControl es uno de los controles Web del ASP. y que se mantenga en la misma posición de la pantalla del usuario cuando se haga scroll sobre la página.1 segundos y siempre debe ser mayor que cero. es incluir una referencia al ScriptManager. Habitualmente suele tratarse de un “Panel”. Además. Propiedades • TargetControlID: ID del control que queremos que el AlwaysVisibleControl clave en la posición que determinemos. lo que no se hará automáticamente. En el resto de ejemplos. Es una propiedad optativa que por defecto vale top. Es optativo y por defecto vale 0 px. El motivo es que tengamos en cuenta que al arrastrar el control Accordion desde nuestra caja de herramientas. HorizontalOffset: distancia horizontal en pixels desde el objeto hasta el lado que definamos en el HorizontalSide. Su funcionalidad consiste en dejar clavado el contenido en un punto específico de la página. automáticamente quedará registrado el Assembly correspondiente. • ScrollEffectDuration: define la cantidad de segundos entre que la página hace scroll hasta que el control se posiciona donde definamos.Al tratarse de nuestro primer ejemplo. • VerticalOffset: distancia vertical en pixels desde el objeto hasta el lado que definamos en el VerticalSide. hemos mostrado todo el código de la página al completo. Un ejemplo sería el que cierto mensaje se muestre siempre en la parte inferior derecha de nuestra página. Sin embargo. Por defecto vale 0. y debemos hacerlo nosotros siempre. y como es obvio. . lo que no requiere más que otro sencillo arrastre desde nuestra caja de herramientas. Es una propiedad optativa que por defecto vale left.

El Animation es un extendedor que permite aplicar sobre el elemento elegido las animaciones que nos permiten el Animation Framework. • OnClick: elemento bajo el cual añadiremos las animaciones que se iniciarán hacer click sobre el control. solo que parará la animación OnHoverOut antes de ejecutarse. “pulse”. A modo de tanteo. solo que parará la animación OnHoverOver antes de ejecutarse. El Animation Framework es una aquitecturo de animaciones creadas para ASP.0001"> </ajaxToolkit:AlwaysVisibleControlExtender> Animation Descripción Y para el final dejamos dos controles que son. Propiedades • TargetControlID: ID del control a partir del cual y sobre el cual vamos a aplicar las animaciones. • OnHoverOut: Similar a OnMouseOut. “Scale” o acciones javascript. • OnMouseOver: elemento bajo el cual añadiremos las animaciones que se iniciarán tras pasar el mouse sobre el control. a pesar de no ser demasiado complicadas. • OnMouseOut: elemento bajo el cual añadiremos las animaciones que se iniciarán tras sacar el mouse de encima del control.NET AJAX Control Toolkit. nos permiten asignar efecto de “fadeIn” y “fadeOut”. diremos que las animaciones proporcionadas por el Animation Framework y que podremos aplicar con nuestro extendedor Animation. tanto en modo secuencia. los más espectaculares del ASP.NET AJAX y que.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. en modo paralelo o cualquier combinación imaginable de las dos. • OnHoverOver: Similar a OnMouseOver. • OnLoad: elemento bajo el cual añadiremos las animaciones que se iniciarán tras la carga del control. El primero de todos es el Animation. sin duda alguna. merecerían un artículo completo para su correcta explicación. .

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. En el primer caso quedaba muy profesional de cara al cliente.Ejemplo Apliquemos el uso del control Animation. pues éste manejaba muchos datos de forma muy rápida y sin recargar la página.http://ajax. rápido y fácilmente modificable..aspx .net/ajaxtoolkit/Walkthrough/AnimationReference.asp.NET recargando las páginas.) </asp:Panel> <ajaxToolkit:AnimationExtender id="MyExtender" runat="server" TargetControlID="Panel1"> <Animations> <OnMouseOver> <FadeOut Duration="2. Hasta ahora teníamos dos opciones: .1" /> <Parallel Duration=". se recomienda visitar la web oficial.Implementar una compleja serie de funciones javascript. En el segundo caso el programador conseguía una programa estable. .http://ajax.5" Fps="20" /> </OnMouseOver> <OnMouseOut> <FadeIn Duration=".5" Fps="20" /> </OnMouseOut> <OnClick> <Sequence> <Pulse Duration=". donde encontraremos ejemplos de uso y una referencia completa: . La primera de ellas tiene unos items determinados. También puedes hacerme clic . pero el usuario veía cómo se recargaba la página entera cada vez que elegía una .aspx <asp:Panel ID="Panel1" runat="server" Width="125px" BorderWidth="1px" BackColor="Yellow"> Pasa por encima mío y luego vete..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.Utilizar ASP.asp.net/ajaxtoolkit/Walkthrough/UsingAnimations. Para aprender a usar animaciones. sin embargo era muy poco profesional del cara al programador pues la complejidad en el javascript se incrementaba exponencialmente.

. ServiceMethod El es la función a la que se llamará para rellenar la lista desplegable. 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. Observamos que: • La función debe ir precedida por [WebMethod]. el ParentControlID apuntaría a la lista desplegable 2. • CascadingDropDownNameValue es un tipo de dato dentro del namespace AjaxControlToolkit (que en nuestro ejemplo suponemos ya importado mediante using (C#) o import (VB)). pues el resto debe ser igual. • LoadingText: también es un texto opcional que verá el usuario cuando el dato se está cargando. • El segundo parámetro (category) se corresponde con el atributo Category que hemos indicado en nuestro control CascadingDropDown.NET Propiedades • TargetControlID: el ID de la lista desplegable a la que se aplicará. • ServicePath: define el path del servicio web que devuelve la información que se usará para rellenar la lista desplegable.. Mención especial merece el primer parámetro.donde lo único que se podrá cambiar será el nombre de la función. el contenido del primer parámetro sería similar a: .} . En caso de estar en lo más alto de la jerarquía no pondríamos nada. si estuviéramos dentro del definido en la lista desplegable 3.. • ServiceMethod: le dedicamos un apartado exclusivo • ParentControlID: ID de la lista desplegable de cuya selección depende esta lista desplegable. string category){. no pondremos nada en esta propiedad. En éste se almacena el valor seleccionado de cada una de las listas desplegables predecesoras en la jerarquía. Gracias a ParentControlId creamos una jerarquía de listas desplegables.. Si el servicio web se encuentra en la propia página en que estamos trabajando. • Category: se define como el nombre de la categoría que la lista desplegable representa. Es opcional.opción diferente. Tendrá el siguiente aspecto: [WebMethod] public CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues. Pues bien. En nuestro ejemplo. Siguiendo con nuestro ejemplo. 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. • SelectedValue: valor que vendría seleccionado por defecto. si esta es la lista desplegable 2.

.Category1:valor1.ParseKnownCategoryValuesString(knownCategoryValues).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> . 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. 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. de modo que haciendo: StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit . .System.Web.category2:valor2 Pero no cabe asustarse.CascadingDropDown. obtenemos un StringDictionary bien ordenado y sencillo de utilizar. Nuestro ejemplo consta de dos listas desplegables. pues dispondemos del método ParseKnownCategoryValuesString que hará ese trabajo por nosotros.Services .Specialized Nota 2: EnableEventValidation debe valer false El uso avanzado del CascadingDropDownList implica un estudio más en profundidad de todas sus características..System. no hace falta que parseemos a mano esa información.AjaxControlToolkit . 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. donde la segunda depende de la primera.Collections. Ejemplo Nota 1: hay que importar los siguientes namespaces: . CascadingDropDown.

"Gris"). string category) { CascadingDropDownNameValue[] respuesta = new AjaxControlToolkit . • Collapsed: especifica el estado del contenido cuando se inicializa la página. "Azul_marino").aspx.cs [WebMethod] public CascadingDropDownNameValue[] (string knownCategoryValues. Propiedades • TargetControlID: el ID del control Web correspondiente al contenido. • CollapsedSize: el tamaño en pixels del contenido cuando está cerrado. respuesta[1] = new CascadingDropDownNameValue("Azul marino". Además. por lo que permanecerá igual cuando recarguemos una página.SelectedValue != "-1") { if (DropDownList1. "Naranja").ParseKnownCategoryValuesString(knownCategoryValues).CascadingDropDownNameValue[2]. } else if (DropDownList1. } } } return respuesta. que será el control sobre el que deberemos hacer clic para cerrar y/o abrir el contenido.SelectedValue == "Triste") { respuesta[0] = new CascadingDropDownNameValue("Gris". Puede ser collapsed (cerrado) o expanded (abierto). if (DropDownList1.SelectedValue == "Alegre") { respuesta[0] = new CascadingDropDownNameValue("Amarillo". de modo que queda totalmente cerrado. podemos especificar si queremos que el contenido tenga una altura y/o anchura determinadas.CascadingDropDown. o por el contrario permitimos que se dimensione como requiera. respuesta[1] = new CascadingDropDownNameValue("Naranja".NET pueda ser maximizado o minimizado a nuestro antojo. if (category == "color") { StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit . Lo habitual es ponerlo a 0. El estado del contenido (abierto o cerrado) es guardado a lo largo de los postbacks. • ExpandedSize: el tamaño en pixels del contenido cuando esté abierto.CascadingDropDown. . "Amarillo"). Distinguiremos entre el contenido. que será el control que vaya a cerrarse y abrirse (por ejemplo un Panel) y el controlador. } CollapsiblePanel Descripción Con el CollapsiblePanel conseguiremos que cualquier control ASP.

• ImageControlID: En lugar de un texto. Como vemos podemos elegir un controlador que maximice el contenido y otro que lo minimice. que se corresponde con el texto de arriba. </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> . 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. lo pondremos a false. Éste a su vez describirá el estado. Si no queremos que se produzca ningún efecto. • ExpandControlID/CollapseControlID: el ID del control Web correspondiendo al controlador. Habitualmente ambos atributos apuntan al mismo controlador. • ExpandedImage: Path que apunta a la imagen que se mostrará cuando el contenido esté maximizado. Si además también hemos especificado un texto. • ExpandDirection: podemos definir que el contenido se abra de arriba a abajo o de izquierda a derecha.• Scroll Contents: si especificamos true. • TextLabelID: el ID de la Label donde se especificará el estado en que se encuentra el contenido (ver las dos próximas propiedades). En el primer caso asignaremos “Vertical” y en el segundo “Horizontal”. • CollapsedImage: Path que apunta a la imagen que se mostrará cuando el contenido esté minimizado. se añadirá una barra de scroll cuando el tamaño sobrepaso al especificado en CollapsedSize y ExpandedSize. • CollapsedText: texto que se mostrará en la Label especificada en TextLabelId cuando el controlador esté cerrado. éste se corresponderá con el texto alternativo de la imagen (el atributo “alt”). • ExpandedText: texto que se mostrará en la Label especificada en TextLabelId cuando el controlador esté abierto. podemos especificar una imagen para que sea ésta la que describa el estado en que se encuentra el contenido.

Propiedades • TargetControlID: el ID del control correspondiente al contenido. Por ejemplo “¿Realmente desea ejecutar…?” Ejemplo Mostraremos un botón que se ocupará de recargar la página. de modo que cuando se haga clic sobre éste. donde el controlador es sobre lo que deberemos hacer clic y arrastrar para mover el contenido. Lo asignaremos a un Button. <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. Cuando se nos muestre la ventana de confirmación elegiremos si realmente deseamos recargarla o no. • DragHandleID: el ID del control correspondiente al controlador.ConfirmButton Descripción Con el ConfirmButton conseguimos una sencilla funcionalidad. 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. con apenas dos líneas de código y una mayor flexibilidad. que en javascript requeriría decenas de líneas de programación. 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. • ConfirmText: texto que se mostrará al presionar sobre el control. LinkButton o Hyperlink. 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"> . Propiedades • TargetControlID: ID del control al que aplicaremos el efecto el ConfirmButton. Vamos a distinguir entre el controlador y el contenido.

Ejemplos <asp:Label ID="TextLabel" runat="server" Text="Ponte sobre mí" Font-Names="Tahoma" FontSize="11px" Style="display: block.visibility:hidden. Propiedades • TargetControlID: ID del control sobre el que aplicaremos los efectos...Este es el contenido que vamos a poder arrastrar por toda la pantalla. "resize". setBodyHeightToContentHeight).body. 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. pero puede ser cualquier cosa.max(document. } setBodyHeightToContentHeight(). </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.height = Math. padding-right: 50px. document. • DropDownControlID: El Id del Panel que será mostrado como una lista desplegable.body.scrollHeight)+"px". function setBodyHeightToContentHeight() { document. MultiViews. lo que queráis!!<br /> Por ejemplo. width: 300px. fontfamily:Tahoma. padding:5px. Consiste en hacer aparentar un DropDown donde no lo hay.scrollHeight. 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" /> ."> Aquí puede haber cualquier control: imágenes. font-size: 11px.style." /> <asp:Panel ID="DropPanel" runat="server" Style="display:none. Normalmente será un Panel. padding:2px.documentElement. Por ejemplo. </script> DropDown Descripción Un sencillo control que le da un aspecto muy avanzado y profesional a nuestra página. $addHandler(window. así como resultar se muy útil.

<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. • Opacity: valor decimal en tre 0 y 1 que define la opacidad de la sombra. conseguimos dos efectos muy profesionales de forma tremendamente sencilla. donde el 0 corresponde a transparencia total y 1. vale con ponerlo a false. Es un parámetro opcional que por defecto vale 5. En caso contrario pondremos false (o no ponemos nada). . 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.5. sino. Propiedades • TargetControlID: ID del Panel sobre el que aplicaremos los efectos..0 a completamente opaco. El efecto de sombreado + bordeado es muy agradable a la vista.. • Rounded: Si queremos un efecto de redondeado lo pondremos a true.Añade una sombra. • Width: profundidad en pixels de la sombra. </div> </asp:Panel> <ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" Opacity="1" Width="5" TargetControlID="Panel1" Rounded="true"> . También es opcional y su valor por defecto es 0.) </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: . permitiéndonos definir tanto su profundidad como su oscuridad. Por consiguiente. • TrackPosition: lo pondremos a true si nuestro panel lo hemos definido con posición absoluta o si va a poder ser movido.Crea un efecto de redondeado del Panel. podríamos hacer maravillas .

• 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. • UpdatingCssClass: cuando se ha iniciado la llamada. Propiedades • TargetControlID: el ID del control sobre el que se escribirá el resultado. 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. podemos llamar a un método de javascript.</ajaxToolkit:DropShadowExtender> DynamicPopulate Descripción Se trata de otro sencillo extendedor. podemos querer demostrar al usuario que hemos iniciado el proceso. • ServiceMethod: nombre del método al que estamos llamando. • ServicePath: Url del servicio web al que haremos la llamada. obviamente sin recargar la página. • CustomScript: en lugar de llamar a un método de página o WebService. nos pondremos nada. Con esta propiedad asignaremos la clase CSS que aplicaremos al control... Típicamente es un Button o un LinkButton.. .} • PopulateTriggerControlID: control desde el que haremos clic para comenzar el proceso. y éste se escriba en un control. por ejemplo un Label. Si lo que estamos es llamando a un método de 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. Su firma debe ser de este tipo: [WebMethod] public string DynamicPopulateMethod(string contextKey){.. Típicamente es un Label o un TextBox. • 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.

Web. Será un string con los caracteres que consideraremos válidos. „*‟ y „/‟. „-„. Los combinaremos separándolos en comas. • FilterType: Tipo de filtro de entre los que hemos definido previamente.Ejemplo Tenemos un Button y una Label.aspx.Custom: los caracteres que definamos. . … [WebMethod] public string DynamicPopulateMethod(string contextKey) { Random r = new Random(). } FilteredTextBox Descripción El FilteredTextBox extiende al TextBox de modo que podemos definir qué tipo de caracteres permitimos que escriba el usuario. 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. • ValidChars: sólo se le hará caso si hemos elegido a “Custom” como FilterType. return r.Next(1000). Ejemplo En nuestro ejemplo vamos a permitir que en nuestro TextBox se escriban únicamente números y los signos matemáticos „+‟.LowercaseLetters: letras minúsculas.cs using System. Propiedades • TargetControlID: ID del TextBox sobre el que vamos a actuar.ToString(). .UppercaseLetters: letras mayúsculas.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.Services.Numbers: todos los números . <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1" . Elegiremos entre estas configuraciones y sus múltiples combinaciones: . DynamicPopulate.

y sus otros valores son Right. Propiedades • TargetControlID: ID del control identificado como cuerpo. 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. de modo que cuando el ratón pase sobre el control web cuerpo. podemos aplicar una clase CSS al control web cuerpo.FilterType="Numbers. de modo que cuando el usuario vaya a hacer clic sobre el botón. • PopDelay: la cantidad de milisegundos que pasarán entre que nos posemos sobre el cuerpo hasta que aparezca el popup. Bottom y Center. Por defecto son 100. haciendo ver al usuario que es el causante de que aparezca el popup. podemos añadir o quitar pixels en horizontal o en vertical con respecto a su posición relativa. el cuerpo se corresponde con un botón y el popup con un Panel. Por defecto vale Left. Además. Ejemplo En nuestro ejemplo. • OffsetX/OffsetY: una vez definido el PopupPosition. </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" PopupControlID="Panel1" TargetControlID="Button1" PopupPosition="Right" OffsetX="10"> </ajaxToolkit:HoverMenuExtender> . • HoverCssClass: clase CSS que se aplicará al cuerpo cuando pasemos el ratón sobre éste. el control web popup aparezca en el lugar en que hayamos especificado. se recargará la página. cuando esto suceda. • PopupPostion: lugar donde aparecerá el popup con respecto al cuerpo. • PopupControlID: ID del control identificado como popup. Vamos a distinguir entre el cuerpo y el popup.Custom" ValidChars="+-*/" > </ajaxToolkit:FilteredTextBoxExtender> HoverMenu Descripción El HoverMenu es un extendedor aplicable a cualquier control Web.

por ejemplo para dar un efecto de oscuridad a los elementos sobre los que no vamos a poder interactuar. el activador será un Button que mostrará una ventana emergente (popup).Script to run when the modal popup is dismissed with the CancelControlID Ejemplo En nuestro ejemplo.ModalPopup Descripción El ModalPopup es otro ejemplo de potente funcionalidad en muy pocas líneas de código. • OkControlID: el ID del elemento que produce el efecto de OK de nuestro popup.)” de javascript sin necesidad de salir de la página en que estamos ni de abrir una nueva ventana del navegador. Así pues. y el popup. Con éste..y rellenar sus datos y presionar OK. Propiedades • TargetControlID: ID del control activador. Típicamente será un Button o un LinkButton.The ID of the element that cancels the modal popup • OmCancelScript . activando una llamada a una función javascript que hayamos definido.. todo ello sin salir de la página en que estamos y sin poder hacer nada con el resto de elementos de ésta. 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()" . Imaginemos que el usuario presiona el botón “Dime tu nombre y apellidos”. que en nuestro ejemplo es el botón “Dime tu nombre y apellidos”. • OnOkScript: nombre del script que se activará cuando presionemos sobre OK. Típicamente será un Panel.open(.. Distinguiremos entre el activador. • PopupControlID: ID del control popup. • BackgroundCssClass: clase CSS que se aplicará al fondo de pantalla. Podemos emular el efecto del famoso “window.. el usuario puede elegir entre cancelar -para volver donde estaba antes. que en nuestro ejemplo se corresponde con el panel que nos mostrará el formulario de entrada de datos del usuario. • DropShadow: le daremos el valor de true si queremos que se añada un efecto de sombra a nuestro control popup. de repente la página se oscurece y aparece en el centro un cuadro donde se pide el nombre y los apellidos. • OkCancelID . conseguimos el efecto de mostrar contenido deshabilitando la interacción con el resto de la página.

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

pero el NoBot no requiere participación humana alguna. de forma muy similar a como funciona el RadioButton. con la particularidad de que deseleccionar un CheckBox es inmediato. de modo que se trata de evitar que un robot haga varios postback en la Web. aplicándoles la misma Key en el extendedor. el cual podemos deseleccionar clickando en él. . Su funcionalidad trata de emular a los Captcha. un Captcha es mucho más seguro que un NoBot. de modo que sólo puede estar seleccionado un CheckBox.MutuallyExclusiveCheckBox Descripción El MutuallyExclusiveCheckBox extiende al control CheckBox. 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. Por tanto. por lo que se hace transparente al usuario y le evita molestias. <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. • Key: clave que asociará a varios checkboxes. Ejemplo Trabajaremos con 3 CheckBox a la vez. Añadiendo varios checkboxes con la misma Key. nos aseguramos que sólo uno de ellos puede estar seleccionado a la vez. Recordemos que los Captcha suelen ser imágenes de caracteres distorsionados sobre los que un humano tiene que evaluar qué caracteres son e introducirlos. o será deseleccionado cuando clickemos en otro.

)". p.cs protected void Page_Load(object sender.Width = rand. NoBot.Text = "Eres un robot: " + estado. p.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.Next(300). pero no es común en Robots de Spam.Así pues. podremos aplicar el NoBot sobre aplicaciones Web donde el Spam no sea un problema crítico. Ejemplo Vamos a trabajar con el NoBot desde dos frentes. mediante la función “CustomChagellengeResponse”. if (!NoBot1. Lo veremos mejor en el ejemplo. • ResponseMinimumDelaySeconds: número de segundos por debajo de los cuales un postback se considerará inválido. else Label1. Propiedades • OnGenerateChallengeAndResponse: método de servidor opcional desde donde podemos implementar un trabajo específico extra para ayudar al NoBot a detectar robots.IsValid(out estado)) Label1.el motivo por el cual no se ha pasado la prueba.ToString(). Por otro lado. • CutoffWindowSeconds: ventana de tiempo en segundos utilizada por el CutoffMaximumInstances. exigiéndole unos sencillos calculos sobre el área de un Panel que nos inventamos Panel p = new Panel().aspx. • CutoffMaximumInstances: cantidad de PostBacks permitidos por una misma IP en la ventana de tiempo definida por CutoffWindowSeconds.NoBotEventArgs e) { // Implicamos al motor DOM del navegador. } } protected void CustomChallengeResponse(object sender. sino simplemente molesto.NoBotState estado. algo que sí hacen todos los navegadores modernos. La comprobación de si se ha pasado el Test la hacemos en el manejador del evento Load de la página.ID = "ParaMSCoder". AjaxControlToolkit. Random rand = new Random(). indicando –si procede. Por una parte no permitiremos que se hagan dos PostBacks en menos de 6 segundos (tiempo exagerado para hacer mejor la prueba. . EventArgs e) { if (IsPostBack) { AjaxControlToolkit. vamos a exigir que el navegador implemente el motor DOM.Text = "No eres un robot .

Height.Add(p). .Value * p. y lo podemos utilizar para distinguir qué elemento está llamando al método. e.‟.Height = rand. e.Format("var e = document. • 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.Add(HtmlTextWriterStyle.Position. p. .NoBot)sender). Los daremos en forma de string separado por punto y coma „.Llamar a un servicio Web o un método de la página diferente según si incrementamos o decrementamos. donde ya no incluiremos a nuestro querido Plutón. • ServiceDownMethod/ServiceUpMethod: método que será llamado para incrementar/decrementar el TextBox. • TargetButtonDownID/TargetButtonUpID: ID de los botones que hará la función de incrementar y decrementar.getElementById('{0}').Next(200). Propiedades • TargetControlID: ID del TextBox sobre el que vamos a actuar. "hidden").Width.offsetHeight. Ejemplo En nuestro sencillo ejemplo. • RefValues: listado de valores sobre los que querremos ir subiendo y bajando.Controls. vamos a viajar por los planetas del sistema solar. Deberá tener la forma: [WebMethod] public int NextValue(int current.RequiredResponse = (p. } NumericUpDown Descripción El NumericUpDown extiende al control Web TextBox habilitando unos botones que incrementan/decrementan el valor de éste. está propiedad se ignorará. e.Subir o bajar dentro de un listado de valores que le demos.Style. Si elegimos que otros botones hagan esa función.El simple +1/-1 aritmético. ((AjaxControlToolkit.Visibility.".Add(HtmlTextWriterStyle.ToString(). p. string tag) {…} • Tag: se corresponde con el segundo parámetro del método al que llamaríamos.p.Style. El incremento/decremento puede corresponder a: .offsetWidth * e.ClientID). . • Width: anchura combinada del TextBox y sus botones de arriba/abajo que vienen dados por defecto (mínimo 25). p.Value). "absolute"). Podremos asignar botones para que hagan de incrementador/decrementador o dejar los que hay por defecto.ChallengeScript = string.

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. Todo en cliente. <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="-" . Ejemplo Mostramos un simple listado con 6 elementos desordenados que vamos a ordenar y aplicaremos como índice de cabecera el primer carácter. Predomina sobre IndexSize. tan largo como queramos.<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. por lo que vamos a poder cambiar de índice sin recargar. 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.Júpiter.Venus. fácil de usar y muy manejable. El resultado es tremendamente profesional. • SelectIndexCssClass: Clase CSS que se aplicará al índice elegido. Típicamente será un guión „-„. Normalmente se le aplicará negrita y/o subrayado. • MaxItemPerPage: Máximo número de items por cada página.Urano. Propiedades • TargetControlID: ID del BulletedList sobre el que vamos a trabajar. • IndexSize: Número de caracteres en el índice de cabecera. • Separator: El texto que separa los índices de cabecera.Saturno. • ClientSort: podemos elegir entre ordenar alfabéticamente (true) o no (false).Marte. Es decir. nosotros tendremos el típico listado HTML.Tierra. • UnselectIndexCssClass Clase CSS que se aplicará a los índices que no están elegidos.

Irá ordenado de débil a fuerte y separado por punto y coma „.Mediante una barra que se irá rellenando. • DisplayPosition: posición relativa del indicador con respecto al TextBox.Exigencia de números.Mediante texto 100% configurable.Exigencia de combinar mayúsculas y minúsculas.perfecta”. RightSide.mejorable.25.20” significa que el 40% del peso de fortaleza viene de la longitud de la contraseña. • StrengthIndicatorType: tipo de indicador: Text o BarIndicator.TargetControlID="BulletedList1"> </cc1:PagingBulletedListExtender> PasswordStrength Descripción El PasswordStrength es otro extendedor del TextBox. en base a unos parámetros típicos de fortaleza que definiremos nosotros: . el 15% a mayúsculas/minúsculas y el 20% a la cantidad de caracteres no alfanuméricos. Típicamente será “Fortaleza= “. . Puede tomar 6 valores: AboveLeft. • BarBorderCssClass: Clase CSS del borde de la barra indicadora. Tendrá un mínimo de 2 textos y un máximo de 10. • PreferredPasswordLength: longitud mínima que debería tener la contraseña. BelowRight. por ejemplo “40. . podemos añadir la opción de “ayuda”. • TextCssClass: clase CSS que se aplicará al texto que describe la fortaleza de la contraseña. el 25% a la cantidad de números.15. . Con él podremos mostrar al usuario el nivel de fortaleza que tiene la contraseña que está escribiendo. Por ejemplo: “muy débil. .: $ ^ *) • RequiresUpperAndLowerCaseCharacters: especificamos si exigimos la combinación de mayúsculas y minúsculas. Además. • PrefixText: prefijo a mostrar cuando estemos mostrando el texto que describa la fortaleza de la contraseña. • MinimumNumericCharacters: cantidad mínima de caracteres numéricos. • MinimumSymbolCharacters: cantidad mínima de signos (ej.débil. • CalculationWeightings: listado de 4 valores numéricos separados por „.Exigencia de signos. • TextStrengthDescriptions: listado de texto que se usará para describir la fortaleza de la contraseña. donde explicar al usuario cómo debe ser su contraseña.‟. BelowLeft. Podemos elegir y configurar los dos modos que tenemos de mostrar al usuario la fortaleza de su password: .buena.Número total de caracteres. Propiedades • TargetControlID: ID del TextBox sobre el que vamos a trabajar. Cada valor asigna un porcentaje de importancia a una característica del password. . LeftSide.‟. AboveRight. donde la suma de ellos debe dar 100.

para mostrar el texto de ayuda. RightSide. buena. Puede tomar 6 valores: AboveLeft. BelowLeft. • HelpStatusLabelID: ID de la Label que usaremos –opcionalmente. débil. perfecta"> </cc1:PasswordStrength> . LeftSide. BelowRight. • HelpHandleCssClass: clase CSS del elemento que mostrará el texto de ayuda. 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. AboveRight.• BarIndicatorCssClass: Clase CSS del interior de la barra indicadora. mejorable. • HelpHandlePosition: posición relativa del elemento de ayuda con respecto al TextBox.

Top.y su funcionalidad consiste en mostrar una pequeña ventana emergente con infomación adicional.puede ser también cualquier control Web (típicamente un panel) y dentro de él podemos ubicar cualquier cosa. Por ejemplo.. emerja un calendario sobre el que podamos elegir una fecha y en el momento la elijamos. Sus valores posibles serán: Left.. • PopupControlID: ID del control popup. su “TextMode”. • OffsetX/OffsetY: distancia horizontal/vertical en pixels que añadiremos o quitaremos a la posición relativa del popup con respecto del cuerpo.1 PopUp. aunque también podríamos modificar su “Width”. • CommitProperty: especifica la propiedad del control cuerpo que se modificará con el resultado del 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> . Es opcional. • Position: posición relativa en la que aparecerá el popup con respecto al cuerpo. Esa ventana emergente –a la que llamaremos popup. Ejemplo Aplicaremos el ejemplo propuesto en 3. ésta se plasme en el TextBox. Propiedades • TargetControlID: ID del control cuerpo. Bottom.15. imagínese un TextBox en el que cuando se pone el ratón sobre él. Right.PopupControl Descripción El PopupControl se puede aplicar a cualquier control Web –al que llamaremos cuerpo. en el caso de un TextBox. Center. • CommitScript: función javascript que se ejecutará cuando hayamos dado el resultado del popup. Por ejemplo. lo normal es que queramos modificar su “value”.

cs protected void Calendar1_SelectionChanged(object sender.Commit(Calendar1. • 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.ToShortDateString())..ratingStar { font-size: 0pt. Podemos configurar prácticamente todos los parámetros: dirección.aspx. Obvia decir que la definición del estilo va entre los tags <head>. • RatingAlign: dirección en la que se mostrarán las estrellas: Vertical or Horizontal.</head> y que para el correcto funcionamiento deben existir las imágenes especificadas: Rating. . • ReadOnly: determinaremos si el usuario puede o no votar. } 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.. • WaitingStarCssClass: clase CSS de una estrella en modo de espera. Ejemplo Simple ejemplo en el que se muestran las estrellas y se muestra como manejar el resultado cuando se vota.</ContentTemplate> </asp:UpdatePanel> </asp:Panel> <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="TextBox1" PopupControlID="Panel1" Position="Bottom"> </ajaxToolkit:PopupControlExtender> PopupControl. Propiedades • CurrentRating: valor inicial de la puntuación. permitir o no que se vote.aspx <style> . • EmptyStarCssClass: clase CSS de una estrella vacía. EventArgs e) { PopupControlExtender1. • FilledStarCssClass: clase CSS de una estrella rellenada. puntuación inicial. • StarCssClass: clase CSS para una estrella visible. • Tag: parámetro que se le pasará al ClientCallBack. width: 13px. • MaxRating: valor máximo de puntuación. etc.SelectedDate.

CallbackResult = "Valor = " + e.png).cs protected void ThaiRating_Changed(object sender. } .Value + ". SqlDataSource… • DataKeyField: clave primaria de los datos . Típicamente será un ObjectDataSource. AjaxControlToolkit. cursor: pointer.emptyRatingStar { background-image: url(Images/EmptyStar. } ReorderList Descripción Se trata de un control Web al que se le asigna una fuente de datos y se muestran por pantalla. display: block.filledRatingStar { background-image: url(Images/FilledStar.png).RatingEventArgs e) { e. background-repeat: no-repeat.Tag. Tag = " + e. } </style> … <ajaxToolkit:Rating ID="Rating1" runat="server" CurrentRating="3" MaxRating="5" StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" OnChanged="ThaiRating_Changed" /> Ranting.png). la fuente de datos se actualiza y/o nosotros mismos podemos capturar ese evento para actuar en consecuencia. Cuando lo hemos reordenado. } . margin: 0px. padding: 0px. } . Propiedades • DataSourceID: el ID del datasource que se aplicará a este control.height: 12px.aspx. de modo que estos pueden ser reordenados sin más que arrastrarlos con el ratón.savedRatingStar { background-image: url(Images/SavedStar.

</ReorderTemplate> <DragHandleTemplate>. por ejemplo. • ResizableCssClass: clase CSS que se aplicará cuando estemos redimensionando. Su estado se mantiene durante los postbacks y sus dimensiones se pueden acceder desde cliente (javascript) y desde servidor (ASP. • 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. • DragHandleAlignment indica donde se ubicará el elemento que podemos coger para arrastrar la fila. • DragHandleTemplate: template que se mostrará cuando se agarra la fila y se está arrastrando. También podemos limitar su anchura y altura máximas.. • PostbackOnReorder: determina si el reordenamiento debe producir un postback o callback. • EmptyListTemplate: template a mostrar cuando el listado está vacío. • OnClientResize: evento que se lanzará cuando el elemento haya sido redimensionado . • HandleCssClass: clase CSS de elemento que debemos coger para redimensionar.. añade multitud de funcionalidades. • MinimumWidth/MinimumHeight: anchura/altura mínimas.. Deberemos activarlo si implica un borrado o modificado de datos. al principio (Beginning) o al final (End). Podemos. Además.. Bottom. • MaximumWidth/MaximumHeight: anchura/altura máximas.. • ItemTemplate: template al mostrar los items. como lanzamiento de eventos “onresizing” y “onresize” con los que podemos crear lógica compleja.</DragHandleTemplate> <InsertItemTemplate>.</ItemTemplate> <ReorderTemplate>. • AllowReorder: indica si permitimos o no el reordenamiento. Propiedades • TargetControlID: ID del control Web que vamos a poder redimensionar.</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.. Ejemplo <ajaxToolkit:ReorderList ID="ReorderList1" runat="server" DataSourceID="ObjectDataSource1" DragHandleAlignment="Left" ItemInsertLocation="Beginning" DataKeyField="ItemID" SortOrderField="Priority" AllowReorder="true"> <ItemTemplate>.. Left o Right.• SortOrderField: campo que representa el orden de los items • ItemInsertLocation: determina dónde se insertará un nuevo item. Sus posibles valores son: Top. coger un Panel con texto y redimensionarlo a nuestro gusto sin más que cogerlo con el ratón.NET)..

} </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). Ejemplo <asp:Panel ID="Panel1" runat="server" Width="125px" BackColor="#557755"> Este es el panel sobre el que se aplicará el bordeado. • Color: color de fondo del área redondeada en las esquinas.• OnClientResizing: evento que se lanzará cuando el elemento esté siendo redimensionado.png). • Radius: radio de redondeo de las esquinas. Ejemplo <style> . Habitualmente es un Panel. height:16px. cursor:se-resize. Propiedades • TargetControlID: ID del control Web sobre el que se aplicará el redondeo.handleText { width:16px. Por defecto se coge el color de fondo del Panel al que pertenece. Por defecto vale 5. overflow:hidden. • HandleOffsetX/HandleOffsetY: offsets a aplicar sobre el elemento redimensionador. background-image:url(images/HandleGrip. Podemos elegir el radio de redondeo. </asp:Panel> <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel1" Radius="8"> </ajaxToolkit:RoundedCornersExtender> .

• Maximum: Valor superior. se convierte en un deslizador (ver ejemplo). <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="TextBox1" . de modo que se va mostrando el valor numérico que representa. • RailCssClass: Asigna una clase CSS a la vía sobre la que se mueve el deslizador. • HandleImageURL: opcionalmente podemos asignar una imagen al deslizador. Además. así como permitir números decimales. Propiedades • Minimum: Valor inferior. • RaiseChangeOnlyOnMouseUp: Si se activa. Ejemplo Mostramos lo fácil que es crear un Slider. Por defecto no hay.Slider Descripción El Slider es un extendedor del TextBox. • HandleAnimationDuration: duración en milisegundos de la animación. El movimiento del Slider puede ser contínuo o discreto (le marcaremos los pasos que debe dar). Por ejemplo se puede sincronizar con un TextBox o una Label. Sus funcionalidades son múltiples. Podemos elegir un valor mínimo y un valor máximo. Por defecto 100. de modo que al aplicarlo sobre él. • Steps: Cuando queramos un deslizamiento discreto. • Length: Longitud del deslizador. soporta postbacks e incluso lo podemos combinar con un UpdatePanel para viajar al servidor en modo AJAX. • EnableHandleAnimation: Activa la animación. • Decimals: Cantidad de decimales. marcaremos la cantidad de pasos. • Value: Valor actual del deslizador. • HandleCssClass: Asigna una clase CSS al 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. lanza el evento “change” cuando se suelta el botón izquierdo del ratón. Por defecto es 0.

y si nos vamos del textbox sin haber escrito nada. 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. de nuevo.BoundControlID="TextBox2" /> TextBoxWatermark Descripción El TextBoxWatemark extiende. de modo que cuando hagamos clic sobre éste. • 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. <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" /> . En la primera imagen vemos cómo quedarán los cuadros de texto nada más cargarse la página. Propiedades • TargetControlID: ID del TextBox que vamos a extender. • WatermarkText: Texto que se mostrará cuando no haya nada escrito en el TextBox. Su finalidad habitual es la de mostrar al usuario cierta información antes de rellenar el TextBox. el texto vuelve a aparecer. 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. ese texto desaparezca. al control TextBox.

subgurim. CustomValidator.ToggleButton Descripción El ToggleButton extiende al control CheckBox. 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. RangeValidator. • CheckedImageAlternateText: texto alternativo de la imagen definida en CheckedImageUrl. • ImageHeight/ImageWidth: Altura/Anchura de la imagen que se va a mostrar. Su única funcionalidad consiste en sustituir por imágenes el estado de un CheckBox. Propiedades • TargetControlID: ID del CheckBox que extenderemos. • Width: Anchura del Callout . No tenemos que aplicar los validadores como lo hemos hecho hasta ahora (ver http://www. pero con el detalle de añadirles el atributo Display=”None” y asignarles el ValidatorCallout.aspx). • DisabledCheckedImageUrl: URL de la imagen a mostrar cuando el CheckBox está deshabilitado y en estedo de “Checked”. con el que conseguimos una vista mucho más amable de los típicos validadores. • UncheckedImageUrl: URL de la imagen a mostrar cuando el CheckBox esté “UnChecked”. • UncheckedImageAlternateText: texto alternativo de la imagen definida en UnCheckedImageUrl.).gif" CheckedImageAlternateText="Seleccionado" UncheckedImageAlternateText="No seleccionado" /> ValidatorCallout Descripción El ValidatorCallout es un extendedor de cualquier tipo de validador (RequiredFieldValidator. y su está “unchecked” mostrar otra. • CheckedImageUrl: URL de la imagen a mostrar cuando el CheckBox esté “Checked”. • DisabledUncheckedImageUrl: URL de la imagen a mostrar cuando el CheckBox está deshabilitado y en estedo de “UnChecked”..gif" CheckedImageUrl="ToggleButton_Checked.net/articulos/asp-net-general-articulo48. Es decir.. Propiedades • TargetControlID: ID del Validador que se está extendiendo. si el CheckBox está “checked” mostrar una imagen específica.

es-asp.• HighlightCssClass: Opcionalmente se puede asignar una clase CSS sobre el Callout.net">Url cualquiera</a>. por ejemplo una <a href="http://www. • WarningIconImageUrl: Url del icono que muestra la alerta. • CloseImageUrl: Imagen que produce el cierre del Callout Ejemplo Un ejemplo vale más que mil palabras.' ControlToValidate="TextBox1"></asp:RequiredFieldValidator> <br /> <asp:Button ID="Button1" runat="server" Text="Button" /> <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender1" TargetControlID="RequiredFieldValidator1" Width="350px" /> . Si no se especifica se muestra el que viene por defecto. 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.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->