ActividadFormativaUsodeAjax

RELATO
CONTENIDO ASOCIADOS REFERENCIAS VISUALES
1.- Creacin de Aplicacin Web Integrando Ajax
Introduccin:

Hasta ahora, hemos aprendido a crear pginas web que

utilizan el modelo postback. Con el postback, las pginas
estn perpetuamente reenvindose al servidor web y
regenerndose teniendo como que hay un parpadeo del
contenido de la pgina cuando tiene que refrescarse.
Adems se tiene el problema que se reenvan todos los datos
al servidor.
Hoy en da existe una nueva generacin de aplicaciones
web que utiliza un conjunto de prcticas de diseo y
tecnologas conocidas como Ajax.
Una de las caractersticas fundamentales de Ajax es la
capacidad para actualizar parte de la pgina, mientras que
deja el resto intacto.
AJAX son las siglas de Asynchronous JavaScript And XML. No
es un lenguaje de programacin sino un conjunto de
tecnologas (HTML-JavaScript-CSS-DHTML-PHP/ASP.NET/JSP-
XML) que nos permiten hacer pginas de internet ms
interactivas.
La caracterstica fundamental de AJAX es permitir actualizar
parte de una pgina con informacin que se encuentra en
el servidor sin tener que refrescar completamente la pgina.
De modo similar podemos enviar informacin al servidor.



ActividadFormativaUsodeAjax

2.- Desarrollo: Imagen 0
Cmo integramos Ajax con Asp.net? TI1213_AF_2_2_Imagen_Desarrollo_0.JPG

Imagen 0
Lo primero que vamos a necesitar para desarrollar nuestro
TI1213_AF_2_2_Imagen_Desarrollo_0.JPG
actividad formativa es instalar Ajax Control ToolKit Net.4
para esto nos conectaremos al
Url:
http://ajaxcontroltoolkit.codeplex.com/releases/view/11609
1
Para bajar el archivo.zip: AjaxControlToolkit.Binary.NET4
Ver Imagen 0

Luego, debe extraer el contenido del archivo
AjaxControlToolkit.Binary.NET4.zip
Ver Imagen 1

Despus de realizar 2 pasos anteriores realizaremos el Imagen 1
proyecto Web integrando Ajax. TI1213_AF_2_2_Imagen_Desarrollo_1.JPG

Acciones a realizar:
2.1.- Crear un nuevo Proyecto
Usar plantillas Visual C#
Web Aplicacin Vaca de Asp.net


ActividadFormativaUsodeAjax

2.2- Agregar nuevo elemento al Proyecto

Agregar Nuevo ElementoWeb Forms vaco

2.3- Luego en el cuadro ToolBox agregaremos una nueva

ficha de controles.
Nos posicionaremos en el cuadro de Toolbox,
presionaremos el botn derecho del mause y
seleccionaremos Agregar Ficha y le daremos el nombre
Ajax Control Toolkit
Ver Imagen 2
Imagen 2
2.4.-Luego sobre la nueva Ficha recin creada, TI1213_AF_2_2_Imagen_Desarrollo_2.JPG
posicionamos el mause y presionaremos el botn derecho
del mause y seleccionaremos Elegir Elemento
Ver Imagen 3

2.5.- En el recuadro que aparecer en pantalla se debe

elegir el botn examinar.
Ver Imagen 4

2.6.- En la ventana que aparecer en pantalla se debe

elegir la carpeta AjaxControlToolkit.Binary.NET4
Ver Imagen 5

2.7.- Dentro de la carpeta AjaxControlToolkit.Binary.NET4

Debe seleccionar el archivo AjaxControlToolkit.dll
Ver Imagen 6 Imagen 3
TI1213_AF_2_2_Imagen_Desarrollo_3.JPG


ActividadFormativaUsodeAjax

2.8.- Luego en la ventana de Dialogo con los componentes

de Net Framework seleccionados presionar el botn
aceptar.
Ver Imagen 7

Con estas acciones debemos tener en la Toolbox un nuevo

conjunto de componentes AJax.
Ver Imagen 8

2.9.- En el formulario antes creado incorporaremos

un control ScriptManager, para ellos desde la Toolbox en la
Imagen 4
ficha Extensiones Ajax, arrastrando el control ScriptManager
TI1213_AF_2_2_Imagen_Desarrollo_4.JPG
al cuerpo del formulario.
Ver Imagen 9

