¿Hay forma de NO utilizar ASHX y utilizar WebServices de página?

Sí, la hay, y se hace utilizando JSON para el intercambio de información; y para demostrarlo, en este artículo voy a publicar el mismo ejemplo pero utilizando métodos de la página .Net. Como será el mismo ejemplo, el resultado será el mismo:

Para empezar, debemos crear un nuevo ASP .NET AJAX-Enabled Web Site, que es en realidad un sitio web con el archivo Web.Config modificado para trabajar con ASP .Net AJAX. (obviamente debemos instalarlo antes).  Una vez hecho esto. ya podemos empezar a escribir nuestra aplicación.

Ahora crearé el método en la página que será invocado desde JavaScript, para hacerlo, simplemente se define un método como cualquier otro, con la diferencia de que dicho método debe ser público y estático, además, este método debe tener de forma obligatoria el atributo WebMethod() (disponible en el namespace System.Web.WebService), el cual permitirá que dicho método sea accesible por un solicitud HTTP. En resúmen, debe quedar como se muestra en la siguiente imágen:

Ahora que ya tenemos creado un método accesible desde el lado del cliente, vamos a crear el método JavaScript para invocar a dicho método. Esto lo haremos de la siguiente manera:

Como se ve en la imágen,  los atributos de ajax en jquery deben ser definidos de la siguiente manera:

• type: Indica que los datos viajarán como parte del cuerpo de la solicitud y no serán visibles en la url.
• dataType: El tipo de dato que Jquery espera como respuesta del servidor.
• contentType:  Se usa cuando se desean enviar datos al servidor.
• url: La url hacia donde se van a enviar los datos. En este caso estamos indicando el nombre de la página y seguido del slash (“/”) el nombre del método que queremos invocar. Incluso con este método podremos invocar métodos de otras páginas sin necesidad de cargar toda la página, aunque no recomiendo esto último.
• data: Los datos enviados al servidor. Y como estamos usando json, el formato debe ser {clave:valor, clave:valor}.
• success: Invoca al método que se ejecutará cuando finalice de forma exitosa una llamada a Ajax.
• error: Se desencadena cuando se produce un error en el llamado a ajax.

Bien, espero que me disculpen la demora en escribir este artículo pero estaba un poco ocupado jugando Counter Strike en el trabajo.Yo lo he confesado, antes era fanático de utilizar AjaxPro para mis desarrollos, pero desde que conozco a Jquery Ajax y he aprendido a usarlo, lo utilizo bastante, ya que es más rápido en su desempeño y me permite un mejor control sobre mi código, que es algo que siempre se debe cuidar, además que AjaxPro me generaba algunos archivos adicionales y eso era algo que no me caía bien =P

El código completo y funcionando se encuentra en el archivo a continuación.

Descargar el ejemplo Jquery Ajax WebMethods

Espero que les sea de utilidad.

Saludos.

Si eres desarrollador ASP .Net y no conoces bien esta tecnología de seguro te interesará saber que esta forma de trabajar, aunque te haga escribir más código y parezca medio complicada al inicio resulta incluso mejor (según mi punto de vista) que usar el famoso Ajax.Pro que carga algunas librerías en tiempo de ejecución como por ejemplo:

<script type=”text/javascript” src=”/ajaxpro/prototype.ashx”></script>
<script type=”text/javascript” src=”/ajaxpro/core.ashx”></script>
<script type=”text/javascript” src=”/ajaxpro/converter.ashx”></script>
<script type=”text/javascript” src=”/ajaxpro/[pagina],App_Web_ewvldvwe.ashx”></script>

¿Aún no sabes como utilizar esta tecnología? No hay problema, puedes darle un ojo a este interesante artículo que David Andres ha desarrollado y que muestra bastante bien la forma en la que se puede empezar con este tema.

URL: DevJoker – Aprende Ajax desde cero

Saludos.

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.

