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 :

CREATE DATABASE Test;
USE Test;
IF OBJECT_ID ('dbo.Usuario') IS NOT NULL
DROP TABLE dbo.Usuario
GO
CREATE TABLE dbo.Usuario
(
id INT IDENTITY NOT NULL,
nombre VARCHAR(15),
paterno VARCHAR(15),
materno VARCHAR(15),
ingreso INT,
genero CHAR(1),
PRIMARY KEY (id)
)
GO
INSERT INTO Usuario (nombre, paterno, materno, ingreso, genero) VALUES
('Dennis','Infantas','Reaño',2014,'M'),
('Otro','Usuario','Mas',2014,'M'),
('Fulana','Sutana','Mengana',2014,'F'),
('Ella','EsLa','Usuaria',2014,'F');
view raw create_test_db.sql hosted with ❤ by GitHub


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.

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title runat="server">Mi Applicacion dotNet con JQuery</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
Mi ASP.NET Application con JQuery
</h1>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
view raw Site.master.html hosted with ❤ by GitHub


Ahora crearemos nuestra pagina Default.aspx

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Ejemplo de uso de JQuery</h2>
<hr />
<h3>
Primer ejemplo</h3>
<h4>
Traer informacion de una tabla en la BD utilizando JQuery AJAX y JSON</h4>
<p>
Presione el boton Ver <button type="button" id="ver_usuario">Ver</button> para ver los datos del usuario Dennis
</p>
<div id="respuesta">
<dl>
<dt>Nombres</dt>
<dd id="nombre"></dd>
<dt>Genero</dt>
<dd id="genero"></dd>
<dt>Ingreso</dt>
<dd id="ingreso"></dd>
</dl>
</div>
<script type="text/javascript">
$("#ver_usuario").click(function () {
$.ajax({
type: "POST",
url: "WSUsuarios.asmx/ver_usuario",
data: '{"nombre": "Dennis"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var json = $.parseJSON(response.d);
$("#nombre").html(json.nombre + " " + json.paterno + " " + json.materno);
var genero = 'Masculino';
if (json.genero == 'F') {
genero = 'Femenino';
}
$("#genero").html(genero);
$("#ingreso").html(json.ingreso);
}
});
});
</script>
</asp:Content>
view raw Default.aspx hosted with ❤ by GitHub


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:

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Linq
Imports System.Data.Linq
Imports DataContext
Imports Newtonsoft.Json.Linq
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WSUsuarios
Inherits System.Web.Services.WebService
<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
<WebMethod()> _
Public Function agregar_usuario(ByVal nombre As String, ByVal paterno As String, ByVal materno As String, ByVal ingreso As String, ByVal genero As String) As String
Dim result As String = "Success"
Dim dbx As New TestContext
Dim record As New Usuario
With record
.nombre = nombre
.paterno = paterno
.materno = materno
.ingreso = CInt(ingreso)
.genero = CChar(genero)
End With
dbx.Usuarios.InsertOnSubmit(record)
dbx.SubmitChanges()
Return result
End Function
<WebMethod()> _
Public Function listar_usuarios() As String
Dim dbx As New TestContext
Dim records = (From u In dbx.Usuarios Select u)
Dim recordsJson As New JObject
With recordsJson
.Add(New JProperty("sEcho", 1))
.Add(New JProperty("iTotalRecords", records.Count))
.Add(New JProperty("aaData", New JArray( _
From r As Usuario In records _
Select New JObject( _
New JProperty("nombre", r.nombre), _
New JProperty("paterno", r.paterno), _
New JProperty("materno", r.materno), _
New JProperty("ingreso", r.ingreso), _
New JProperty("genero", CStr(r.genero))
))))
End With
Return recordsJson.ToString
End Function
End Class
view raw WSUsuarios.vb hosted with ❤ by GitHub


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
Publicado por en 20:19
Etiquetas: , , , , , , , ,

1 comentario:

  1. Wilberth Frias25 de agosto de 2018, 20:31

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

    ResponderEliminar

Suscribirse a: Enviar comentarios (Atom)
 
Powered by Blogger