h@nz …el Geek

Jquery es un framework javascript bastante bueno, nadie lo puede dudar, y Ajax, es una tecnología que permite crear aplicaciones bastante mas robustas y dinámicas que le dan al usuario una mejor experiencia; al trabajar con una página web será necesario en algún momento combinar ambas tecnologías para conseguir una aplicación al estilo Web 2.0.

Voy a poner a continuación un ejemplo de como utilizar JQuery para hacer invocaciones Ajax en una aplicación ASP .Net. La idea de este ejemplo es simple, cargo un DropDownList de ASP .Net con algunos elementos, en este caso carreras de estudio, además se tiene un segundo DropDownList pero vacío, al seleccionar una carrera, se debe llenar el segundo DropDownList con los cursos que se dicten en la carrera. El resultado debe ser mas o menos como la imágen de la izquierda y el proceso obviamente se debe realizar sin postback. Como siempre, el archivo con el código completo lo pueden conseguir al final del artículo.

La definición de mi primer DropDownList la haré de la siguiente manera:

<asp:DropDownList ID=”ddlCarreras” runat=”server” AppendDataBoundItems=”True” onChange=”listarCursos(this.value);” />

y llenaré dicho DropDownList en el evento Load de la página como normalmente lo haría. En esta definición del control hay un evento de javascript, cuando del lado del cliente yo seleccione un elemento se ejecutará la función listarCursos de javascript, la cual recibe el valor seleccionado.

Ahora, analizaremos lo que hace la función listarCursos de javascript:

        function listarCursos(idCarrera){
            $.ajax({
                type:“POST”,
                url:“Controladores/DevolverDatos.ashx”,
                data:”carrera=” + idCarrera,
                success: mostrarCursos
            });
        }
       
        function mostrarCursos(html){
            $(‘#<%=ddlCursos.ClientID %>’).html(html);
        }

La función listarCursos hace un llamado a través de ajax controlado por jquery indicándole que enviará datos a usando el método POST hacia el archivo DevolverDatos.ashx, que es un controlador HTTP de ASP .Net, luego le indicamos, los datos que queremos enviarles como un par clave=valor separado por el signo igual (=); finalmente le indicaremos a nuestro método ajax que función debe realizar cuando termine de ejecutarse la invocación al controlador ashx, en este caso, se ejecutará el método mostrarCursos, el cual recibe el código html que devuelve el controlador. Esta función lo único que hace es agregar el html que contiene las opciones de un select de html en el DropDownList para cursos.

La estructura de un controlador ASHX es la siguiente:

y el código que se quiera utilizar para la funcionalidad a realizar se colocará en el método ProcessRequest, y para devolver el html que necesitamos utilizamos context.Response.Write(“Aqui mi texto”);

En el archivo que pueden descargar a continuaciòn esta el ejemplo y ya ustedes podrán personalizarlo a su antojo. Solo es cuestión de ir leyendolo de a pocos.

Descargar Ejemplo JQuery y Ajax

Espero que les sea de utilidad.

Saludos.