Para empezar con este ejemplo, deben descargar la DLL Ajax Pro.2, que es la Librería que permite hacer este trabajo. Sin embargo, no deben utilizar la última versión (7.7.31.1), sino la versión anterior (6.10.6.2), ya que la última versión de esta libreria contiene un BUG del cual ya he comentado antes.

Para empezar, una vez descargada la DLL, solo hay que copiarla dentro de la carpeta Bin en el Sitio Web, y luego configurar el archivo Web.Config con información que permita registrar la DLL, mas o menos como muestra la siguiente imágen:

Como se puede apreciar la parte importante se encuentra en la sección location de la imágen, de modo que no resulta muy complicado de entender. Luego se debe registrar esta DLL dentro de la página en la que se desea invocar, como se muestra en la siguiente imágen:

Una vez, que se ha registrado la DLL en la página, pues solo queda utilizarlo en el cliente, para hacerlo, dentro de una función de JavaScript llamamos a la función anteponiendo el nombre del Namespace que hemos definido, por ejemplo: var resultado = DemoAjaxPro.RecuperarSaludo().value si el método es invocado síncronamente o DemoAjaxPro.RecuperarSaludo(evento_CallBack) si es una invocación asíncrona, en cuyo caso evento_CallBack es una función de JavaScript que se ejecutará cuando el método se haya completado.

En realidad se trata de una muy útil forma de comunicar código de cliente con código de .Net y como se ve es bastante sencillo de utilizar. Como ya se imaginarán, pueden descargar la aplicación de ejemplo sin ningún problema para probarlo y modificarlo a su antojo.

Descargar Ejemplo Ajax Pro

Espero que les sea de utilidad.

Saludos.

Incluso para aquellos que ya conocen algo al respecto, siempre es productivo conocer los puntos de vista de otras personas y este tipo de eventos nos puede resultar por demás interesante.

Si deseas participar, solo debes registrarte en la web de eventos de Microsoft.

Saludos.

Este error se produce cuando ejecutabas un método síncrono, mas o menos 20 segundos después, exactamente en la función timeout… después de buscar el error e indagar por internet sobre este caso (no hay mucho de ello en castellano por cierto) me di con la sorpresa de que se trata de un Bug de la versión, de manera que si obtienes este error de seguro estas usando la versión 7.7.31.1 (que a la fecha es la última). Solución: descárgate una versión anterior (6.10.6.2) y problema resuelto.

Como esta DLL es “libre”, no puedes quejarte… en fin, lo principal era resolver el problema no?

Saludos.

En fin, ese es un tema aparte, el punto principal de este post es el hablar de JQuery, esta librería de JavaScript ayuda mucho en la construcción de efectos visuales y manipulación de objetos en la página web. Aunque antes ya había comentado sobre 240 plugins de jquery listos para usar y había dado un ejemplo de Drag and Drop usando JQuery (si lo haz revisado te darás cuenta que en realidad se trata de listas ordenables con la misma funcionalidad que la ventana de configuración de Widgets de WordPress), creo que no solo basta con esos datos para prender sobre el tema, por ello ahora les dejaré unas direcciones web para que se introduzcan un poco más en el tema:

1. http://www.maestrosdelweb.com/editorial/javascript-facil-y-rapido-con-jquery/
2. http://www.cristalab.com/tutoriales/214/tutorial-de-jquery
3. http://www.javascriptya.com.ar/jquery/index.php
4. http://docs.jquery.com/Main_Page
5. http://interface.eyecon.ro

Las dos primeras direcciones contienen los aspectos básicos de JQuery y que te ayudarán a entender qué es y para qué sirve esta librería. El tercero es una web bastante interesante que toca temas un poco más profundos, sobre métodos, elementos y como utilizarlos dando varios ejemplos, realmente útil.

Luego tenemos la documentación oficial de JQuery desde su propia página, en la que se encuentra la descripción de la libreria e incluye varios ejemplo que son de mucha utilidad. El último enlace es también una librería que se complementa con JQuery para crear aplicaciones interactivas que le ofrecerán a los usuarios una mejora en el uso de las aplicaciones web.

