AJAX Control Toolkit


Contenido

Este artículo explica cómo instalar el módulo FastCGI y PHP para hospedar aplicaciones PHP en IIS 7.0.

¿Qué es el ASP.NET AJAX Control Toolkit?

Es un proyecto de código compartido construido sobre el framework Microsoft ASP.NET AJAX. Nace del esfuerzo de Microsoft y la comunidad de ASP.NET AJAX y provee de una infraestructura para escribir extensiones y controles de ASP.NET AJAX reusables, personalizables y extensibles, además de crear una amplia variedad de controles que puedan ser utilizados para crear una experiencia web interactiva.

¿Dónde se descarga?

Se puede descargar en la siguiente dirección:

http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx?ReleaseId=16488

En esta página encontramos cuatros paquetes diferentes:

  1. AjaxControlToolkit-Framework3.5SP1.zip: es el paquete completo con todo el código fuente de los controles, el framework de text, el pack de instalación de Visual Studio (VSI), etc.

  2. AjaxControlToolkit-Framework3.5SP1-NoSource.zip:contiene solo el sitio web de ejemplo y el pack de instalación de Visual Studio (VSI). No contiene el código fuente de los controles.

  3. AjaxControlToolkit-Framework3.5SP1-DllOnly.zip:contiene solo la dll (y ensamblados satélites para el toolkit. Para utilizarlo, simplemente hay que copiar los contenidos de este archivo zip directamente en el directorio bin del sitio web (y opcionalmente, añadir sus components al Toolbox de Visual Studio para mejorar la experiencia en el modo diseño). Esta descarga está recomendada si simplemente se require utilizar el Toolkit pero no es necesario el código fuente y el sitio web de ejemplo).

  4. AjaxControlToolkit-ScriptFilesOnly.zip:contiene archivos script, hojas de estilo CSS y las imágenes que utilize el Toolkit. Esta descarga es la adecuada si no se quieren utilizar recursos integrados y se prefiere un modelo basado en archivos. Para instalarlo en un sitio web, hay que extraer el archivo en una carpeta del sitio. Después, el ScriptPath del ScriptManager debe apuntar a esa carpeta (esto requiere Microsoft Ajax Library en la misma carpeta) y el Toolkit funcionará del mismo modo que antes sin tener que cambiar nada más en la página (advertencia: algunos controles pueden tener que utilizar recursos web incluso después de esto). Otro modo de utilizar estos archivos es sin incluir ningún ScriptManager (como por ejemplo, en el escenario de ASP.NET MVC). En este caso, se requiere que se incluyan en la página las dependencias necesarias con los scripts y que los componentes apunten a las hojas de estilo y archivos de imagen, estableciendo las propiedades relevantes.

Requisitos del sistema

La última versión del Toolkit requiere .NET Framework 3.5 SP1 (3.5.30729.1) y Visual Studio 2008 SP1..

Nota: La versión 3.5.20820 del Toolkit es solamente para usuarios que utilicen .NET Framework 3.5 SP1 con Visual Studio 2008 SP1. Si estás usando .NET Framework 2.0 y Visual Studio 2005 deberías utilizar la versión 1.0.20229 del Toolkit.

Configuración del entorno

  1. Instalar binarios
    • a. Instalar .NET 3.5 SP1
    • b. Guardar AJAX Control Toolkit en una carpeta en tu ordenador
  2. Configurar Visual Studio 2008
    • a. Crear un nuevo sitio web de la plantilla de sitio web ASP.NET
      • i. Abrir el menú “Archivo”
      • ii. Hacer clic en “Nuevo”, “Sitio Web…”
      • iii. Escoger “Sitio web ASP.NET”
    • b. Hacer clic derecho en la Cuadro de herramientas y seleccionar “Añadir pestaña”
    • c. Dentro de esa pestaña, hacer clic derecho en la Cuadro de herramientas y “Seleccionar ítems…”.
    • d. Cuando aparezca el diálogo, hacer clic en “Buscar…”
    • e. Navegar a la carpeta en la que está instalado el paquete ASP.NET AJAX Control Toolkit. Allí hay una carpeta llamada “SampleWebSite”. Dentor de ella, hay otra carpeta llamada “bin”.
    • f. Dentro de esta carpeta, seleccionar “AjaxControlToolkit.dll” y hacer clic en OK. Volver a hacer clic en OK para cerrar el diálogo de seleccionar ítems.
  3. Con los pasos anteriores, ya es posible incluir los controles predeterminados en sitios web.

