12 de noviembre de 2009

AJAX jQuery en ASP.NET

Veamos un ejemplo práctico de como utilizar AJAX jQuery en aplicaciones ASP.Net.

jQuery AJAX, Ejemplo

jQuery Ajax

Nuestro ejemplo será muy simple, crearemos una página que contendrá 2 cajas de texto, donde introduciremos nuestro nombre y apellidos; y al pulsar el botón, se enviaran ambas cadenas al servidor vía AJAX, donde procesaremos ambas cadenas y devolveremos otra. En realidad es un ejemplo poco útil pero nos servirá para dar la idea sobre el uso de jQuery AJAX y donde usaremos JSON para el intercambio de datos.

Si deseas ver otro ejemplo un poco más practico visita el enlace jQuery AJAX a un método que devuelve una colección de objetos (Array JSON).

Pero veamos el código de ejemplo asociado:

jQuery AJAX Ejemplo, Código ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQAjax.aspx.cs" Inherits="jQuery_Ajax_jQAjax" %>
 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head id="Head1" runat="server">
    <title>JQuery  AJAX Ejemplo Básico</title>
  
    <script type="text/javascript" src="../Scripts/jquery-1.3.2.min.js" ></script>
  
    <script type = "text/javascript">
        jQuery(document).ready(function() {
            $('#btnPrueba').click(function() {
                var nombre = $('#txtNombre').val();
                var apellido = $('#txtApellido').val();
 
                if (nombre && (nombre != ''))
                    sendDataAjax(nombre, apellido);
            });
        });
 
        function sendDataAjax(nombre, apellido) {
            var actionData = "{'nombre': '" + nombre + "',
                               'apellido': '" + apellido + "'}";
           
            $.ajax(
            {
                url: "jqAjax.aspx/GetDataAjax",
                data: actionData,
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(msg) { alert(msg.d); },
                error: function(result) {
                    alert("ERROR " + result.status + ' ' + result.statusText);
                }
            });        
        };
    </script>
  
  </head>
  <body>
    Nombre: <input type="text" id="txtNombre" /> <br />
    Apellido: <input type="text" id="txtApellido" /> <br />
    <input type="button" id="btnPrueba" value="Probando AJAX" />
  </body>
</html>
jQuery AJAX Ejemplo, Código C#
using System;
using System.Web.UI;
using System.Web.Services;
 
public partial class jQuery_Ajax_jQAjax : Page
{
    protected void Page_Load(object sender, EventArgs e) {}
    [WebMethod]
    public static string GetDataAjax(string nombre, string apellido)
    {
        return string.Format("Bienvenido al mundo AJAX {0} {1}", nombre, apellido);
    }
}

Al ejecutar la página obtendríamos lo siguiente:

jQuery Ajax JSON

Lo interesante de este ejemplo es que no se hace postback de la página, o sea, no se recarga nuevamente la página al hacer click en el botón “Probando AJAX”. Otro elemento a destacar es la sencillez de uso de este biblioteca (jQuery AJAX).

Pero comentemos un poco el ejemplo que hemos expuesto. Lo primero que hicimos fue asociar al evento click del botón btnPrueba, una función que lee el nombre y apellido y llama a la función sendDataAjax(nombre, apellido).

Esta función es la que hace la llamada AJAX, donde especificamos la URL, que corresponde a la dirección web o al nombre del archivo (jqAjax.aspx) y después el webmethod que invocamos (GetDataAjax), en data van los parámetros de entrada que se espera el webmethod con notación JSON; definimos además el tipo de envío (Post), y por ultimo seteamos success y error, asociándole las funciones que deben ejecutarse al terminarse de procesar la petición, si todo fue bien se ejecutara la función success, de lo contrario ejecutará la asociada a error.

Luego de esto solo queda comentar el código C#, pero creo que se explica por si solo, y además no es el objetivo principal de este post. Solo comentarles que en este ejemplo empleamos el uso de webmethod para hacer la llamada AJAX, pero también podría ser un Web Services, WCF, o una simple página. 

Nota: Este mismo ejemplo podríamos haberlo resuelto usando Microsoft Ajax Library, pero el objetivo de este artículo es que veamos la potencialidad de JQuery AJAX.

Artículos relacionados: