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 mención a la prudencia.Ajax no es sinónimo 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 también tener claro que a veces, podemos sobrecargar el servidor en exceso y provocar más perjuicios que beneficios.Dicho esto, que sirva simplemente de atención, 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 añadir funcionalidades Ajax a nuestras aplicaciones ASP.NET.

El control más importante de todos los controles que podemos encontrar en las extensiones Ajax es el control ScriptManager del que hablaremos a continuación.

El control UpdatePanel habilita a la aplicación Web para actualizar una porción de la página Web ASP.NET sin tener que recargar toda la página Web entera.

Todos los controles de las Ajax Extensions están 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 relación directa con Ajax y ASP.NET.Ajax proporciona una comunicación "por debajo" entre el servidor y el navegador Web (usuario) gestionada a través de código JavaScript. De ahí, que Ajax signifique Asynchronous JavaScript And XML.Este código JavaScript se encarga de hacer llamadas a recursos remotos manejando hábilmente en la interfaz de usuario las respuestas que le devuelve el servidor sin que el usaurio tenga la impresión de que se está haciendo, algo que ocurre con frecuencia al refrescar la página Web entera.

Desarrollo Cliente Servidor - Página 1

Ajax en ASP.NET

El control ScriptManager tiene la misión de generar el código 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 aplicación Web.

Cuando hayamos creado nuestra aplicación inicial, añadiremos una nueva página Web a nuestro proyecto y acudiremos a la ventana de herramientas y pulsaremos el botón derecho del ratón con el fin de buscar el ensamblado AjaxControlToolkit.dll que contendrá un numeroso número 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 - Página 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 página Web, vamos a insertar dentro de la página Web un control ScriptManager y un control TextBox estándar.

En este punto, aún no habremos indicado ninguna funcionalidad Ajax a nuestros controles.La siguiente acción será seleccionar la opción Agregar extensor del control TextBox.

Desarrollo Cliente Servidor - Página 3

Ajax en ASP.NET

Aparecerá una ventana como la que se muestra a continuación, dentro de la cual seleccionaremos el extensor CalendarExtender

.

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

Desarrollo Cliente Servidor - Página 4

Ajax en ASP.NET

La parte de código que contiene nuestra página 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 través del postback estándar 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 estándar.

Haremos doble clic sobre el control Button y escribiremos el siguiente código:

Desarrollo Cliente Servidor - Página 5

Ajax en ASP.NET

protected void Button1_Click(object sender, EventArgs e)

{

this.TextBox1.Text = this.Editor1.Content.ToString();

}

Ejecutaremos nuestra aplicación, 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, ¿cómo evitar de forma rápida y sencilla ese postback para que no me refresque la página 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 aplicación.

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 hacía antes.

Como podemos apreciar, en un par de acciones de ratón, hemos preparado una página ASP.NET con Ajax.

Desarrollo Cliente Servidor - Página 6