2.10.-Posteriormente incorporaremos un control

TabConteiner, para ellos desde la Toolbox en la ficha Ajax
Control ToolKit (recientemente incorporada), arrastrando el
control TabContainer al cuerpo del formulario.
Ver Imagen 10

2.11.-Posteriormente incorporaremos un control

TabConteiner, para ellos desde la Toolbox en la ficha Ajax
Control ToolKit (recientemente incorporada), arrastrando el
control TabContainer al cuerpo del formulario. Imagen 5
Ver Imagen 10 TI1213_AF_2_2_Imagen_Desarrollo_5.JPG


ActividadFormativaUsodeAjax

2.12.-En control TabConteiner incorporado, en el TabPanel1
lo definimos como Agregar Usuario
Ver Imagen 11

2.13.-En control TabConteiner incorporado, agregamos un

nuevo Panel y lo Rotulamos como Buscar Usuario .
Ver Imagen 12

2.14.-En el TabPanel Agregar Usuario incorporado,

agregamos los controles que nos permita incorporar tres
campos para grabar datos en la tabla de usuarios - el
nombre de usuario, la clave de acceso y la fecha de alta.
Y el botn Agregar.

Los nombres de los controles de Texto son: Imagen 6

txtUsuario TI1213_AF_2_2_Imagen_Desarrollo_6.JPG
txtClave
txtFechaAlta

Los nombre de los control Button

Son btnAgregar Botn Agregar
Ver Imagen 13

Imagen 7
TI1213_AF_2_2_Imagen_Desarrollo_7.JPG


ActividadFormativaUsodeAjax

3.- Climax

3.1 Ahora agregamos en los controles existente en TabPanel

Agregar Usuario, extensores de propiedades.

Para ello seleccionaremos el control txtClave,

seleccionaremos el botn derecho del mause y
seleccionaremos la opcin agregar extensor.
Ver Imagen 14

Luego en la ventana Asistentes para Extensor,

seleccionaremos la funcionalidad PassworStrength, que nos Imagen 8
permitir validar el largo de la clave ingresada por usuario. TI1213_AF_2_2_Imagen_Desarrollo_8.JPG
Ver Imagen 15

3.2.- En la txtClave, definimos la propiedades:

MaxLength 12 yTextMode como PassWord
Ver Imagen 16

3.3.- En la txtClave, definimos la sub propiedades asociada

a la propiedad txtClave_PassWordStrength:

MinimunNumericCharacter: 6 Cantidad mnima de

caracteres aceptables para la password. Imagen 9


ActividadFormativaUsodeAjax

TI1213_AF_2_2_Imagen_Desarrollo_9.JPG
PreferedPasswordLength: 12 Cantidad preferida de
caracteres aceptables para la password.

PrefixText : Largo Prefijo de texto que aparecer al

autovalidar largo de la password (PrefixText se asocia a
TextStrengthDescriptions)

TextStrengthDescriptions: Insuficiente;Bien;Excelente

Ver Imagen 17

3.4.-Para ello seleccionaremos el control txtFechaAlta,

seleccionaremos el botn derecho del mause y Imagen 10
seleccionaremos la opcin agregar extensor. TI1213_AF_2_2_Imagen_Desarrollo_10.JPG
Ver Imagen 18

Luego en la ventana Asistentes para Extensor,

seleccionaremos la funcionalidad CalendarExtender, que
nos permitir acceder a un calendario grafico donde
podremos seleccionar la fecha deseada.
Ver Imagen 19

3.5.- En la txtFechaAlta, definimos la sub propiedades

asociada a la propiedad txtFechaAlta_CalendarExtender:
Format: dd/MM/yyyy


ActividadFormativaUsodeAjax

ToDaysDateFormat: dd/MM/yyyy Imagen 11
Ver Imagen 20 TI1213_AF_2_2_Imagen_Desarrollo_11.JPG

3.6.-Agregamos al TabPanel Agregar Usuario un label

llamado Mensaje.
Ver Imagen 21

3.7.-En el TabPanel Buscar Usuario incorporado, agregamos

los controles que nos permita incorporar 1 campos para
buscarr datos en la tabla de usuarios - el nombre de usuario,
la clave de acceso y la fecha de alta.
Y el botn Buscar.

Los nombres de los controles son:

txtCodigoUsuarioTextBox
lbUsuarioLabel
lbClaveLabel
lbFechaAltaLabel
Imagen 12
TI1213_AF_2_2_Imagen_Desarrollo_12.JPG
Y el control Button: Botn Buscar
Ver Imagen 22

Al finalizar podemos ver que algunas de las ventajas de

integrar Asp.net con Ajax son:

La experiencia de usuario en la navegacin es

mucho ms rica. Ya no se refresca la pgina
constantemente al interactuar con ella.


ActividadFormativaUsodeAjax

El tiempo de espera para una peticin se reduce. El
usuario al hacer un pedido (request) al servidor, no se
enva toda la pgina.
Por la misma razn anterior el trafico al servidor se
reduce.

Imagen 13
TI1213_AF_2_2_Imagen_Desarrollo_13.JPG

4.- Cierre
4.1 Ahora podemos ejecutar nuestra aplicacin Web (F5).

Al ejecutar la aplicacin en el formulario el usuario puede

acceder a dos paneles distintos gracias al uso del control
Ajax TabConteiner sin efectuar un PostBack.

Ver Imagen 23

4.2 En el panel Agregar Usuario, ingresaremos datos y

veremos el funcionamiento de los distintos extender
utilizados en este panel.
Imagen 14


ActividadFormativaUsodeAjax

Primero probaremos ingresar una Clave de Usuario con un TI1213_AF_2_2_Imagen_Desarrollo_14.JPG
largo menor al MinimunNumericCharacter: 6 Cantidad
mnima de caracteres aceptables para la password.
Y veros que en pantalla sin efectuar un PostBack se
desplegara un mensaje producto de la validacin realizada
por el extensor PassworStrength.
Ver Imagen 24

Segundo probaremos ingresar una Clave de Usuario con un

largo menor al MinimunNumericCharacter: 6 Cantidad
mnima de caracteres aceptables para la password.
Y veros que en pantalla sin efectuar un PostBack se
desplegara un mensaje producto de la validacin realizada Imagen 15
por el extensor PassworStrength. TI1213_AF_2_2_Imagen_Desarrollo_15.JPG
Ver Imagen 25

Tercero probaremos ingresar una Clave de Usuario un largo

similar al definidoen PreferedPasswordLength: 12 Cantidad
preferida de caracteres aceptables para la password.
Ver Imagen 26

Cuarto probaremos ingresar una fecha y veremos como el

CalendarExtender asociado al txtFechaAlta propicia el
despliegue de un calendario grafico que permitir
seleccionar al usuario en forma amigable un fecha en
particular.
Ver Imagen 27


ActividadFormativaUsodeAjax

Al seleccionar la fecha del calendario grfico generado por
el CalendarExtender la fecha seleccionada quedara en la
txtFechaAlta en el formato definido en Propiedad
txtFechaAlta_CalendarExtender Format: dd/MM/yyyy.

Imagen 16
TI1213_AF_2_2_Imagen_Desarrollo_16.JPG

Imagen 17
TI1213_AF_2_2_Imagen_Desarrollo_17.JPG


ActividadFormativaUsodeAjax



ActividadFormativaUsodeAjax

Imagen 18
TI1213_AF_2_2_Imagen_Desarrollo_18.JPG

Imagen 19
TI1213_AF_2_2_Imagen_Desarrollo_19.JPG


ActividadFormativaUsodeAjax

Imagen 20
TI1213_AF_2_2_Imagen_Desarrollo_20.JPG

Imagen 21
TI1213_AF_2_2_Imagen_Desarrollo_21.JPG


ActividadFormativaUsodeAjax

Imagen 22
TI1213_AF_2_2_Imagen_Desarrollo_22.JPG

Imagen 23
TI1213_AF_2_2_Imagen_Desarrollo_23.JPG


ActividadFormativaUsodeAjax

Imagen 24
TI1213_AF_2_2_Imagen_Desarrollo_24.JPG

Imagen 25
TI1213_AF_2_2_Imagen_Desarrollo_25.JPG


ActividadFormativaUsodeAjax

Imagen 26
TI1213_AF_2_2_Imagen_Desarrollo_26.JPG

Imagen 27


ActividadFormativaUsodeAjax

TI1213_AF_2_2_Imagen_Desarrollo_27.JPG

Imagen 28
TI1213_AF_2_2_Imagen_Desarrollo_28.JPG


ActividadFormativaUsodeAjax