Yo por lo pronto tengo otro ejemplo de Drag and Drop con JQuery y la librería Interface que de hecho publicaré en cuanto baje un poco mi carga laboral. Espero que las direcciones les sean de utilidad, ya que a mi son las que más me han servido.

Saludos.

Si te interesa el desarrollo de páginas web entonces debes mantenerte al día con la lectura de alguno de estos interesantes libros:

1. Referencia completa de CSS 2.1
2. Sympony, la guía interactiva
3. Introducción a AJAX
4. Introducción a JavaScript
5. Introducción a CSS
6. Introducción a XHTML

Yo ya me he descargado algunos y debo confesar que son bastante buenos, completamente gratis y bastante completos.

URL: http://www.librosweb.es/

Espero que les sea de utilidad.

Saludos.

El algoritmo CRC32 (Código de Redundancia Cíclica) se utiliza para porteger la integridad de los datos al verificar que dichos datos no han sido alterados, comparando el CRC32 de los datos enviados con el CRC32 de los datos recibidos. Lo que ocurre aquí es que si se modifica aunque sea un punto de los datos iniciales, el resultado del CRC32 es completamente diferente.

Pues bien, hice una clase adicional para poder invocarlo de forma más fácil ya que la versión original me pareció algo rebuscado y yo necesitaba dicho algoritmo pero con un resultado en decimal y no en hexadecimal como devuelve el algoritmo inicial.

La forma de invocar el resultado desde cualquier punto de la aplicación es la siguiente:

Algoritmos.AlgoritmoCRC32 al = new Algoritmos.AlgoritmoCRC32();
textBox1.Text = al.CRC32Hexa("Hola mundo");
textBox2.Text = al.CRC32Decimal("Hola mundo");

El resultado CRC32 de ambos casos es: F9EC15CE y 4192998862 respectivamente, si se modifica algo de la cadena, los resultados serían completamente diferentes.

Ahora, en el Zip que contiene las clases, encontrarán 3 archivos, Algorithm.cs y CRC32.cs son las clases iniciales que obtuve, la clase AlgoritmoCRC32.cs es la clase que implementé para hacer un poco más accesible el código, tal como ven en el siguiente código:

using System;
using System.Collections.Generic;
using System.Text;

namespace Algoritmos
{
class AlgoritmoCRC32
{
public AlgoritmoCRC32()
{ }

public string CRC32Hexa(string cadena)
{
return ChkSumCRC32(cadena);
}

public string CRC32Decimal(string cadena)
{
return Convert.ToInt64(ChkSumCRC32(cadena), 16).ToString();
}

private string ChkSumCRC32(string cadena)
{
Algorithm alg = new Algorithm("CRC32", new CRC32());
alg.hash.Initialize();

byte[] rawBytes = System.Text.ASCIIEncoding.ASCII.GetBytes(cadena);
byte[] hash = alg.hash.ComputeHash(rawBytes);

StringBuilder sb = new StringBuilder(hash.Length * 2 + (hash.Length / 8));
for (int i = 0; i < hash.Length; i++)
sb.Append(BitConverter.ToString(hash, i, 1));

return sb.ToString().TrimEnd(new char[] { ' ' });
}
}
}

Descargar Algoritmo CRC32 para C#

Url donde obtuve el código: http://www.codeproject.com/cs/algorithms/crc32_dotnet.asp
Espero que les sea de utilidad.
Saludos.

public static bool isNumeric(object value)
{
    try
    {
        double d = System.Double.Parse(value.ToString(), System.Globalization.NumberStyles.Any);
        return true;
    }
    catch (System.FormatException)
    {
        return false;
    }
}

Este tipo de funciones deberían colocarse en una clase absracta de manera que se pueda invocar desde cualquier punto de la aplicación. Espero que les sea de utilidad.

Saludos.