miércoles, 26 de marzo de 2014

Tutorial de ASP.NET JQuery AJAX usando WebMethods y JSON consulta LinQ


Como parte de mi actual trabajo, debo hacer aplicaciones ASP.NET, asi que he aprendido a utilizar esta tecnología, dentro de mis desarrollos he utilizado un gran framework como Ext.Net, pero en mi ultimo desarrollo, decidí explorar un poco, asi que el desarrollo lo hice, con WebForms, JQuery para hacer las llamadas AJAX a un WebMethod y devuelva JSON, vamos a ver como lo cree, en este ejemplo.

Esta aplicación ha sido desarrollada para correr sobre IIS7, con un motor de base de datos MS SQL Server 2008 y el Framework 4.0.

Para las conexiones y consultas a la base de datos utilizaremos LINQ.

En este ejemplo demostraremos primero, como traer información desde una base de datos mediante JQuery Ajax, del lado de dotNet utilizaremos WebMethods donde ubicaremos las funciones para nuestra logica, el WebMethod sería similar a un controlador en el patron MVC.


Bueno, en el Visual Studio, creamos un nuevo Web Site, y le damos el nombre que prefiramos en mi caso se llama dotNetExamples.

Creamos nuestra base de datos que será algo similar a esto :



Ahora si visualizamos la tabla deberá ser asi:


Ahora que ya tenemos nuestra base de datos vamos a crear nuestro archivo DBML, para poder mapear nuestra tabla.


Y dentro de el arrojamos nuestra tabla.


En mi caso el DBML se llama TestContext.


Ahora debemos colocar los archivos que necesitaremos.

En la carpeta Scripts, deberá ir nuestros archivos Javascripts, para este ejemplo JQuery.

A continuacion creamos nuestro master.



Ahora crearemos nuestra pagina Default.aspx



Esto es lo que deberiamos ver por ahora


Explicaremos que hace este código.

Dentro de script hemos colocad nuestro código JQuery, con el cual seleccionamos el boton Ver, utilizando el selector # de JQuery para seleccionar por ID, $("#ver_usuario"), luego agregamos el Listener al evento Click, $("#ver_usuario").click.

Dentro de click desarrollamos la llamada AJAX, si bien JQuery, tiene otros metodos menos verbosos, como $.post, para ASP.Net es necesario, utilizar este metodo, para poder definir estas dos propiedades de la llamada AJAX, contentType: "application/json; charset=utf-8",dataType: "json"

Entonces nuestra llamada AJAX, es configurada, asi, el metodo HTTP a usar es POST, la url que debe llamar es url: "WSUsuarios.asmx/ver_usuario", los parametros que se envian por POST, son data: '{"nombre": "Dennis"}'.

Dentro de success, definimos lo que debe ocurrir de no existir error, en este caso, lo que devuelve el servidor se almacena en la variable response, en .Net, ocurre algo peculiar, por defecto envuelve las respuestas JSON dentro de una estructura d, por eso es que al momento de hacer la conversion de la cadena de respuesta en un objeto JSON, hacemos un response.d, creamos nuestro objeto JSON, usando el metodo parseJSON de JQuery, var json = $.parseJSON(response.d);

El resto del código es para mostrar en nuestro HTML.

Lo que viaja por detrás es una llamada AJAX, que se ve asi:


Y lo que devuelve el servidor es esto:


Y por ultimo crearemos nuestro WebMethod el cual tendrá nuestra funcionalidad.


Su codigo será el siguiente:



Verán más código que será el que explicaré en otro POST.

Lo primero es que deben asegurarse que la línea, <System.Web.Script.Services.ScriptService()> _ se encuentre habilitada, sino no podrá efectuarse las llamadas AJAX.

Ahora explicaremos la función para obtener los datos de un determinado usuario, para esto implementamos el metodo ver_usuario

<WebMethod()> _
    Public Function ver_usuario(ByVal nombre As String) As String
        Dim dbx As New TestContext
        Dim record = (From u In dbx.Usuarios Where u.nombre.Equals(nombre) Select u).FirstOrDefault
        Dim result = JObject.FromObject(record)
        Return result.ToString
    End Function

Esta función, recibe un parámetro, el cual es lo que enviaremos desde nuestra página aspx, usando JQuery AJAX.

Lo primero que hacemos es instanciar el Contexto, TestContext, quien es el que encapsula nuestra conexión a la base de datos.
Hacemos nuestra consulta utilizando el lenguaje de consulta LINQ, From u In dbx.Usuarios Where u.nombre.Equals(nombre) Select u, al decirle FirstOrDefault, le estamos solicatando nos devuelva un solo elemento o NULL, su resultado que es un registro de nuestra tabla Usuarios, lo almancenamos en la variable record.

En este caso para transformarlo a JSON, aprovechamos la libreria Newtonsof.Json la cual debemos haber puesto en la carpeta BIN de nuestro proyecto.

Su uso es bastante sencillo, como veran en una sola línea serializa nuestro registro y lo trasnforma en un objeto JSON, el cual es lo que retornaremos en esta función.

Como resultado, cuando piquen en el botón Ver, los datos serán cargados mediante AJAX.


Lo que en realidad está pasando es la siguiente estructura JSON.



El código de este tutorial lo pueden encontrar en mi repositorio Github.

Esto dista de ser las mejores practicas pero a alguien le puede servir.

Si quieren ver algo similar con PHP, pueden visitar este POST.

http://dairdev.blogspot.com/2014/03/uso-basico-de-jquery-con-php-llamadas.html

1 comentario:

  1. Esta muy interesante tu publicación, tengo una pregunta, ¿el webservice se crea en el mismo proyecto de la aplicación?

    ResponderEliminar

 
Powered by Blogger