Instalación de las plantillas

Si estás utilizando una versión anterior del Toolkit y necesitas actualizarla a una nueva versión, son recomendables los siguientes pasos:

Binarios: Hay que sobrescribir todas las instancias antiguas de “AjaxControlToolkit.dll” en el ordenador con la nueva.

Elementos del Toolbox: Eliminar la pestaña que listaba los controles del Toolkit y crearla de nuevo utilizando la nueva dll del Toolkit.

Plantillas del Toolkit: Reinstalar “AjaxControlExtender.vsi” y sobrescribir las antiguas plantillas en “Añadir Plantillas”.

Actualizar la version del Toolkit

Los siguientes pasos son una guía sobre cómo utilizar uno de los extensiones ASP.NET AJAX de ejemplo en una página web ASP.NET

Prerrequisitos: En primer lugar, hay que seguir los pasos de configuración del entorno.

  1. Crear una página web ASP.NET
    • Utilizando Visual Studio 2008 ó Visual Web Developer, crea un nuevo sitio web abriendo el menú “Archivo” y haciendo clic en “Nuevo”, “Sitio Web…”, y escogiendo “Sitio web ASP.NET”.
    • Hacer doble clic en el explorador de soluciones sobre “Default.aspx”
    • Cambiar a la vista de diseño en la pestaña inferior de la ventana
    • Añadir un Label (Label1) arrastrándolo desde el Cuadro de Herramientas
    • Añadir un Botón (Button1) arrastrándolo desde el Cuadro de Herramientas
    • Crear un manejador del Clic para el Button haciendo doble clic sobre él
    • Se abrirá automáticamente “Default.aspx.cs” y el cursos estará sobre el método “Button1_Click”
    • Añadir el siguiente código: Label1.Text = “Se ha procesado el clic sobre el Botón”;
    • Generar la solución, presionando F5 (habilitar la depuración si salta el mensaje) y verificar que al hacer clic sobre el botón cambia el texto del Label.
    • Cerrar la ventana del navegador.
  2. Añadir una extensión del AJAX Toolkit
    • En el cuadro de Herramientas, bajo la pestaña “Extensiones de AJAX”, arrastrar “Script Manager” dentro del “Form”
      Nota: El control “ScriptManager” controla los scripts del lado del cliente en páginas Microsoft ASP.NET AJAX. Por defecto, el control ScriptManager registra la biblioteca Microsoft AJAX con la página. Esto permite que los scripts en el cliente utilicen las extensiones tipo del sistema y soporta características como el cargado parcial de la página y las llamadas a servicios web.
    • Añadir un “ConfirmButtonExtender” arrastrándolo desde el cuadro de herramientas.
    • Enlazar el extensión haciendo clic sobre él (en el modo de Diseño), yendo al panel de Propiedades y en la propiedad “TargetControlID” seleccionando “Button1”
    • Configurar la extensión haciendo clic en el botón, expandiendo la propiedad “ConfirmButtonExtender” y escribiendo “Estás seguro?” en “ConfirmText”
    • Generar la solución presionando F5. Podemos ver que al hacer clic sobre el botón ahora aparece un diálogo de confirmación que puede utilizarse para cancelar el procesamiento del botón.

Utilizar un extensión

Los siguientes pasos son una guía sobre cómo utilizar uno de los extensiones ASP.NET AJAX de ejemplo en una página web ASP.NET.

Prerrequisitos: En primer lugar, hay que seguir los pasos de configuración del entorno.

