JSON en Ajax
De regreso hoy lunes de Arequipa donde estuve dictando un curso el fin de semana. Por coincidencia esta semana que paso tanto este curso como otro en un cliente he tocado los temas de ASP .NET Ajax.
Ahora cuando comienzo el curso y hablo de que cuando se desarrolla con Ajax en ASP .NET se debe evaluar el rendimiento para buscar la forma para tener una pagina eficiente vienen los comentarios acerca de los problemas que han tenido con sobrecarga en las paginas. Ciertamente el UpdatePanel facilita mucho el trabajo pero hay varias formas de lograr usar Ajax ademas del UpdatePanel y que en ocasiones es ideal.
Entonces ahora empezamos el curso hablando justamente del enfoque del lado del cliente con ASP .NET Ajax. Ajax nos permite invocar funcionalidades de servidor sin necesidad de crear servicios web con los métodos de página (Page Methods). El objetivo es permitirnos llamar a métodos estáticos de cualquier página (.aspx) desde el cliente utilizando Javascript sin complicarnos mucho la vida y de una forma mas eficiente.
En principio Ajax emite JSON por defecto, esto se puede configurar a traves del atributo
[ScriptService], configurandolo podriamos definir la forma de la llamada a traves de POST o GET y la forma de la serializacion, por ejemplo
[ScriptMethod(ResponseFormat=ResponseFormat.Json )]
[WebMethod]
public int LeerCantidadEmpleados(string departmento)
{
System.Threading.Thread.Sleep(2000);
return RecursosHumanos.LeerCantidad(departmento);
}
Donde este metodo ofrece una serializacion JSON, la otra alternativa podria ser XML.
A continuacion voy a mostrar como invocar directamente un servicio web desde una pagian ASP .NET pero usando elementos HTML con el ScriptManager pero sin usar controles del lado del servidor para mejorar el rendimiento de la pagina al no usar UpdatePanel:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EnfoqueDelCliente.aspx.cs" Inherits="EnfoqueDelCliente" %>
<
html>
<
body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="Servicio.asmx" />
</Services>
</asp:ScriptManager>
<h2>Busqueda de Empleados</h2>
<div>
<select id="Departamentos" size="5">
<option value="Ingenieria">Ingenieria</option>
<option value="HR">Recursos Humanos</option>
<option value="Ventas">Ventas</option>
<option value="Marketing">Marketing</option>
</select>
</div>
<br />
<div>
<span id="Resultado"></span>
<span id="loading" style="display:none;">
<img src="images/indicator.gif" alt="" />
Loading ...
</span>
</div>
<script type="text/javascript">
<!--
var departments = null;
Sys.Application.add_load(page_load);
Sys.Application.add_unload(page_unload);
function page_load(sender, e){
departamentos = $get("Departamentos");
$addHandler(departamentos, "change", departamentos_onchange);
}
function page_unload(sender, e){
$removeHandler(departamentos, "change", departamentos_onchange);
}
function departamentos_onchange(sender, e){
$get("Resultado").innerHTML = "";
$get("loading").style.display = "block";
var selectedValue = departamentos.value;
Servicio.LeerCantidadEmpleados(selectedValue, onSuccess);
}
function onSuccess(result){
$get("loading").style.display = "none";
$get("Resultado").innerHTML = "Cantidad Empleados: " + result;
}
//-->
</script>
</form>
</body>
</html>
En esta seccion se referencia al servicio web:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="Servicio.asmx" />
</Services>
En este metodo JavaScript se llama al metodo LeerCantidadEmpleado del servicio web pasandole el elemento seleccionado de la lista y derivando la ejecucion al metodo onSuccess, que es donde se recibe el resultado del servidor y se procesa en el cliente:
function departamentos_onchange(sender, e){
$get("Resultado").innerHTML = "";
$get("loading").style.display = "block";
var selectedValue = departamentos.value;
Servicio.LeerCantidadEmpleados(selectedValue, onSuccess);
}
Metodo donde se procesa el resultado:
function onSuccess(result){
$get("loading").style.display = "none";
$get("Resultado").innerHTML = "Cantidad Empleados: " + result;
}
Ahora se puede lograr lo mismo con el atributo PageMethods del ScriptManager de la siguiente manera:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods=true>
</asp:ScriptManager>
Y el metodo JavaScritp cambia de la siguiente manera:
function departamentos_onchange(sender, e){
$get("Resultado").innerHTML = "";
$get("loading").style.display = "block";
var selectedValue = departamentos.value;
PageMethods.LeerCantidadEmpleados(selectedValue, onSuccess);
}
Ademas el metodo invocado se escribe en la misma pagina ASP .NET de la siguiente manera:
[WebMethod]
public static int LeerCantidadEmpleados(string departmento)
{
System.Threading.Thread.Sleep(2000);
return RecursosHumanos.LeerCantidad(departmento);
}
En este caso no es necesario que sea un servicio Web pero si un metodo estatico. Estas dos formas son alternativas a usar un UpdatePanel y demuestran una forma eficiente de usar Ajax en ASP .NET.
Otra forma habitual de hacer esta invocacion seria usando JQuery que brinda caracteristicas adicionales como son capacidad de invocar al metodo o al servicio desde otra pagina, una limitante que en este caso se muestra en ASP .NET Ajax.