Ajax en ASP.

NET
Ajax siempre o Ajax a veces
Antes de ver con un ejemplo el uso de Ajax en ASP.NET, vamos a hacer una
mencin a la prudencia.
Ajax no es sinnimo del ideal, y aunque es muy interesante y muy til, un mal,
indebido o abuso uso de Ajax, puede acarrear problemas serios en los desarrollos
de aplicaciones Web.
Es muy importante tener claro que no siempre debemos usar Ajax, y tambin tener
claro que a veces, podemos sobrecargar el servidor en exceso y provocar ms
perjuicios que beneficios.
Dicho esto, que sirva simplemente de atencin, veamos un ejemplo de como usar
Ajax en ASP.NET.

Ajax Extensions
Las Ajax Extensions o las extensiones de Ajax para ASP.NET, son unos controles de
servidor que nos permite aadir funcionalidades Ajax a nuestras aplicaciones
ASP.NET.

El control ms importante de todos los controles que podemos encontrar en las

extensiones Ajax es el control ScriptManager del que hablaremos a continuacin.
El control UpdatePanel habilita a la aplicacin Web para actualizar una porcin de la
pgina Web ASP.NET sin tener que recargar toda la pgina Web entera.
Todos los controles de las Ajax Extensions estn instalados en ASP.NET 3.5
superior. En el caso de disponer de ASP.NET 2.0, tendremos que descargarnos las
Ajax Extensions de Internet desde el siguiente enlace.

El control ScriptManager
El control Script Manager es el control principal del lado del servidor que tiene
relacin directa con Ajax y ASP.NET.
Ajax proporciona una comunicacin "por debajo" entre el servidor y el navegador
Web (usuario) gestionada a travs de cdigo JavaScript. De ah, que Ajax signifique
Asynchronous JavaScript And XML.
Este cdigo JavaScript se encarga de hacer llamadas a recursos remotos
manejando hbilmente en la interfaz de usuario las respuestas que le devuelve el

Desarrollo Cliente Servidor -

Pgina 1

Ajax en ASP.NET
servidor sin que el usaurio tenga la impresin de que se est haciendo, algo que
ocurre con frecuencia al refrescar la pgina Web entera.
El control ScriptManager tiene la misin de generar el cdigo JavaScript necesario
para gestionar las peticiones Ajax con el navegador Web.

Agregando los controles de Ajax Control Toolkit en Visual

Studio
La primera tarea a llevar a cabo es la de descargar el ensamblado de Ajax Control
Toolkit en nuestro disco duro.
Una vez hecho esto, iniciaremos Visual Studio con el fin de crear un nuevo proyecto
de aplicacin Web.
Cuando hayamos creado nuestra aplicacin inicial, aadiremos una nueva pgina
Web a nuestro proyecto y acudiremos a la ventana de herramientas y pulsaremos el
botn derecho del ratn con el fin de buscar el ensamblado AjaxControlToolkit.dll
que contendr un numeroso nmero de controles de usuario de funcionalidad Ajax.
Al seleccionar el ensamblado, Visual Studio nos mostrar una gran cantidad de
controles listos para ser usados en nuestras aplicaciones Web.

Desarrollo Cliente Servidor -

Pgina 2

Ajax en ASP.NET

Una vez que tenemos los controles de Ajax Control Toolkit listos para ser utilizados
y que hemos creado una nueva pgina Web, vamos a insertar dentro de la pgina
Web un control ScriptManager y un control TextBox estndar.
En este punto, an no habremos indicado ninguna funcionalidad Ajax a nuestros
controles.
La siguiente accin ser seleccionar la opcin Agregar extensor del control TextBox.

Desarrollo Cliente Servidor -

Pgina 3

Ajax en ASP.NET

Aparecer una ventana como la que se muestra a continuacin, dentro de la cual

seleccionaremos el extensor CalendarExtender

Al ejecutar nuestra aplicacin Web, veremos que sta nos permite seleccionar una
fecha al hacer clic con el ratn sobre la caja de texto sin que tengamos que
recargar el formulario.

Desarrollo Cliente Servidor -

Pgina 4

Ajax en ASP.NET

La parte de cdigo que contiene nuestra pgina Web es en este caso la siguiente:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="TextBox1_CalendarExtender"
runat="server"
Enabled="True" TargetControlID="TextBox1">
</cc1:CalendarExtender>

En el siguiente ejemplo, vamos a ver como utilizar uno de los controles de Ajax
Control Toolkit, y como mostrar el contenido de ese control en un control TextBox a
travs del postback estndar de ASP.NET
Vamos a iniciar un nuevo proyecto e insertar dentro del formulario Web un control
ScriptManager, un control Editor de Ajax Control Toolkit, y un control TextBox y
Button estndar.

Desarrollo Cliente Servidor -

Pgina 5

Ajax en ASP.NET
Haremos doble clic sobre el control Button y escribiremos el siguiente cdigo:
protected void Button1_Click(object sender, EventArgs e)
{
this.TextBox1.Text = this.Editor1.Content.ToString();
}

Ejecutaremos nuestra aplicacin, escribiremos algo en el editor, y pulsaremos el

control Button.
Observaremos que se produce un postback y que dentro del control TextBox,
aparece el texto que escribimos en el control Editor.
Ahora bien, cmo evitar de forma rpida y sencilla ese postback para que no me
refresque la pgina Web entera?
El control UpdatePanel de las extensiones Ajax tiene la culpa.
Vamos a insertar un control UpdatePanel en el formulario Web y vamos a arratrar y
soltar el control TextBox y Button dentro de este control y vamos a ejecutar
nuevamente nuestra aplicacin.
Observaremos en este caso, que no se produce postback, y que los datos, se
siguen pasando del control Editor al control TextBox de la misma manera a como lo
haca antes.
Como podemos apreciar, en un par de acciones de ratn, hemos preparado una
pgina ASP.NET con Ajax.

Desarrollo Cliente Servidor -

Pgina 6