1.      Crear una página web ASP.NET

  • i) Utilizando Visual Studio 2008 ó Visual Web Developer, crea un nuevo sitio web abriendo el menú “Archivo” y haciendo clic en “Nuevo”, “Sitio Web…”, y escogiendo “Sitio web ASP.NET”.
  • ii) Hacer doble clic en el explorador de soluciones sobre “Default.aspx”
  • iii) Cambiar a la vista de diseño en la pestaña inferior de la ventana
  • iv) Añadir un Label (Label1) arrastrándolo desde el Cuadro de Herramientas
  • v) Añadir un Botón (Button1) arrastrándolo desde el Cuadro de Herramientas
  • vi) Crear un manejador del Clic para el Button haciendo doble clic sobre él
  • vii) Se abrirá automáticamente “Default.aspx.cs” y el cursos estará sobre el método “Button1_Click”
  • viii) Añadir el siguiente código: 
  • Label1.Text  = “Se ha procesado el clic sobre el Botón”;
  • ix) Generar la solución, presionando F5 (habilitar la depuración si salta el mensaje) y verificar que al hacer clic sobre el botón cambia el texto del Label.
  • x) Cerrar la ventana del navegador.

2.      Añadir una extensión del AJAX Toolkit

  • i)  En el cuadro de Herramientas, bajo la pestaña “Extensiones de AJAX”, arrastrar “Script Manager” dentro del “Form”
    Nota: El control “ScriptManager” controla los scripts del lado del cliente en páginas Microsoft ASP.NET AJAX. Por defecto, el control ScriptManager registra la biblioteca Microsoft AJAX con la página. Esto permite que los scripts en el cliente utilicen las extensiones tipo del sistema y soporta características como el cargado parcial de la página y las llamadas a servicios web.
  • ii) Añadir un “ConfirmButtonExtender” arrastrándolo desde el cuadro de herramientas.
  • iii) Enlazar el extensión haciendo clic sobre él (en el modo de Diseño), yendo al panel de Propiedades y en la propiedad “TargetControlID” seleccionando “Button1”
  • iv) Configurar la extensión haciendo clic en el botón, expandiendo la propiedad “ConfirmButtonExtender” y escribiendo “Estás seguro?” en “ConfirmText”
  • v) Generar la solución presionando F5. Podemos ver que al hacer clic sobre el botón ahora aparece un diálogo de confirmación que puede utilizarse para cancelar el procesamiento del botón.

Crear un nuevo extensión

Los siguientes pasos son una pequeña guía para crear una extensión de ASP.NET AJAX desde cero que después se pueda utilizar en una página web ASP.NET

