23 de noviembre de 2009

AJAX jQuery Load con ASP.NET

jQuery dispone de la función $.load(), con ella es muy simple implementar AJAX en nuestras aplicaciones. La función $.load() inserta el contenido HTML de la respuesta del servidor en el elemento de la página que se indica.

Pero expliquemos con más detalles un ejemplo donde usemos esta técnica.

Método jQuery Load

En días pasados escribí un articulo sobre un ejemplo práctico de como utilizar AJAX jQuery en aplicaciones ASP.Net. En dicho artículo usaba la función $.ajax() y explicaba sus parámetros y como hacer uso de ella en ASP.Net, es esta ocasión intento explicar otra función de jQuery AJAX, en particular $.load:

load(url, [data], [callback])

Argumentos:

  • url: La URL a la que enviaremos la solicitud.
  • data: [opcional] Un objeto en formato JSON que se pasa a la solicitud AJAX. Al usar este argumento la petición se hace utilizando el método POST. Si es omitido se utiliza el método GET.
  • callback: [opcional] Una función que se invocará después de que la solicitud ha sido procesada.

jQuery AJAX Método load, Ejemplo

Nuestro ejemplo será muy simple, crearemos una página aspx que contendrá 2 botones y un div. Con ambos botones lo que haremos será usar la función jQuery AJAX $.load() para cargar, en el div, contenido externo que está en otra página. La diferencia entre ambos botones es que en uno usaremos la forma más simple de uso de jQuery AJAX load, en el segundo lo complicaremos un poco más, pero veras que igualmente es muy simple. Este ejemplo nos servirá para dar una idea sobre el uso de jQuery AJAX load.

Pero veamos el código de ejemplo asociado:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQAjaxLoad.aspx.cs" Inherits="jQuery_Ajax_jQAjax" %>
<html>
  <head id="Head1" runat="server">
    <title>JQuery AJAX, Usando Load, 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() {
            $('#btnAJAXLoadSimple').click(function() {
                 $('#resultado').load('Contenido.htm');
             });
        });
    </script>   
  </head>
  <body>
    <input type="button" id="btnAJAXLoadSimple" value="Probando jQuery AJAX Load Simple" />
    <br /><br />
    <div id="resultado" style="border:solid 1px; padding:10px;"></div>
  </body>
</html>

Comentemos un poco el código mostrado:

En el Head vemos que después de definir el titulo de la página (JQuery AJAX, Usando Load, Ejemplo Básico) lo próximo es hacer referencia al jQuery.js, en nuestro caso (jquery-1.3.2.min.js).

Después encontramos la definición de la función jQuery(document).ready(), que se ejecutará una ves halla finalizado la carga de la página. En ella asociamos al evento click del botón btnAJAXLoadSimple la llamada Ajax usando el método load. En esa línea definimos que el div ‘resultado’ lo que debe hacer es cargar en su interior el HTML que se encuentra en el fichero Contenido.htm.

Ver demo de jQuery AJAX Load Simple.

Pero compliquemos un poco más la llamada al método.

 

jQuery AJAX Método load, Ejemplo Avanzado

Al código anterior agreguémosle el segundo botón donde mostraremos otras opciones de $().load()
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQAjaxLoad.aspx.cs" Inherits="jQuery_Ajax_jQAjax" %>
<html>
  <head id="Head1" runat="server">
    <title>JQuery AJAX, Usando Load, 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() {
            $('#btnAJAXLoadSimple').click(function() {
                 $('#resultado').load('Contenido.htm');
             });
             $('#btnAJAXLoadComplejo').click(function() {
                 $('#resultado').load('ContenidoAjax.aspx?Opcion=1',
                                      { 'Nombres[]': ["José", "María"] },
                                      MostrarAviso());
             });
        });
        function MostrarAviso() {
            alert("Finalizada la petición AJAX.");
        }
    </script>
  
  </head>
  <body>
    <input type="button" id="btnAJAXLoadSimple" value="Probando AJAX Load Simple" />
    <input type="button" id="btnAJAXLoadComplejo" value="Probando AJAX Load Complejo" />
    <br /><br />
    <div id="resultado" style="border:solid 1px; padding:10px;"></div>
  </body>
</html>

En este otro código de ejemplo hemos agregado la funcionalidad del segundo botón (btnAJAXLoadComplejo) del evento click. En este caso al hacer click en el botón cargaremos el contenido que nos devuelva la página 'ContenidoAjax.aspx'.

Además pasaremos por QueryString la variable Opcion=1 ('ContenidoAjax.aspx?Opcion=1'), además pasamos un array de nombre y definimos la función MostrarAviso() que se ejecutará al terminar la petición AJAX.

Veamos ahora el código C# de la página que será llamada ('ContenidoAjax.aspx?Opcion=1')

public partial class jQuery_Ajax_ContenidoAjax : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string result = string.Empty;
        if (Request.QueryString["Opcion"] == null)
            result = "La fecha y hora actual es: " + DateTime.Now.ToString();
        else if (Request.QueryString["Opcion"] == "1")
            result = "1. Se usó la opción 1. La fecha es: " + DateTime.Now.ToString();
        else
            result = "Se ha realizado una petición AJAX.";
        Response.Write(result);
    }
}
Nota: En el ejemplo pasamos en el método load un array de nombres que no estamos usando en la página destino, pero el objetivo era únicamente mostrar que es posible pasar datos con formato JSON.

 

jQuery AJAX, Otros Métodos

Además de la función $.ajax() genérica, existen varias funciones relacionadas que son versiones simplificadas y especializadas de esa función. Así, las funciones $.get() y $.post() se utilizan para realizar de forma sencilla peticiones GET y POST:

He de destacar que la función genérica de uso de jQuery AJAX es $.ajax(). Acá hemos explicado $.load() que es una versión simplificada y especializada de hacer peticiones Ajax. Existen otras formas simplificadas de hacer peticiones AJAX con jQuery que aunque no explicaremos aquí, haremos referencias para que conozcas de su existencia:

Nota: En ocasiones resulta conveniente que el método $.load() recupere un HTML pero que no lo pinte todo en nuestra página, sino solo una parte en concreto, en ese caso podemos utilizar una nueva característica del método .load(), se trata de especificar junto con la url un selector jQuery que filtre el resultado, por ejemplo: $('#resultado').load('Contenido.htm .MyClass'); esto nos devolverá de la página Contenido.html solo los elementos que tengan como ClassName el valor .MyClass.


Artículos Relacionados:

6 comentarios:

  1. con ina pagina .aspx como contenido y hacer la suma de dos numeros dentro el contenido no funciona.... como lo haria please...

    ResponderEliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar