Tema 7 - 2 Usando Los ASP.net AJAX Control Extender

4
PROGRAMACIÓN .NET (ASP.NET) Página 1 de 4 Usando los ASP.NET AJAX Control Extender ¿Qué son los ASP.NET Control Extenders? Son los controles que heredan de System.Web.UI.ExtenderControls, y que se pueden usar para añadir funcionalidad (normalmente soporte AJAX) a controles existentes que se han declarado en la página. Permite a los desarrolladores encapsular comportamientos y hace fácil añadir funcionalidades más ricas a nuestras aplicaciones. El ASP.NET AJAX Control Toolkit es un gran ejemplo de un proyecto que se aproveche de esta funcionalidad. Incluye más de 40 extensores de controles que podemos descargar para añadir funcionalidad AJAX a nuestras aplicaciones. Por ejemplo, supongamos que queremos tener un textbox en una página donde un usuario pueda introducir un dato: Si el navegador tiene habilitado JavaScript, querremos tener un calendario que aparezca cuando el usuario ponga el foco en el textbox para ayudar a seleccionar una fecha:

Transcript of Tema 7 - 2 Usando Los ASP.net AJAX Control Extender

Page 1: Tema 7 - 2 Usando Los ASP.net AJAX Control Extender

PROGRAMACIÓN .NET (ASP.NET)

Página 1 de 4

Usando los ASP.NET AJAX Control Extender ¿Qué son los ASP.NET Control Extenders? Son los controles que heredan de System.Web.UI.ExtenderControls, y que se pueden usar para añadir funcionalidad (normalmente soporte AJAX) a controles existentes que se han declarado en la página. Permite a los desarrolladores encapsular comportamientos y hace fácil añadir funcionalidades más ricas a nuestras aplicaciones. El ASP.NET AJAX Control Toolkit es un gran ejemplo de un proyecto que se aproveche de esta funcionalidad. Incluye más de 40 extensores de controles que podemos descargar para añadir funcionalidad AJAX a nuestras aplicaciones. Por ejemplo, supongamos que queremos tener un textbox en una página donde un usuario pueda introducir un dato:

Si el navegador tiene habilitado JavaScript, querremos tener un calendario que aparezca cuando el usuario ponga el foco en el textbox para ayudar a seleccionar una fecha:

Page 2: Tema 7 - 2 Usando Los ASP.net AJAX Control Extender

PROGRAMACIÓN .NET (ASP.NET)

Página 2 de 4

Para habilitar esto, se usa el ASP.NET AJAX Control Toolkit. Sólo hay que añadir el control "CalendarExtender" e indicarle en la propiedad "TargetControlId" el nombre del <asp:textbox>:

El CalendarExtender emitirá automáticamente un script AJAX al cliente que añadirá el comportamiento del calendario al TextBox en tiempo de ejecución. NO hay que añadir ningún código más. Uso de los ASP.NET AJAX Control Extenders en Visual Studio 2010.

Antes de usar cualquier control Ajax debemos agregar a muestro proyecto un ScriptManagr

Page 3: Tema 7 - 2 Usando Los ASP.net AJAX Control Extender

PROGRAMACIÓN .NET (ASP.NET)

Página 3 de 4

Enlazar un Control Extender a un control existente Veremos una nueva opción cuando seleccionemos un control TextBox en una página:

Si hacemos clic en "Agregar extender ..." veremos un cuadro de diálogo con todos los extensores que podemos usar con el control que habíamos seleccionado:

Sólo seleccionamos el extensor que queramos, le damos un nombre para el extensor y hacemos clic en OK. Con esto se añadirá el siguiente código:

Page 4: Tema 7 - 2 Usando Los ASP.net AJAX Control Extender

PROGRAMACIÓN .NET (ASP.NET)

Página 4 de 4

Fusión de propiedades Cuando enlazamos un control extensor a un control en VS 2010, la ventana de propiedades del control original se extiende para mostrar además las propiedades del extensor enlazado:

De esta forma podemos ver todas las propiedades juntas. También podemos tener varios extensores asociados al mismo control (Por ejemplo: podemos tener un TextBoxWaterMark extender y un CalendarExtender asociado al mismo TextBox, y ver las propiedades de ambos extensores en la ventana anterior). Borrar un Extensor. Si queremos eliminar un extensor de un control, sólo seleccionamos la opción "Quitar extender...":