Prerrequisitos: Haber seguido los pasos para configurar el entorno.

  1. Crear los cimientos
    • i) Utilizando Visual Studio 2008, crear un nuevo sitio web ASP.NET, abriendo el menú “Archivo”, haciendo clic en “Nuevo”, “Sitio Web…”, y escogiendo “Sitio web ASP.NET”.
    • ii) Abrir el menú “Archivo”, hacer clic en “Añadir”, y “Nuevo Proyecto…” del menú.
    • iii) Seleccionar C# ó VB y después seleccionar “ASP.NET AJAX Control Project” de la sección “Mis plantillas”.
    • iv) Llamar al nuevo proyecto “DeshabilitarBoton”
    • v) Esto creará automáticamente la plantilla por defecto del proyecto. Los siguientes archivos se crearán automáticamente:
      • DeshabilitarBotonBehavior.js – Este archivo es dónde se añade la lógica de script del cliente
      • DeshabilitarBotonExtender.cs – Este archivo es la clase del control del lado del servidor que controlará la creación de la extensión y permitirá hacer cambios en las propiedades cuando se esté diseñando. Además, define las propiedades que pueden ser configuradas en la extensión. Estas propiedades son accesible a través del código y el diseño y coinciden con las propiedades definidas en el archivo DeshabilitarBotonBehaviour.js.
      • DeshabilitarBotonDesigner.cs – Esta clase permite que haya funcionalidad en el diseño. En un principio, no habría por qué modificarlo.
  2. Asegurarse que el comportamiento del cliente está configurado correctamente
    • i) Hacer doble clic sobre DeshabilitarBotonBehaviour.js para abrirlo
    • ii) Añadir el siguiente código de prueba: alert(“Hola Mundo!”); inmediatamente debajo de la línea: this._myPropertyValue = null;
    • iii) Abrir Default.aspx haciendo doble clic en el Explorador de Soluciones
    • iv) Cambiar al modo diseño en la pestaña inferior de la ventana.
    • v) Añadir un TextBox (TextBox1) arrastrándolo del Cuadro de Herramientas
    • vi) Añadir un Botón (Button1) arrastrándolo del Cuadro de Herramientas
    • vii) Generar la solución
    • viii) En el cuadro de Herramientas, bajo la pestaña “Extensiones de AJAX”, arrastrar “Script Manager” dentro del “Form”
    • ix) En la parte de arriba del Cuadro de Herramientas hay una pestaña que se llama “DeshabilitarBotón Componentes”. Dentro, hay un elemento llamado “DeshabilitarBotónExtender”. Arrastra este elemento en la página.
      NOTA: Si este elemento no se encuentra dentro del Cuadro de Herramientas, lo puedes ar manualmente siguiendo los siguientes pasos:
      • a) Cambiar a la vista de código
      • b) Añadir una referencia al ensamblado, haciendo clic derecho en el sitio web y seleccionando “Añadir Referencia…”, “Proyectos”, y “DeshabilitarBoton”
      • c) Registrar la referencia en la página web, añadiendo el siguiente código al principio de la página:
        <%@ Register Assembly="DeshabilitarBoton " Namespace="DeshabilitarBoton" TagPrefix="cc1"%>
        (Si utilizas Visual Basic, el espacio de nombres será “DeshabilitarBoton.DeshabilitarBoton”)
      • d) Añadir el control a la página:
        <cc1:DeshabilitarBotonExtender ID="DeshabilitarBotonExtender1" runat="server"/>
      • e) Ahora se puede cambiar otra vez a la vista de diseño.
    • x) Enlazar la extensión haciendo clic en DeshabilitarBotonExtender, yendo al panel de Propiedades y expandiendo la propiedad “TargetControlID”, elegir “TextBox1”.
    • xi) Generar la solución presionando F5 (habilitar la depuración si salta el mensaje) y verificar que la página muestra un diálogo con el texto “Hola Mundo!” cuando se carga
    • xii) Cerrar la ventana del explorador
  3. Añadir funcionalidad
    • i) Quitar el texto de prueba alert(“Hola Mundo!”); que se había añadido antes a DeshabilitarBotonBehavior.js
    • ii) Limitar la extensión sólo a Cajas de Texto, cambiando “Control” a “TextBox” en el atributo TargetControlType en DeshabilitarBotonExtender.cs:
      [TargetControlType(typeof(TextBox))]
    • iii) Cambiar el nombre de la propiedad haciendo lo siguiente (la diferencia entre mayúsculas y minúsculas es importante):
      • a. Cambiar “MyProperty” por “IDBotonObjetivo” en DeshabilitarBotonExtender.cs (aparece en 3 sitios)
      • b. Cambiar “MyProperty”/”myProperty” por “IDBotonObjetivo” en DeshabiltiarBoton.js (aparece en 5 sitios)
    • iv) Añadir una nueva propiedad TextoDeshabilitado siguiendo el ejemplo de la propiedad que acabamos de modificar IDBotonObjetivo (la diferencia entre mayúsculas y minúsculas es importante):
    • a. Añadir una nueva propiedad pública a DeshabilitarBotonExtender.cs:
      [ExtenderControlProperty] public string TextoDeshabilitado { get { return GetPropertyValue("TextoDeshabilitado", ""); } set { SetPropertyValue("TextoDeshabilitado", value); } }
    • b. Añadir una nueva variable al comportamiento en DeshabilitarBotonBehavior.js debajo de la variable existente IDBotonObjetivoValue:
      this._TextoDeshabilitadoValue = null;
    • c. Añadir métodos get/set al comportamiento en DeshabilitarBotonBehavior.js sobre los métodos get/set existentes de IDBotonObjetivo:
      get_TextoDeshabilitado: function() { return this._TextoDeshabilitadoValue; }, set_TextoDeshabilitado: function(value) { this._TextoDeshabilitadoValue = value; },
    • v) Debido a que IDBotonObjetivo debería referirse a un control, añadir el atributo
      [IDReferenceProperty(typeof(Button))]
      a la propiedad en DeshabilitarBotonExtender.cs, para que el framework pueda automáticamente resolver el ID del control en tiempo de renderizado.
    • vi) Añadir el manejador para cuando la tecla esté arriba al comportamiento, insertando el código siguiente encima de las definiciones de propiedades que ya existen en DeshabilitarBotonBehavior.js:
      _onkeyup : function() { var e = $get(this._IDBotonObjetivo); if (e) { var disabled = ("" == this.get_element().value); e.disabled = disabled; if (this._TextoDeshabilitadoValue) { if (disabled) { this._oldValue = e.value; e.value = this._TextoDeshabilitado; } else { if (this._oldValue) { e.value = this._oldValue; } } } } },
    • vii) Enlazar el manejador anterior, añadiendo el siguiente código al final de la función de inicialización del comportamiento:
      $addHandler(this.get_element(), 'keyup',Function.createDelegate(this, this._onkeyup)); this._onkeyup();
      NOTA: Este tutorial no tiene en cuenta la limpieza de recursos, con el objetivo de que sea lo más sencillo posible.
    • viii) Volver a Default.aspx haciendo doble clic en el explorador de soluciones.
    • ix) Volver a la vista de código haciendo clic en la pestaña inferior
    • x) Eliminar la propiedad que se había configurado antes, borrando el código siguiente de DeshabilitarBotonExtender en el caso de que aparezca:
      MyProperty="property"
    • xi) Volver a generar la solución
    • xii) Cambiar a la vista de diseño en la pestaña inferior
    • xiii) Modificar las propiedades de la extensión, haciendo clic en el TextBox, yendo al panel de Propiedades, expandiendo el DeshabilitarBotonExtender, y especificando “Button1” en IDBotonObjetivo y “Introducir texto” en TextoDehabilitado
    • xiv) Generar la solución presionando F5, introducir texto en el TextBox y observar el comportamiento del control Botón – notar que está deshabilitado y dice “Introducir texto” cuando el TextBox está vacío.

