Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

18 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
miércoles, 24 de marzo de 2010
jQuery Sí, habéis leído bien: ASP a secas, sin la habitual terminación “.NET” que venimos usando mucho últimamente ;-).

Resulta que estoy metido en un proyecto colaborando con un equipo de trabajo que está desarrollando un portal web con esa tecnología (!), y me han encargado la creación de unas herramientas ajaxificadas dentro del mismo.

Aunque pueda parecer lo contrario, las aplicaciones desarrolladas con las vetustas (pero aún vivas) páginas activas de servidor (ASP) pueden aprovechar toda la potencia de las librerías de script de última generación, como la maravillosa jQuery. Vamos a ver lo sencillo que resulta tanto implementar un servicio JSON como consumirlo desde una página ASP.

El lado servidor

El servicio JSON lo implementaremos en un archivo al que llamaremos, por ejemplo, JsonObtenerProductos.asp, cuyo código podría ser como el siguiente:

<!--#INCLUDE FILE="Includes\Functions.asp" -->
<%
   Dim categoryId, Rs, count
 
   Response.Expires = -1
   If Not UserLogged() or Request("categoryId")="" Then
      Response.End
   End If
 
   categoryId = Cint(Request("categoryId"))
 
   OpenDatabase()
   Set Rs = GetProductsByCategoryRecordset(categoryId)
 
   Response.ContentType = "application/json"
   Response.Write "{"
   Response.Write "  ""datos"": ["
   count = 0
 
   While Not Rs.Eof
      Dim id, name, desc
      id = Rs("id")
      name = Rs("name")
      desc = Rs("desc")
      count = count + 1
      If count > 1 Then
         Response.Write ", "
      End If
 
      Response.Write "{ "
      Response.Write "   ""productId"": " & id & ", "
      Response.Write "   ""productName"": """ & name & """, "
      Response.Write "   ""productDesc"": """ & desc & """"
      Response.Write "}"
      Rs.MoveNext      
   Wend
   Response.Write "         ]"
   Response.Write "}"
 
   Rs.Close
   CloseDatabase()
%>

Como se observa, se establece el tipo de contenido a “application/json”, y a continuación se envía al cliente un objeto en formato JSON, en este caso un array de objetos construidos a partir de la información obtenida desde un RecordSet.

Así, una llamada al servicio mediante la petición GET /JsonObtenerProductos.asp?categoryId=3 podría retornar el siguiente resultado:

{  
   "datos": 
   [
      { "productId": 1, "productName": "Producto 1", "productDesc": "Descripción 1"}, 
      { "productId": 2, "productName": "Producto 2", "productDesc": "Descripción 2"}, 
      { "productId": 3, "productName": "Producto 3", "productDesc": "Descripción 3"}
   ]
}

Se puede entender a simple vista; se trata de una serie de objetos, separados por comas, en cuyo interior se definen cada una de sus propiedades con su correspondiente valor. Fijaos que el mismo nombre de la propiedad va entrecomillado.

El lado cliente

Desde la página .asp que consumirá el servicio, como siempre, lo primero es referenciar la librería jQuery en la página, así:

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

A continuación, introducimos en el marcado de la página el siguiente código, que muestra un desplegable con categorías de productos, cuyo cambio provocará la llamada al servidor, y reserva un bloque <div> para mostrar el resultado:

<select id="categories" onchange="reloadProducts()">
   <option value="1">Electrodomésticos</option>
   <option value="2">Informática</option>
   <option value="3">Cocina</option>
   ...
</select>
<div id="result">
</div>

El código de la función reloadProducts() es el mostrado a continuación. Utiliza el método getJSON() de jQuery para realizar la llamada Ajax, suministrándole como parámetro la categoría seleccionada en el desplegable en forma de objeto anónimo.

<script type="text/javascript">
  function reloadProducts() {
    $.getJSON(       
    "JsonObtenerProductos.asp",               // URL del servicio
    { categoryId: $("#categories").val() },   // Parámetros
    function(data) {                          // Función callback          
      var elem = $("#result");elem.empty(); // Limpiamos el contenedor          
      var s = "<ul>";
      $.each(data.datos, function(i, item) {
        s += "<li>" + item.productName + "</li>";
      });
      s += "</ul>";
      elem.html(s);   // Insertamos la lista en el contenedor
    });
  }
</script>

En la función callback, invocada por jQuery cuando la llamada Ajax ha sido completada con éxito, recibimos en el parámetro “data” los datos obtenidos desde el servidor, en nuestro caso un array de objetos.

Tras limpiar el <div> donde depositaremos la información, recorremos con $.each() el array de objetos data.datos para crear una lista de productos, que insertamos a continuación en el interior del contenedor.Observad que en el interior del bucle estamos accediendo directamente a la propiedad “productName” del elemento.

Y voila! Con esto tendríamos listo un sistema completo de carga asíncrona de elementos utilizando ASP y jQuery. Pero no sólo eso, podríamos utilizar la misma técnica para realizar actualizaciones de zonas de página definidas en archivos .asp independientes, o aprovechar la potencia de plugins y librerías adicionales para mejorar la experiencia de usuario de nuestros sistemas.

Y es que ASP todavía se utiliza bastante y, aunque se trate de una tecnología obsoleta, puede resultar totalmente válida para crear aplicaciones actuales desde el punto de vista de interfaces de usuario e interacción con el servidor, utilizando librerías de scripts de última hornada.

Publicado en: Variable not found.
Hey, ¡estoy en twitter!

4 Comentarios:

Juan Marin dijo...

Genial!!

Unknown dijo...
Este comentario ha sido eliminado por el autor.
Unknown dijo...

en la function(data} me arroja un internal error 500

josé M. Aguilar dijo...

Hola!

Bueno, un error 500 es demasiado genérico y podría deberse a muchas cosas.

Intenta ir simplificando el código en sucesivos pasos hasta dar con la porción que falla, y probablemente podrás averiguar de qué se trata :)

Saludos.