Hemos construido y utilizando una extensión de ASP.NET AJAX.

Soluciones OSS

Soluciones OSS
Oportunidad para empresas de desarrollo web
Microsoft ha desarrollado, dentro del programa de Partners de Microsoft, una campaña espec... más
Reducción de Costes con plataforma de desarrollo Microsoft
El día 11 de Marzo tendrá lugar este evento dirigido a Directores de Departamentos de Desa... más
Cursos online
Hemos actualizado los cursos de formación de MSDN para que san válidos tanto para Visual S... más

... More

Componentes y bloques

Introducción al ASP.NET AJAX Control Toolkit

El ASP.NET AJAX Control Toolkit es un proyecto de código compartido construido sobre el framework Microsoft ASP.NET AJAX que provee de una infraestructura para escribir extensiones y controles de ASP.NET AJAX.

Silverlight Control Toolkit

Es una colección de controles, componentes y utilidades que añade funcionalidad a los controles de Silverlight ya existentes.

Ejemplos Completos

MSDN Video 2008

MSDN Video 2008 implementa una arquitectura multi capa orientada a servicios utilizando las últimas tecnologías: LINQ, WPF, ASP.NET 3.5, AJAX, Silverlight, Windows Forms 3.5 y WPF.

Portales relacionados

CodePlex

Portal de código abierto hosteado por Microsoft donde puedes encontrar software creado por la comunidad, iniciar un nuevo proyecto ó unirte a un proyecto existente.

 

SourceForge

Es un repositorio de código compartido donde los desarrolladores pueden controlar y utilizar los desarrollos de software abierto.

 

Microsoft está realizando una encuesta en línea para comprender su opinión del sitio web de. Si decide participar, se le presentará la encuesta en línea cuando abandone el sitio web de.

¿Desea participar?